Debugging Node.js with Chrome DevTools
Support for Node.js debuggability landed in Node.js master in May 2016. You can see it in action in the DevTools 2016 Google I/O talk.
Here’s how to get up and running. (Post updated Sept 2017)
- Download and install the current version of node. (v6.3.0+ required)
2. Run node with the
▸ node --inspect index.js
You can also break on the first statement of the script with
▸ node --inspect --debug-brk index.js
(In node v7+, you can use
--inspect-brk for this inspect & pseudo-breakpoint combo.)
Next, you used to open the big
chrome-devtools:// URL it spits out, but don’t. Now there’s a better way…
about:inspect in Chrome
It’ll redirect you to
chrome://inspect quickly and you’ll see something like:
4. Click the Open dedicated DevTools for Node link.
You’ll get a popup window for debugging your node session.
But better than that, when you kill and restart node, the window will automatically reconnect to it. 🔁🔁💥
(Btw: the inspect link beneath the specific target will only apply for that session of node and won’t reconnect.)
In DevTools, now connected to Node, you’ll have all the Chrome DevTools features you’re used to:
- Complete breakpoint debugging, stepping w/ blackboxing
- Source maps for transpiled code
- Console evaluation with ES6 feature/object support and custom object formatting
- Heap snapshot inspection, heap allocation timeline, allocation profiling
- Asynchronous stacks for native promises
To see this in action, here’s my demo during the 2017 Node Summit:
Lastly, there is now official documentation on debugging Node with the new protocol: https://nodejs.org/en/docs/inspector/
I’ve been pretty happy the Node.js V8 — inspector Manager (NiM) chrome extension (not affiliated with Chrome DevTools), which adds some nice UX sugar on top. It will poll regularly to see if there’s a new inspectable node to connect to. If it finds one, it’ll automatically launch a DevTools window that’s connected to it. Handy.