How to use the Debugger in VSCode to debug Node.js Applications

so one of my previous videos i talked a little bit more about how you can potentially use console logs to debug your node.js applications so i showed you like a little example application that is reading from a file and counting up the number of characters in that file and i showed you how you can basically put a bunch of console logs to figure out where in that code there was an unresolved promise and this is actually something that happens a lot in code right you'll be dealing with promises async await and maybe you forgot to resolve one of your promises or there's some type of execution that's kind of stuck in an infinite loop if you're doing a for loop or a while loop so this is a good like use case and it's good to understand how to debug that but someone on my discord by the way if you're not part of my discord be sure to go to the description and join my discord if you want to kind of talk directly to me and ask me questions but someone asked me why i couldn't just use the debugger in that case and that was a valid question because in most instances you could use a debugger for everything and as a beginner i would highly recommend that you learn how to use the debugger well because it helps you understand the flow of code and how things are being changed in your variables but as someone who's more experienced i don't need to know how the code flows all i really need to know is like where exactly is that bug happening in 80 or 90 of the time i can do a good estimated guess of where that code is so i really just need to throw a couple of console logs maybe one or two or three to really figure out where stuff is failing but in some cases and this video is going to cover that we want to use the debugger and i want to show you a quick overview of how you can use the debugger to find the same unresolved promise bug that we kind of showed in the last video but before i dive into showing you how to use the debugger be sure to click that like button because it helps my channel grow also be sure to click the subscribe and bell icon if you want to get more videos like this in the future that should hopefully help you become a better web developer or software engineer so let's just go ahead and dive over to the code and i want to show you how you can potentially use your debugger to debug node.js applications so like in the previous video we have a file here and this file is basically going to read in two arguments so it takes in a character and it also takes in a file and basically what this does is it reads in the file using the file system module node and it counts all of the instances of that character here and gives you back how many have found okay so it's a pretty straightforward program and if you can't build this by yourself i recommend that you actually try to build this yourself without looking at my code but let's just try to figure out what's going on here all right so let's first just kind of show you the application in what it's going to do when i try to run it so right now i did add in a infinite loop into the code to make it so it kind of simulates it not resolving a promise for some reason if you try to just make a promise and not resolve it node it just like continues on i don't know if node maybe has some type of like optimization that happens that doesn't actually force promises to get stuck if you don't call the resolve function but let's just go ahead and run this notice here if you run this the application is just stuck it's not doing anything we need to figure out why it's not progressing so this is again something that you might run into a lot in a production system because we deal with async weights a lot we deal with promises and we deal with waiting for those promises to resolve and if you forget to call your resolve method then your application is just going to lock up like this so what i'm going to show you is how to actually debug this using the debugger instead of console logs because sometimes using the debugger can actually help you out so in vs code one way you can do it is go to the left over here and click on this debugger and go ahead and click create a launch.json file the reason we have to create this is because this program requires two arguments right so i'm gonna go ahead and click create a launch.json and i'm gonna click node and over here i believe there is a place that you can add in arguments i think it's just like right here i could say like args and then i believe that takes an array of values i could be wrong i need to kind of refresh my memory but i'm going to pass an a and my pass passing file.txt so that's going to be very similar to how we ran it in the command line but now we're telling vs code these are the arguments you need to pass in all right so if i go ahead and just click launch program you'll notice that it doesn't really do anything it's kind of just stuck and the reason again is because we have that unresolved promise so let me show you how you can use the debugger to try to figure this out so what you can do is you can put a breakpoint on any of these statements and then we can slowly dive into the code to figure out what's going on so i'm just going to start with the first line here and put a break but sometimes it's useful to also put breaks inside of functions that you think might be causing the issues i'm just going to go ahead and put one right inside this main function and let's just go ahead and stop this and go ahead and rerun it like so and i know my head's blocking some of this stuff but really the most important thing about this process is the step functions at the top so at the top here you can actually continue your program which is gonna say just run it like normally until it hits another break point you can say step over every line one by one which is probably what we want you can also step into function calls if you want to so those are like the main ones you can use and then also step out allows you to kind of get out of the call stack and go back up a level so let's just go ahead and keep clicking step over and you'll see our debugger kind of walk through every line one by one and this is a little tedious i mean you can kind of do this and it really helps you understand what's going on behind the scenes but again we're trying to figure out where does this program just lock up where does it stop running so what i could do is just keep on clicking next until we get inside that main function and i should be able to just click next and then click next and notice at this point the application just seems to stop right so i think we found where the issue is which happens to be this count characters method so what you can do now is you found the issue and the next step is how do you actually fix the issue why is it crashing or why is it failing so i'm going to go ahead and stop these debuggers here and i'm going to put a debugger right on this line right here and click on this restart so by clicking the restart and removing those debugger lines it's going to take us back to the exact same line but it's not going to actually call that function call yet so again the debugger is really useful if you need to kind of get that line by line feedback of what's going on in your program as you get more experience you just need a couple of console logs to figure out what's going on probably but let's go ahead and dive into the function so there is a method here like this arrow that's pointing down that means dive into the function and that's going to take us directly to that count characters function you can see here we have a function that's returning a new promise and it has a resolve and reject and a callback and you can see here there's a while true loop obviously this is just put in here to kind of show the issue but you can imagine if you actually have real logic and the logic is not properly coded it might just become an infinite loop right so we are going to do is basically just put some more debugger statements in here just to make sure that we can find where the issue is and we are just going to go ahead and click on step into as well and that should take us into that function and notice that the while true is actually just stuck now so again we found the issue it's this while true loop but you can do more investigation if you have a more complex code base so what i would do here is just go ahead and stop the program because it's kind of stuck and just go ahead and comment out this line and make sure that we can kind of get to that next line if we just remove that okay so go ahead and click this run button that will take us to the next break point and go ahead and click this step out that should kind of take us back up to the main program here and we get to this console log here and you can see that count is set to three now so everything is working fine and if we go ahead and click step over that should print out a console log to the debugger terminal which for some reason i have lost it i don't know where it went so i had to go up here and click debug console to make sure it shows up down at the bottom so now notice that it prints out we found three in the file and that is kind of how you can kind of debug your code using the debugger again this is like a really simple example and a quick overview but this is one of the most powerful tools you can use when you're beginner because it's really hard to keep all this stuff in your head right you have a lot of variables a lot of functions there's a lot of call stack going on there's a lot of code flow that going on that you might not fully understand and if you can step through your process line by line and understand what's going on it'll be really beneficial to you so i want to touch on like a couple more points that i didn't really mention and that is if i go ahead and just rerun this program i want to show you some of the things on the left because these are really important to understand and i don't want to end this video without kind of sharing a little bit about those i can kind of go into a more in-depth debugger video if that would help you all let me know in a comment below but i want to show you on the left you have this local stuff so this kind of declares all your local and global variables and when you're running node off the bat you're given like a bunch of different global methods you can do like set timeout clear timeout but usually what you're interested in looking at is your local variables and if you step through your program you'll notice that as you step through your variables change over here so notice care changed to an a if i look at file which is here right now it's undefined but if i step over again you'll notice that file actually becomes file.txt so this is super useful to kind of step through and understand how your things are getting set up and another really important thing to understand is how do you set up watches so watches if you double click on the variable here and right click on it and i can go down here i believe there is an ad watch so down here there's an ad to watch let's just go ahead and add that variable to watch and right now it's not defined because we haven't gotten to that code but if i go ahead and click the run button at some point the execution is going to get past that statement and now we can actually see that variable change so the watch thing is really useful if you just want to like keep track of a very specific amount of variables and i believe you can also just right click on some of these variables here and add them to watch as well so right click on count you can add to watch if you want to go ahead and click next and notice that the count should get changed at some point let me just go ahead and step out and step out so the count is set to three and i can kind of keep track of what's going on so those are really important aspects of using the debugger there's also a call stack thing if you wanted to kind of get into that um that's a little bit more advanced but it kind of tells you like what function you're currently in and i can just show you that real quick if i were to go back into this count characters and add a breakpoint here i'm going to stop and i'm going to rerun this program again the call stack is is a little bit more advanced but it's kind of good to understand like what it's doing so let's just go ahead and run the program and run it one more time and the program is going to stop right here at this resolve statement but notice that in your call stack you can kind of dive in to understand like what is going on so right now this is the current line that we're on it's an anonymous function but you can kind of go back up the stack and figure out how do we get to this function right so this anonymous function was caused called by this count characters function the count characters function was invoked by a main function on this line and then this main function was invoked on by an anonymous function on this line right so you can kind of go up and down the stack and kind of view how the variables might be changing in that stack so really useful to kind of you know play around with understand what the purpose of these things are and how very powerful they can help you debug but honestly like i said when you become more advanced you don't use the debugger that often you know you just need to throw a couple of console logs maybe you know exactly what object you need to log out to see what property might be undefined or defined improperly and that's about it add a cons log restart your server test it you get your information it's a lot quicker feedback loop than using the debugger but i do use this a couple times when i'm trying to debug really esoteric issues so if you enjoy using the debugger more than console logs leave a comment below let the world know also be sure to give my video a like if you enjoyed watching this content because it helps my channel grow and like always if you're new to this channel and you're new to programming be sure to subscribe and press that bell icon if you want more videos like this in the future should hopefully help you become a better web developer have a good day and happy coding

Channel: Web Dev Cody

Views: 24,952

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: qz68RsESlp8

Length: 11min 40sec (700 seconds)

Published: Sun Feb 20 2022