Introduction to Node.js, v2 Debugging

Transcript from the "Debugging" Lesson

[00:00:00]
>> We just finished talking about testing, unit testing and node.js with jest and how amazing of a tool that is and just how easy it could be to write tests. And also just to emphasize how important it can be to write tests. So write your tests and use just.

[00:00:16] What I wanna get to now is, I wanna talk about two things I think are important to really leave you with. One of them is going to be debugging, and other one's going to be deployment. So, I want to tackle debugging first because I wasn't sure what order I wanted to do this, but, I want to do debugging first.

[00:00:34] Because, it's really important. I think it's really powerful and now so if we actually go over to the site. I didn't put any information about debugging because as I started digging about it, would have just been a bunch of screenshots of how to do the debugging, which there's already other.

[00:00:50] So many great resources on how to debug and chrome and stuff. So I was like, all right. I'm about to just compete with Chrome's debugging documentation. So I'm going to show you how to debug or at least, how I do it, and how other people do it and how they recommend it.

[00:01:04] So the first one obviously, is to just use console.log. Whenever you log to the console and node, you see an output in the terminal. You can do that and that's going to get you far as bad as far as console logging in the browser. It's, great for figuring out common things.

[00:01:20] But for like really big bugs I do recommend using the amazing dev tools, debugger that's built into like Chrome. It's an amazing tool and you should be taking advantage of it. And although NOJS is not in Chrome, because it uses the VA, it can be actually inspected into the Chrome debugger.

[00:01:42] Which is really powerful. Also VS code, took it upon themselves to have the same debugging experience in the editor built in because VS code is built with some type of cross platform code that has some similarities and everything. It's basically built with node right so it has it.

[00:02:00] So I'm going to walk you through how to do it in VS code. And then we're gonna see how to do it with Google Chrome and how we can attach it. So let's pick something that we want to debug. And I picked the Reddit COI, or no, what I'm gonna pick.

[00:02:16] First of all, we're writing files. Here we go. I'm gonna pick this one. So the one we were writing files with mjs. Let's try to debug this. So what we could do here is if you're in VS code, and if you're not, don't worry, we'll get to the Chrome non VS code when in a minute.

[00:02:33] If you hover over a line, you'll kind of see like a dot that goes next to it. This is for debugging. Yeah. So we'll set a breakpoint right here to just basically stop right here. And then all we got to do is if you go over to this play debug thing or hit Command, shift D.

[00:02:48] You should have the opposite as run and debug. So I'm gonna click that. I'm going to launch this in node JS. I'm gonna click that. And then boom, you can see that the code actually stops right here. I get these controls up top that's very similar to the Chrome tool.

[00:03:08] So I can continue on to execution, I can step over a line of code, I can step into a function to see, what's happening inside of this function. I can step out of a function to zoom back out. And I can restart this whole execution from scratch and then I can just say stop.

[00:03:25] So we get all access to that and then obviously, over here we can look at the call stack. So if I get this up a little bit, let me drop that down. So we can look at the call stack of what's being called so far. You can see here's our file and a bunch of internal stuff because we haven't really done anything other than importing a module so far.

[00:03:45] And then you get to see a bunch of whatever is injected into this file, so you can see a bunch of stuff here, this actual read file function. So it's pretty helpful. You can come in here and let's see. Do you wanna like click on watch, you can watch the expressions if I wanted to watch results.

[00:04:05] I say I wanna watch that to see what it is right now it's nothing because we paused it right before it executed. But this next line, it might be something so let's hit Play. And I guess I got to run a debugger again because it didn't catch that one.

[00:04:19] So, let's try that again. Okay, I guess it just doesn't like the fact that's easy. I would expect that to stop right there, but I guess it doesn't want to wait just try to step over okay, that didn't work, or go back, okay. I don't know what's going on with that, that async thing.

[00:04:40] I would expect it to stop here so I can see this but wait, let's try this. Let's see. It doesn't want to. So this is why I use console.log a lot because it's like, okay, when this wants to work, it works. But as you see, it's pretty powerful if you needed to check some really detailed intricate bug that you can't find it's, I mean, it was literally just two clicks, I had to click here.

[00:05:07] And let's just stop this right click, and then I had to click here and then no so three clicks, not so bad. Two clicks if you use the keyboard shortcut. Super powerful. So what's actually happening is VS code is tapping into a feature that node JS has which is called inspect.

[00:05:26] So if I go into node JS, here back out, and I want to inspect the intro. So I can say node and I'm going to run the index.js so intro index.ngs, but not before I run-- inspect-brk which is for break. So this is going to run in specter like we just saw, and then break immediately as soon as it opens otherwise it'll just like run through it and execute and be done.

[00:05:56] So we want to stop immediately. So we're on break. So run that. You can see we get debugger listening on this go here for help. That's really cool. So I'm gonna open up Google Chrome. Click on my face, and then we're gonna go to like Chrome inspect there it is.

[00:06:17] So, we're going to Chrome inspect, and you should see that you have a target here for that file that we're inspecting. So you can see it's node version 147o, and I can click inspect, and it just opens up the debugger here inside of Chrome, same experience. You may or may not see files here.

[00:06:37] If you don't see any files. Here, you can click Add folder to workspace. And then you can go look up the folder that's supposed to be here and you can just click Select and it'll add it. I already did it which is why mine is here. You can see the intro folder is highlighted and you can see that the green file is right here cuz that's what's paused.

[00:06:51] And here we are, we're right here. I can do the same thing. I can set break points. I can do all the same stuff that we always did. And I could execute this and continue to go on. So as you see, I get an error because we left this code off in a broken state.

[00:07:08] So that's why the error is looking for an HTM file, not HTML. So that's expected, but as you can see, the debugging experience can be pretty cool. A lot of people don't really reach for this tool and I really think they should. It's getting better every day especially since when I started using it seven years ago, it's so much better now.

[00:07:26] So I highly recommend using the debugger and saving accounts without logs for emergencies. Use a debugger to really flex on people. So, [LAUGH] use the debugger. Any questions about debugging and note before we move on to deployment and publishing.