Tag Archives: devtools

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

Elsewhere , , , 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

Elsewhere , 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

Marky, a high-resolution JavaScript timer

Marky, by Nolan Lawson: JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations. For browsers that don’t support performance.mark(), it falls back to performance.now() or Date.now(). In Node, it uses process.hrtime(). The … Continue reading

Elsewhere , , , , Leave a comment

Beyond Console Debugging Tricks

Most developers out there know about console.log() and debugger;. console.table() might also be a known command, but most of the time it stops right after there. There are more methods and tricks one can use to debugging webapps. Beyond Console … Continue reading

Elsewhere , , , , Leave a comment

Chrome DevTools Tip: Blackboxing Scripts

The Chrome DevTools have this neat feature where you can “blackbox” JavaScript source files. Upon blackboxing a script the debugger will jump over anything contained in that file when stepping in/out/over code, and not pause on any breakpoints also contained … Continue reading

Elsewhere , , , Leave a comment