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. (Via @ChromeDevTools)

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 […]

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. […]

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 […]

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: Enable “Developer Tools Experiments” via chrome://flags/ if you haven’t already In the DevTools, go to Settings and select Experiments Hit SHIFT 6 times After having done […]

Using DevTools Features Without Opening DevTools using Puppeteer

Keeping a feature of the Chrome Devtools – such as the FPS Meter – running with the DevTools closed unfortunately is not possible (yet?). Kayce Basques provides us with a little workaround though: You can hack together a Puppeteer script that launches Chromium, opens a remote debugging client, then turns on the DevTools feature that […]

Inspecting Redux Stores in Production, without the Redux Devtools

Checking out the Redux Store of Soundcloud Redux Back in the day I learnt a lot by hitting CTRL+U (View Source) on websites. Nowadays I still check the source code of some apps, yet it’s become a tad more difficult for some specific things. When it comes to React apps that use Redux I like […]

Chrome DevTools: Better JavaScript logging with the Log Management UI

Great explanation by Umar Hansa on the upcoming Log Management UI in the Chrome DevTools: The new Log Management UI is an experimental feature in Canary DevTools. Once enabled, you can create console.log functions which have their own context. One can create new logging contexts using console.context(name): const thirdPartyLogger = console.context(‘3rd Party’); const infoLogger = […]