Node.js Debugging in Chrome DevTools

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:

1. I don’t want undefined there
2. It put a wave at the end too
3. 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.jsCode 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!