Introduction to Node.js Debugging Node

Transcript from the "Debugging Node" Lesson

[00:00:02]
>> Scott Moss: Now we're gonna talk about debugging, so this would help us with all these exercises, we do know how to debug, right? I know that's why it's last, [LAUGH] debugging, it's very much just like Chrome. If you've ever debugged in Chrome it's very much the same thing, there's just some stuff you have to do.

[00:00:21] You know I've been thinking how, I don't understand, it is. Basically there's a couple levels to it, there's level 1 and that's use console.log to log your way through fixing your app. And it in production records your logs, so that means log it to some file, send some logging service that does analysis on your logs.

[00:00:42] And you can set up different prefixes and monitors that say, if this log contains this thing, text this person. Like, whatever you gotta do, definitely you gotta do that in production, there's almost no way around that. Because your app's gonna be running in some environment at some given time when you're asleep.

[00:00:58] So you need to know what happened so have to keep a record of that, and that's what logs do, they keep a record of what's happening in your app. Very much the same way analytics keep the records of what your users are doing, logs are like analytics for your app, they tell you what has been happening in your app.

[00:01:12] So it's really cool, you know about what request came in, who made the request, why did it fail, you wanna see the stack trace, all that stuff. So there is tons of different tools for that. Yeah, there is just a plethora of platforms that will help you manage those logs and error messages and stuff like that.

[00:01:28] So, for production you almost have to have one of those. I don't know how you can have a node.js production today and not have some type of service that helps you with logs and error management, stuff like that. So, that's like level 1, locally, you would have used console.log and just log everything out and see what happens.

[00:01:43] So, that's like I just wanna check this out, I kinda know what's going on here but like why is this not working, let me log it out, so that's like one thing. Level 2 is you would use the node inspector when starting your app and debug just like you would any browser and app in Chrome.

[00:02:00] So in Chrome I could just open this up and I could set a debugger pretty much,
>> Scott Moss: This is not my JavaScript but this is my JavaScript, I could come in here and set a debugger somewhere and, hold on let me go to,
>> Scott Moss: Yeah, so if this was my code, I can come in here and set some debuggers and stuff and kinda just go through with a debugger myself.

[00:02:33] That's really helpful to deal with node too and you can with the inspector, that's its job. So how does that work? Well, basically all you have to do is, this is why Node is really great, because before it didn't have this. Somebody had to create this, and it was third party.

[00:02:51] I can never get it to work, literally never use it, and now it's like shipped with Node, I was like wow this is actually pretty dope, I can use it now. So basically all you have to do is use the same command node but you just do --inspect.

[00:03:03] And a flag like that, you'll get this, you'll get something that says debugger listening on ws, anyone know what ws is?
>> Speaker 2: websocket.
>> Scott Moss: websocket, yeah, so it's like a websocket, cuz it's like feeding it real time. So debugger listing on web socket this this this, for help go check this out, and then you get a message for our server.

[00:03:20] So once you get that, you can go to Chrome and then, you can type in chrome,
>> Scott Moss: chrome://inspect, like this, and you'll see right here, it says Target. And you can see my version of Node, and then literally the filename, and everything, there it is, it's right there.

[00:03:41] Ready for me to inspect it. So if i click on Inspect, it pops this open and now I can inspect my application, I can do all types of things. Here's the source code, you can see here's the global module stuff that Node injected, it's right here. Put it all in there for us, this is literally my code right here running our server.

[00:04:00] So I can use this to inspect things, I can set up break points, I could do all types of stuff. So let me put a break point,
>> Scott Moss: Here, I'll put a break point here. I'll go to the document, and I'll try to get a 404 here, and boom, it stopped, break point, right?

[00:04:19] So now I could come in and I could start Inspecting things and figuring out what's happening, why is this not working. So you can see that this is super helpful, great for debugging stuff with the help of all the tools of Chrome. So this was not that easy to do a couple years ago, like ridiculously hard to do, at least for me.

[00:04:38] But now it's just one flag away, and you just go to chrome and you can work with it. So this is definitely the approach, you just lost, you don't know what's going on, use this. And also that ties into using the debugger statement in JavaScript, right? So if you put a debugger statement somewhere that's gonna tell the debugger to stop right here.

[00:04:56] It's like doing a stop just like I did but writing it in code. Everybody good with that one?
>> Speaker 3: When was that added?
>> Scott Moss: I want to say it was added to either Node, 8 maybe even 9, this is pretty recent. Yeah, because I don't remember having it before that.

[00:05:14] Cuz I've literally remembered this year just like, not being able to do that until just like also that could I was like, okay, that's nice. So it's relatively new, there used to be something called node inspector. That you would have to install, but that never worked for me.

[00:05:30] Never, ever, ever, ever worked for me, so could never get it to work, and it was updated in January. So yeah, definitely don't recommend doing that.
>> Scott Moss: Okay, where did my slides go? There it is.
>> Scott Moss: Okay, so that's level 2. And then, level 3 is text editor integration that offers the most seamless experience.

[00:05:55] So if you do something in VS Code, I think the setup is really easy, I just never set it up, because I'm more of a console.log everything. I literally just console.log everything, cuz I kinda know what's going on in my app. And I'm like, it's just this one thing, I just need to see it, so I almost don't ever use the debugger.

[00:06:11] Only time I've ever used the debugger is when it's somebody else's code. When I'm just like, I have no idea what's going on in your code, so I'm gonna debug this thing, but that's it. But yeah, text editor integration's pretty legit. It basically turns your code that you have right in your text editor.

[00:06:25] And you can set like break points and stuff in here, like this. See, I can put like a break point like here, and like here, and here, so VS Code is really good at it. And they actually have a tab right here that like can help you set it all up.

[00:06:37] And you can see it all ready registered my break points, so it'll connect to the inspector and stuff for you. It'll do all that stuff, and you just hit play, and it will just do everything. So if you really want the most seamless integration I highly recommend doing a text editor integration.

[00:06:52] I'm sure some, like WebStorm have something that's just as good. If anybody is gonna have it's gonna be WebStorm, Adam might have something, I haven't used Adam in a long time. Sublime, probably not, but VS Code is really good. But yeah, those are the three paths to debugging the different levels.

[00:07:10] So start with the console.logs locally, make sure you have a server that captures them remotely. Level 2, if things are getting crazy, if it's not your code, if you're not familiar with it, use that inspector, get in there in the nitty-gritty. If you're sick of leaving your text editor and you just want to stay there, then integrate with your text editor.

[00:07:26] And those are gonna be your options.