I was pairing with my co-worker last week. They had a super different debugging style than I do. I’m aware that I can do fancy things in DevTools, like set breakpoints and whatnot right from within DevTools and use well-placed debugger;
statements to halt JavaScript execution and inspect things at that point.
But I hardly ever do any of that.
I’m quite sure I don’t even know all the cool tricks. I’m a console.log()
type. I just absolutely litter the code in them until I learn what I need to learn. It’s a little amateur-ish, I admit. I’ve made it this far, but there’s no time like now to level up.
I especially don’t know any tricks with Node.js debugging. To begin with, I didn’t even know you could use Chrome DevTools with Node.js. It sort of makes sense since Node.js uses v8 just like Chrome does, but it never clicked with me to use a browser tool for server code. It’s not a new thing! Paul Irish was telling people how to do this in 2016.
The kind of debugging my co-worker and I were doing was complex enough that having DevTools to help us really worked. I think I’m a believer. For this article though, I’m going to show you how to do it with a simple example. You probably wouldn’t need DevTools for this, but the point is learning how to do it.
1) Have Chrome Open
Then go to chrome://inspect/
. The first tab, Devices, has the link you’re looking for.
These settings work for me, but if you run Node at some specific port or local URL, you should add it here.
2) Have Node Code
Kinda goes without saying, but you’re going to need to execute some Node code, likely from your terminal, in order for there to be anything to expect. Might be an npm script or something. Let’s just assume we have a file called app.js
and we’re going to run it directly like node app.js
.
3) Have a Problem
My goal with this code was to have…
Hello World
… turn into:
Hello 👋 World!!!
That is, put a wave emoji between each word. But the output I was getting was:
undefinedHello 👏 World 👏 !!!
.
That’s a problem because:
- I don’t want
undefined
there - It put a wave at the end too
- There is a space before the “!!!”.
We must fix this super contrived example!
4) Execute the Node Code with an Inspection Flag
Like this:
node --inspect-brk app.js
Code language: Bash (bash)
That --inspect-brk
flag is the real magic here.
When I do that, the terminal output will tell me where Node is running and that the Debugger is attached:
It will automatically pause before it starts executing.
5) Go through the Code
These buttons are of particular interest:
If you press “Play” here (that first blue one), the code will just run and be done without much a chance to inspect anything.
You could use the next button, the dot with a little curved arrow up and over it, to start “stepping” through the code. But Node is complicated, and you’ll soon find yourself in the bowels of Node doing god-knows-what.
The trick is to put a debugger;
statement in the code where you start caring about stuff. So…
Now when I run again, I can hit the blue Play button and hop to this exact point the first time it gets there. Now I can start “stepping” through the code to see values. As I step through, I can see the values of relevant variables as I go.
Here I learned that when I declared the variable and then appended a string to it, I got that undesirable result. Lemme start with a blank string instead.
We also essentially want to skip the last iteration of the loop. So instead we’ll use an old school for
loop and run it over the length of all the words minus one. Then plop the last word (and !!!) at the end separately.
5) Restart Things Anytime
As I change my code, I can always Control-C
out of the Node process and run it again, and DevTools (thank god) will automatically re-attach.
Here I can start over and step through the code, seeing my changes yield the correct output.
The other debugger buttons (like the down arrow and up arrow) allow you to step through code quicker by fast forwarding to the next function call or finishing the function you’re currently in.
This just feels like a more grown-up way to debug code when things get complicated. Especially for apps where you are jumping between lots of files, you can see all that happening in the DevTools file explorer on the left.
Good luck out there!
Great tip for debugging node. Thanks, Chris!
I’m sure you already know this, but just for my own sense of closure, here is another way to get the function to do what you want:
I’m afraid that’s far too simple and elegant Karl, I needed more lines of code.
https://www.youtube.com/watch?v=VRTWePKePeg
above video is inspired from this article
Great blog on Node.js debugging in Chrome DevTools! The step-by-step guide makes it easy to follow and understand. Thanks for sharing these valuable tips and tricks for efficient debugging!
You really should try nim.june07.com and update the article to include it. The author of NiM was doing it pre-Paul Irish in fact it was likely the origin of the V8 workflow streamline. NiM is a wrapper for not just DevTools and Node.js but also Deno and attempting to be the same for Bun https://github.com/oven-sh/bun/pull/13219 as well!