How to debug Node.js in Visual Studio Code

what is up YouTube in this video I'll be showing you how to set up vs code debugging for a simple JavaScript project often developers will use console logs when trying to track down bugs but often an interactive debugging environment can make this process much easier I didn't realize the power of an interactive debugging environment myself until I started working on c-sharp projects in Visual Studio which has really nice integration we'll start off by quickly walking through the project and then I'll show you two ways to configure vs code to run the project in a debuggable way so as you see here we have a vs code debugging repo and I'll share the link to this GitHub repo in the video description and in it we have three projects one is this JS project which is simple JavaScript project TS project is a pretty simple typescript project and strappy project is an open source headless CMS which I hope to do videos on how to debug these projects in the future but for now we're just focusing on this JS project so I'll go ahead and CD into that directory and you'll notice we have our package.js Json and our entry point we have two startup commands one is start and one is Dev Dev just has hot reload and they both start up the source index.js file so if I hop over here you'll see we have a pretty simple Express web API on Port 3000 we've got one base route which just returns hello world and then we have a function which sets up a few other endpoints which are returning this array of users and then the second one is returning a specific user from that array of users and then down at the bottom here we start up the express API on Port 3000 so that's quick intro to the project and I will show you I actually have a bug in this project so if I run npm start this project will start up and if I hop over into Chrome you'll see we can get our list of users we can get our hello world but if I try and get a specific user like user one we get a not found even though we have a user with the ID of one in here so what's the issue with our code one way that developers would traditionally do this or I should say JavaScript developers would traditionally do this in the browser might be to add a console.log and say request.params.id and if I save this restart the project this will log out this value that's coming in we can make sure we're getting that properly so if I remake this request you'll see we have a one if I change that we'll see we have a two so it's like we are getting this ID so why is there something wrong with here or is there something wrong with our ID that's coming in like it seems like we're getting our ID what's the issue here so I'll go ahead and remove this console log and let's start this up in a debuggable way so for the first example we're just going to create a new terminal that will allow us to run a command to start up the project then it will run the project in a debuggable way the second option is going to be to create a launch.json file which is a feature that vs code has that will make it easy for other developers to also quickly and easily replicate this debug environment so I'll show you the terminal way first and then we'll show you the launch.json file so if I click this JavaScript debug terminal you'll see in addition to my bash instance I also have a JavaScript debug terminal alternatively I could come here and create a JavaScript debug terminal so in here again I'll just CD into my Js project and I'll run npm start to start the app and hopefully it stopped yep cool so we won't have a conflict on Port 3000. and now you can see if I reload the browser now the project started it just spins and Spins and Spins because we have a break point in here so it's never reaching the sin never returning data until we forward through it now we get our response but let's actually see what the issue is so we come in here we can also add debugging breakpoints for their own in this code in this little Lambda function and I can press F5 or F10 or f11 to continue through so if I press F5 you'll see we get to this breakpoint and at this point We're looping through our array of users we're getting our users ID which is one and the ID of the user we're wanting to get back which is two if I go again you'll see now we have user.ids2 and request.prams.id is two and one thing you'll notice here is that U dot ID is actually a number it's not wrapped in quotes there request.prims.id is a string of two which because we're using the JavaScript triple equals which does not coerce this number two is not equal to string of two so that is where our bug is so I can stop this and there are a few different ways to fix this I could change it to a double equals I could convert these two strings or I could convert this to a string or convert this to a number I'll go ahead and convert this to a number because that's really what we want to do here so if I start this project back up you'll see our debugger attached and if I reload this page we got our breakpoint again and if I F5 oop I actually need to add that break point back there so if I reload this page and F5 now you'll see U dot ID is one and then here this number is well it's converting this to a number and if we forward through it move these break points you'll see now we get our user with the ID of 2 or 1 or 3 or whichever user we want to get so that's one way to set up this debug environment in vs code so I'll go ahead and close out of this the second way is to create a launch.json file the first way is nice to quickly run through it works but another way and I think this is more repeatable and especially it makes it a little bit easier for developers who aren't as familiar with vs code or aren't as familiar with npm if we click this create a launch.json file and then select the environment that we want to run in it will create this launch.json file and in this case you can see the program that it's starting is actually jsproject source users.js which is not what we want to start up so I could either change this to index.js or I can just completely delete this file and I can make sure that I have my entry file open so now you can see I have the index.js file previously I had users.js if I have this index.js open create launch.json profile select node now you can see it's starting up JS project Source index.js I've got some kind of intellisense error here or warning here I'll go ahead and change that to note I'm not sure if that's because of the version of vs code I currently have I did get a notification that I needed to update it recently so if I save that now you'll see in this run and debug tab I have this launch program option and I can actually change that to launch JS program save the file and it updates here immediately so now if I want to debug the project I can just go to run and debug select the launch configuration I want to use which in this case is the only one we have which is launch.js program select that and click play and again that will start up our project in debugging mode I can come back over here to let's say at a breakpoint here this time or add one here as well and you'll notice that we don't have an extra terminal open down here but if I come to run and debug I can view values here and I actually can go to the debug console which is where we can see output from this project that's running in debug mode now if I come back here again when it is spinning because we hit a break point hop back to vs code and we'll see this is the break point that we hit we can look through you know see the user that we got that had the idea of what we passed or we could look at the request object so we don't have to add a console log for each value that we want to look at and it also doesn't get lost in the sea of logs or you know we forget what line number we wrote the log on that kind of thing we can directly hop in here view values and walk through Thing by thing so again we're still stopped if I click play it will spit out our result and the same would go for the user's endpoint so we hit a break point request.s send users we can look at our list of users we can look at the request object that came in all that good stuff so I hope that was helpful for you now this will work best if you have a pretty simple JavaScript project where your entry file is directly in your code in the future I'll be making videos for a typescript project because there's some configuration that can go wrong when you're setting up a typescript project or I should say some configuration that is needed when you're setting up a typescript project because it does compile to JavaScript and that type of thing and then for the strappy project because this is an open source project which if we look at this package.json it's not just you know starting up an entry point file here when you run these commands it's calling an npm library that calls the develop command and it's a little bit more in depth to set up debugging for something like this but hopefully that helps you get set up with this JavaScript project once I have these videos created for strappy project and TS project I will link them down in the video description if you like this video and found it helpful please consider liking the video if you have any questions comments or concerns leave them down in the comment section below and if you would like to see more videos like it in the future please consider subscribing have a great day and I will see you in the next one

Channel: JayMartMedia

Views: 6,161

Keywords: nodejs, node.js, javascript, js, debugging, vscode, visual studio code, debugger

Id: 4UGyzRo8Dsk

Length: 9min 53sec (593 seconds)

Published: Tue Jan 31 2023