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 dedicated DevTools for Node to start debugging 🙂 Debugging Node.js with Google Chrome →
Tag Archives: devtools
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 it as a project dependency: npm install –save-dev react-devtools And then adjust the scripts section …
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 greatest win to me is the visualization in the Dev Tools timeline. After installing it …
Continue reading “Marky, a high-resolution JavaScript timer”
Beyond Console Debugging Tricks
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 in that file. A typical example would be to blackbox the script of the JS …
DevTools Timeline Viewer
Debugging Node with Chrome DevTools
Redux DevTools Chrome Extension
A Chrome DevTools Extension, wrapping around Redux DevTools: The Redux DevTools themselves are a live-editing time travel environment for Redux: Lets you inspect every state and action payload Lets you go back in time by “cancelling” actions If you change the reducer code, each “staged” action will be re-evaluated If the reducers throw, you will …
Chrome DevTools Custom Object Formatters
Here’s a little Chrome DevTools gem: it supports the use of custom Object formatters. Object what? Object formatters allow you to control how the value of a JavaScript object appears in Chrome’s console and debugger. Say you’d like to visualize a 2D vector, instead of seeing “just” { x: 1, y: 2} appear when pushing …