Chrome 88 – What’s New in DevTools

I especially like the New CSS Angle Visualization Tool 🙂

What’s New In DevTools (Chrome 88) →

Chrome DevTools Pong – A game to play inside the Chrome DevTools

Move over Chrome Dino Game! Now you can play Pong inside the Chrome DevTools.

Chrome DevTools Pong →

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 – A time-travel state debugger for React apps

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();
reactime(rootContainer);

Reactime →

💡 Be sure to also check out the “regular” React DevTools. They’re awesome!

Emulate Dark Mode using Chrome DevTools

Coming to the next version of Chrome is a way to emulate “Dark Mode” using the DevTools. With the DevTools open and focused, hit SHIFT+CMD+P and choose “Emulate CSS prefers-color-scheme: dark from the menu

You can also access the option via the Rendering panel.

How to start using your browser’s debugger

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.

How to stop using console.log() and start using your browser’s debugger →

☝️ Do not confuse the debugger with extra console.… methods such as console.table(), something which you can read about here.

How to use React Dev Tools, an introduction

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.

React DevTools — Debug Like a Ninja →

(*) The “Debug Like a Ninja” subtitle is overkill, to be honest 😅

React DevTools 4.0

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.

React DevTools 4.0.0 Changelog →
Interactive React DevTools Tutorial →
React DevTools extension for Google Chrome →
React DevTools extension for Mozilla Firefox →

Mozilla Hacks: Designing the Flexbox Inspector

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.

Designing the Flexbox Inspector →

Enabling experimental Developer Tools Experiments

Using chrome://flags/ it’s possible to enable “Developer Tools Experiments”.

On the most recent Fronteers Conference, Umar Hansa showed that there are even more DevTools Experiments that one can enable:

  1. Enable “Developer Tools Experiments” via chrome://flags/ if you haven’t already
  2. In the DevTools, go to Settings and select Experiments
  3. Hit SHIFT 6 times

After having done so you should see some – eh – “experimental experiments” available in the list (highlighted in grey)

Did this help you out? Like what you see?
Consider donating.

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!

☕️ Buy me a Coffee ($3)