Digging Into Node.js

Debugging Node.js

Kyle Simpson

Kyle Simpson

You Don't Know JS
Digging Into Node.js

Check out a free preview of the full Digging Into Node.js course

The "Debugging Node.js" Lesson is part of the full, Digging Into Node.js course featured in this preview video. Here's what you'd learn in this lesson:

Kyle demonstrates how to use Chrome's developer tools to debug Node programs as an alternative to logging to the console.


Transcript from the "Debugging Node.js" Lesson

>> Kyle Simpson: I thought where we might stop or finish or come to a conclusion for this workshop would be to kind of come full circle back to the beginning. And I deliberately didn't start the workshop by talking about this topic because I wanted us to have had more experience with node.

But as you write more and more node, you're gonna more and more bugs, more and more problems. And you're gonna face the challenges of trying to debug in a command line environment. And you'll quickly see that it can get very difficult to debug. So I wanted to just end by showing you a quick example of how you can use The Chrome DevTools debugging remotely for your node process.

So here, we have our EX7 process that we were working on, in the previous exercise. And what I wanna do is basically insert a little bit of a bug into this program. That's gonna create and exception and I'm gonna run it with the DevTools, listening. And we'll see that when the exception is thrown it actually pops up that exception over in the Chrome DevTools and pauses our node process so that we can debug things.

So that's an example of how you can use more sophisticated debugging if you're a basic console log type of debugging is not working for you. So just kind of trying to come up with an example here. What I'm gonna do is basically set up a counter here. So I'm gonna say var x = 0, and each time we do this thing I'm gonna setup, I'm gonna increment it by ++.

And after I've spun up these child processes, what I'm gonna do is, right here, let me do it here.
>> Kyle Simpson: What I'm gonna do is, if x has gotten over a certain number, I'm just gonna throw an exception. And that way, just sort of artificially, we can see that thing happening.

So if x is greater than five, then let's call a function that doesn't exist like food, which will throw an exception. We'll see that in our debugger, okay. So the way that you do this is twofold. First of all you need to open up, and I'm using Chrome here.

I've opened up, you do chrome://inspect, and it automatically appends here to the devices. We don't see a remote target listed yet, but it is trying to listen on local host for a sort of, by convention, a specific port that it's going to listen for. By the way, this link here where it says Open dedicated DevTools for Node, I don't know what that is and I've never been able to get that to do anything useful.

So maybe that's like an experiment that they're thinking about. But we're not gonna use that one despite the fact that that looks like what we're using. It's gonna pop up a link for us to inspect once we start our process in a listening mode. So we'll come back to this screen in just a moment.

But I'm gonna go over here and I'm gonna start up that node, and I'm gonna put --inspect. That flag on the node process is gonna tell it to go ahead and expose itself, It's listening protocol on that specific port. And then Chrome DevTool, since it's listening on that port's immediately gonna pick up on it.

And start being able to inspect that. So I'm gonna click this and I'm gonna move over here and you'll notice that we now have an inspect. So we can now actually see in our Chrome Devtools what is happening and boom, there was our reference. There was our FOO reference there.

And we would have been able to, for example, tell it, let's go back and tell it to.
>> Kyle Simpson: I'm gonna close it and restart. And then we'll tell it to like pause on exception. Okay, hopefully 12 gives me a long enough time to make all of the settings so that we can see this happened, let's inspect.

Let's go to the sources tab. I've got Paul's on exception. And I've got the checkmark. So now, we should see here in just a few moments, it actually pause on our exception. [LAUGH]
>> Kyle Simpson: There we go. We have succeeded. We have an exception that it paused on in the middle of our node program.

And if we switch back over here you'll notice that it is literally paused to the node process. It didn't like crash it or something. It's literally paused the node process. And we can do stepping through it. We can do watch expressions, all of the things that we normally need to do in debugging.

But now we're actually debugging remotely a node process. So this is an incredibly powerful tool. I'll be honest with you that with the extra hoops that you have to jump through, of like starting it and then going and clicking to, because you can't really get a dedicated window for it.

Sometimes it can get a little bit annoying to deal with. There is a program called NDB which came out, which is basically a packaging of Chrome where when it opens, it's just the developer tools from Chrome. And they kind of animate some of this stuff a little bit better.

I wasn't able to get that installed on my system when I was preparing for this. But a lot of people swear by NDB is that it might be a little bit more successful of a route for you. But the few times that I've really needed to do some kind of deeper debugging or even memory profiling or something like that.

I've been able to use this remote debugging from Chrome and it's worked pretty well.
>> Kyle Simpson: Let's go ahead and let it finish itself.
>> Kyle Simpson: I guess it's gonna run into an exception and finish, and then it crashed the process.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now