Debugging Node Code in VS Code

Celý článek

Visual Studio Code has an amazing amount of functionality built in, including support for debugging applications. Although the functionality is there, it took me several tries to figure out how to get things configured to debug Node applications. It became even more tricky when using Nodemon, so I figured it was worth it to share the various configurations I've learned. This article will not dive deep into inspecting variables, call stack, etc. but will focus more on the actual configurations. If you are looking for an article more focused on applied debuggging concepts, check out Debugging JavaScript in Chrome and Visual Studio Code.

Watch on YouTube

TLDR - Debugging Node in Visual Studio Code

• Download Debugger for Chrome extension
• Create Debug configuration from one of the 4 below
• Launch Debug configuration
• Set breakpoints, inspect variables, etc.

Setup

For this article, I'm giong to be debugging an application called 'Quick Chat'.

While it is not required for you to run the same application, you can easily follow this video series to build the application yourself or clone the source code if you choose.

After choosing an application to Debug, you will need to install the 'Debugger for Chrome' extension.

With that taken care of let's create a breakpoint in our app. The Quick Chat application is a simple Node/Express app that uses Socket.io to allow users to chat with each other in real time. Therefore, I decided to add a breakpoint where a client connects to our server. As you can see in the screenshot below, I've created a breakpoint (the red circle) just inside the function that gets called each time a user gets connected. For reference, to create a breakpoint in VS Code, click in the gutter, or empty space, to the left of the line numbers. Regardless of what application you are debugging, set a breakpoint that can be triggered easily (ex. when the application loads, a route is triggered, etc.).

To create a breakpoint in VS Code, click in the gutter, or empty space, to the left of the line numbers

VS Code Debugging Panel

To open the Debug panel, click on the bug looking icon on the sidebar (on the left side by default). I won't dive too deep into this, but notice quickly that there are four different sections: variables, watch, call stack, and breakpoints.

Again, for more background into what these sections mean, check out [Debugging JavaScript in Chrome and Visual Studio Code]().

At the top of the panel you will see a green play button and a dropdown that says 'No Configurations' if you have yet to create a debug configuration. If you have already created a configuation, you'll see it listed there. The great thing about creating these debug configurations is that VS Code is happy to help.

VS Code stores debug configurations in a file called launch.json inside of a folder .vscode. VS Code helps us not only create that folder and file, but also helps to generate predefined configurations as well. Let's take a look at creating our first one.

To create your initial launch.json file, click the 'No Configurations' dropdown and choose 'Add Configuration'. From here, ignore the popup and we will get started creating our first configuration.

Key Components of a Debug Configuration

• name - the name of the configuration as displayed in the configurations dropdown
• request - the type of action that you want to take
• type (Node, Chrome, PHP, etc.)

As you create different configurations, VS Code will also provide intellisense for other properties that can be defined.

Debug Configuration 1 (Launch Node Program)

This first configuration will launch our Node application for us in debug mode. Running in debug mode means that VS Code will be able to connect to our app over a specific port for debugging. For this configuration, we mainly need to define the program file that will be run. The configuration looks like this.

To run this configuration, choose it from the configurations dropdown list, and click the green play/run button. You're debug action bar will pop up in the top right with step, continue, restart, and stop buttons.

One thing you might have noticed is the warning I've got in my debug console. It mentioned that node --debug has been deprecated. Honestly, I'm not sure if this is VS Code's fault or the version of Node that I have. Either way, there's one thing to remember. To start a Node application in debug mode going forward, use the --inspect flag.

To start a Node application in debug mode going forward, use the --inspect flag.

Debug Configuration 2 (Attach by Process ID)

The second configuration, we'll look at is attaching to a Node process by id. For this, we will need to start our Node server ourselves before running the debug configuration. Use the following command to start your server (using --inspect as mentioned above) and replace app.js with the name of your server file.

node --inspect app.js

With your server started, now you can run your debug configuration. When prompted, choose Node process that corresponds to the command we just ran to start our server.

Successfully connected!

Debug Configuration 3 (Attach to Port)

For our third configuration, we will be attaching to an existing Node application running on a given port. 9229 is the default port for debugging when using the --inspect flag so that's what we're going to use. Since we've already started our server with the previous configuration, we can just start our debug configuration. Choose "Attach to Port" configuration and click play!

Debug Configuration 4 (Attach to Port with Nodemon)

For our final configuration, we are going to tweak the previous one to support auto reloading with Nodemon. Before I explain what Nodemon is, it's important to know that I consider this the most useful configuration in my day to day development.

Nodemon is a package, typically installed globally from NPM, that will auto reload your Node server as you save your files

For those of your who don't know, Nodemon is a package, typically installed globally from NPM, that will auto reload your Node server as you save your files. This is incredibly useful as your are making changes and testing at the same time. I almost always run my Node application with Nodemon during development, and I would recommend you do too.

To install Nodemon, use the following command.

npm install -g nodemon

Because Nodemon will auto restart our server, in the debug configuration, we've set the restart property to true. This way, our debugger will reconnect when our server restarts. To test this out, run your server using this command (replacing node, from earlier, with nodemon). Obviously, make sure that you canceled your previously running server.

nodemon --inspect app.js

Then, run your configuration.

Keep in mind, we are using Nodemon. So, if we make a change to our server file and save it, our server will automatically be reloaded. Thankfully, we've defined our debug configuration to handle this scenario and reconnect as well. Make a small change to your file, save it, and make sure that your debugger reconnects when the server restarts.

Wrap Up

As I mentioned earlier, getting started debugging in VS Code took me a bit to figure out. The main issue I had was defining configurations appropriately, which is why I created this article. I hope that this gives you guys a clear idea of the available configurations when debugging Node in VS Code.

If you have any follow up questions or comments, leave one below of find me on twitter @jamesqquick.