Tag Archives: devtools

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 … Continue reading

Original Content , Leave a comment

Chrome 64 – What’s New in DevTools

New to DevTools in Chrome 64: the real-time Performance Monitor, easier filtering with the Console Sidebar, and automatic message groupings in the Console.

Elsewhere , , Leave a comment

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 … Continue reading

Elsewhere , , , Leave a comment

Inspecting Redux Stores 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 … Continue reading

Original Content , , , Leave a comment

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 … Continue reading

Elsewhere , , , Leave a comment

CSS Grid Highlighter for Google Chrome

Firefox has been taking the lead into this one. Adem Ilter has created a basic version that works with Google Chrome. CSS Grid Highlighter for Google Chrome →

Elsewhere , , , Leave a comment

Chrome DevTools’ Command Menu

Something I learnt via Umar Hansa‘s great DevTools Tips is that the Chrome DevTools sport a Command Menu. By hitting SHIFT+CMD+P (same shortcut as Sublime Text’s command menu BTW) you can open it. Thanks to fuzzy matching you can easily … Continue reading

Original Content , Leave a comment

Firefox DevTools’ Layout Panel Improvements for CSS Grid

Nice work by the Firefox DevTools Team: Available in Firefox Nightly (for now). Powerful New Additions to the CSS Grid Inspector in Firefox Nightly →

Elsewhere , , , 1 Comment

Debugging Node.js using the Chrome DevTools

With Chrome 57+, the Node.js debugging feature is enabled by default. To start debugging, run your Node.js application [using Node 6.4+] with the –inspect flag. Like so: $ node –inspect <your_file>.js Open the outputted URL or visit chrome://inspect/ to open … Continue reading

Elsewhere , , , Leave a comment

Using react-devtools with React Native

The “React Developer Tools” is a very handy browser extension which lets inspect and manipulate the React component hierarchy along with their props and state. There’s also a standalone version, to be used with React Native. To use it, install … Continue reading

Elsewhere , , Leave a comment