Debug Node.js in browser with real Chrome Developer Tools

We are spoiled these days with an Awesome node.js debugger that harnesses the full power of Google Chrome DevTools.

Take the following (extremely difficult to understand ;-)) app:

//app.jsconsole.log("Countdown")for(var i=5; i> 0; i--){console.log(i);}console.log("Blastoff!")

You can debug this easily in Chrome Developer tools!

node --inspect --debug-brk app.js

This prints:

Warning: This is an experimental feature and could change at any time.

To start debugging, open the following URL in Chrome:

chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/ef4b0d1d-8268-41bd-aae2-a8e80b47b4e9

Simply open the chrome-devtools:// link in your browser and you’re good to go!

You now have access to breakpoints, console, memory and the profiler! Whenever chrome makes an update to improve their tools, we get any updates for “free”!

Want to make this even simpler?

npm install -g inspect-processinspect --debug-brk app.js

inspect-process fires up the debugger automatically (through selenium, I think), and you can skip the step of copy pasting in the browser.

One bummer is that using the inspect-process method, breakpoints are not retained between sessions. Does anyone have a solution for that? Send me a tweet if you do!

Update 05/08/17: Adrian Wardell and @june07t (on twitter) both let me know that I should be using june07.com/nim. I haven’t tried it yet, but assuming it works.

Here’s a video of the process:

Like this tip? Check out my course on Mastering Chrome Developer tools. Use the link above for an 85% discount for my medium followers!