Getting started with Node.js debugging in VS Code

hi everyone is Kenneth from BS code today I want to show you how you can debug your nodejs code using the buildin debugger the easiest way to get styled with debugging is to simply open your javascript file envious code like I've done here here I have indexed at Jas that contains a set interval that is outputting a console message every second so if I run this from the integrated terminal what you will see is that you'll just see a need a consult on lock mess is being outputted every second if I want to debug this what I then can do is that I can press the green debug icon up here vs code will then ask me what kind of environment it is in this case is no js' and what you now see is that our debugger is attached because V s code has automatic you've found your intercept j s and if i go to the debug console what you see is that my controller lock mazes is automatically being outputted in the console so if i set a breakpoint what you now then see is that my breakpoint will get hit and i have my variables pane out here i can see the local scopes i have my watch panel because i set a watch from a variable i and I have a call stack to basically figure out what's going on behind the scenes and I can continue this and for next iteration second after my program will be hit again so this is a super simple way that you can get started using the nodejs debugger in vs code the next thing I want to show you is how you can use the vias code debugger in combination with your favorite terminal so what I have here is a simple node.js shopping-cart project straight from github it's a node app that is powered by Express using a bit of express session and using handlebars for rendering so sort of straightforward kind of server-side render tap and so what I've done here is that I've checked out the repository so it's locally on my computer if I do it LS you can see it's kind of here so the first thing I want to do is that I wanna start and open this repository inside code so I now have Visual Studio code open and there's two readme so let's take a look around there seems to be this app j/s that is creating an Express instance and setting up the dip server there's this routes index ojs file where all my route for the various pages this seems to be like an ancient place to debug so the next thing I want you to do here is to configure the nodejs debugger in envious code the way you do it is that you go to the the debugger section over here and then in the top here you can see there's no configuration right now so if you say at configuration what you then getting asked here is at what kind of environment do you want to setup in our case we want to setup in node.js environment then the next thing is that you have to pick like a configuration template so this is our templates and how you can configure our nodejs debugger what I want to do here is to use attach to process template and let me let me explain what actually means so I have a new file called monster Jason this launched a JSON file is the configuration file that you save inside your repository that basically tells vias code how how to configure its debuggers so what I have with this first configuration here is that first of all you can see it's copy it has the request type called attach that is basically a way for us to take our debugger and attach it to something and and you can see that the process ID is calling a command culprit process so this this basic allows us to check our nodejs debugger and enumerate the node.js processes and allows you to pick the new process and then connect the debugger to it so if I save this file you'll see that I get like new two configurations or peein what I'm interested in is basic attached by process ID so I'm using the integrated terminal here so what I'm going to do for this project is that I'm going to do an NPM start this is going to start my local node server and if I switch to my browser I already know that it's running on port 3000 and what we can see here is that my node app is it's now running with this shopping cart like them and some apples to the card and they get added up here if I go back to vs code the interim thing I can now do because I want to debug this thing is that I can select the attach by process ID configuration we just did and I can press the green button what you now see is a quick pick list that is enumerated all the the note processes running on my computer and this is a processor I started from the terminal so I select it and what you last see is that our debugger is now attached I got this debug tool bar up in the top way I can restart I can stop debugging and pause and doing a lot of things and so the next thing for me now that our debugger is attached is to actually set a breakpoint if I go back to our routes file I can see maybe I want to set a breakpoint when he didn't hitting the root path so if I set a breakpoint here you can now see the breakpoint is activated and if I go back in chrome and i refresh the page BAM we automatically switch to vias code and I've hit my breakpoint so I can kind of see like the Woodcrest object coming in I can see kind of the response object I can see the next callback and if I want to step over this render function you can kind of see that now products has been populated so I have a list of the products if I want to have more detailed information I can basically go to the debug section here and what you see is that I have a variables window that's basically telling me the local variables that available this scope I have from the closure and I have all global global variables the next thing I can do out here is that I can set up watch if I something specifically on a watch so maybe in this case I wanna output products and see products is an array of four objects I also had the call stack so I can kind of see what has gone on inside expression other parts of of my application down here have a list of my breakpoints so I have a list of the breakpoints I've set and also have a way to like I see the loaded scripts but that's kind of not relevant now and simply I've hit my breakpoint things to scoot there's new products now kind of know what that is and I can hit the green button here and you see my page page is loaded so so really this is just a simple way that you can configure the node to jas debug and vs code to connect to any new processors running on your system I started my new process here from the integrated terminal it could have been in my external terminal it could have been by a grunt script or whatever and you don't need to use vs codes to house system anything like that to attach to to already running no processes the last thing I want to show you is how you can use vias Co to launch a note process to make things even simpler so I'm back here to my node.js shopping cart project but if I go back to the launch to JSON file that we were creating before you'll notice that I actually have another debug configuration called launch pogram that's because vs code has automatically generated this config by extracting your NPM start script and what you'll see is that the request type of this configuration is now launched that I've attached and what this launch configuration will do is able it will launch your note and attach our debugger so it's kind of a combination of what I've been showing before so let me show you how that works - right go to the debugging section I can say launch program and what you'll see down here is that my node process being launched and the debug is attached and that way I can super easily just press the debug button from vs code launch my program and start using the debug so if you want to know more or just get started you can grab the source code from this repository and if you want to read more about the features in our nodejs debugger you can check our great documentation we have uncoated Visual Studio com that's it happy coding

Channel: Visual Studio Code

Views: 471,554

Keywords: vscode, javascript, debugging, nodejs

Id: 2oFKNL7vYV8

Length: 8min 4sec (484 seconds)

Published: Wed Feb 14 2018