I especially like the New CSS Angle Visualization Tool 🙂
Move over Chrome Dino Game! Now you can play Pong inside the Chrome DevTools.
Spoiler: How it works
In case you were wondering: it’s a regular Pong game, but with the elements visually hidden (
opacity: 0;) so that they only show up in the DevTools’ Layers Panel.
So simple, that becomes awesome!
Reactime is a debugging tool for React developers. It records state whenever it is changed and allows the user to jump to any previously recorded state.
This dev tool is for React apps using stateful components and prop drilling, and has beta support for Context API, conditional state routing, Hooks (useState, useEffect) and functional components.
Here’s a demo of it in action:
Comes in two parts: a Chrome Extension and a NPM package that you need to install inside your project.
npm i reactime
You’ll also need perform some (upfront) code adjustments so that the package sends data over to the extension:
import reactime from 'reactime'; const rootContainer = document.getElementById('root'); ReactDOM.render(
, rootContainer); reactime(rootContainer);
To support concurrent mode, you’ll need this adjustment:
import reactime from 'reactime'; const rootContainer = ReactDOM.createRoot(document.getElementById('root')); rootContainer.render(
💡 Be sure to also check out the “regular” React DevTools. They’re awesome!
Solid introduction – with a real use case – on how to use the browsers’s built-in debugger:
In this post, I will cover using breakpoints, stepping through your code, setting watch expressions, and applying your fixes in Chrome Developer Tools.
☝️ Do not confuse the debugger with extra
console.… methods such as
console.table(), something which you can read about here.
Dev Tools can do a lot of things. We’re are not going to dive into the nitty gritty details of each and every feature. Instead we’ll take a look at the top 10 helpful features that help us save time and write better React code.
Good intro (*) on how to find your way around in the aforementioned React DevTools 4.0.
(*) The “Debug Like a Ninja” subtitle is overkill, to be honest 😅
Version 4 of the React DevTools have been released, with a lot of improvements.
At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects.
The release notes hold a detailed list of changes, with example gifs. Furthermore there’s an interactive React DevTools tutorial showing you a few of the basics.
ℹ️ If you’re interested in some more behind the scenes, be sure to follow @brian_d_vaughn on Twitter. He’s been working on it the past few months.
React DevTools 4.0.0 supports
react-dom 15.x and up, and
react-native 0.62 and up.
With the upcoming release of Firefox 65 (due January 29tgh), its DevTools will sport a new shiny Flexbox Inspector.
The new Flexbox Inspector, created by Firefox DevTools, helps developers understand the sizing, positioning, and nesting of Flexbox elements.
Victoria Wang details how they UX challenges that came with this tool were tackled.
Built on the basic concepts of the CSS Grid Inspector, we sought to expand on the possibilities of what a design tool could be. I’m excited to share a behind-the-scenes look at the UX patterns and processes that drove our design forward.
chrome://flags/ it’s possible to enable “Developer Tools Experiments”.
- Enable “Developer Tools Experiments” via
chrome://flags/if you haven’t already
- In the DevTools, go to Settings and select Experiments
After having done so you should see some – eh – “experimental experiments” available in the list (highlighted in grey)
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!
New to DevTools in Chrome 64: the real-time Performance Monitor, easier filtering with the Console Sidebar, and automatic message groupings in the Console.