While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

Introduction

Visual Studio Code has a large amount of functionality built in, including support for debugging applications. However, configuring VS Code to debug Node.js can be counterintuitive. In this article, you will configure VS Code to debug Node.js by downloading the Debugger for Chrome extension, creating a Debug configuration, launching a Debug configuration, and setting breakpoints.

Step 1 — Setting Up

For this article, we’re going to be debugging an application called ‘Quick Chat’.

Quick Chat test application

While it is not required for you to run the same application, you can clone the source code in order to follow along.

GitHub repository for Quick Chat application

After choosing an application to Debug, install the Debugger for Chrome extension.

Debugger for Chrome extension in VS Code

Now, let’s create a breakpoint in our app. The Quick Chat application is a Node/Express app that uses Socket.io to allow users to chat with each other in real time. We will add a breakpoint where a client connects to our server.

As shown in the following screenshot, we’ve created a breakpoint (the red circle) 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, such as when the application loads, a route is triggered, etc.

A breakpoint in the Quick Chat app in VS Code

Step 2 — Using the VS Code Debugging Panel

To open the Debug panel, click on the bug-looking icon on the sidebar (on the left side by default). Notice that there are four different sections: variables, watch, call stack, and breakpoints.

Debug panel in VS 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 configuration, you’ll see it listed there.

VS Code stores debug configurations in a file called launch.json inside of a folder called .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.

Step 3 — Making 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 need to define the program file that will be run. The configuration looks like this:

Debug Configuration 1

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

Debug action bar in VS Code

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

Step 4 — Making Debug Configuration 2 (Attach by Process ID)

Debug configuration 2

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 earlier) and replace app.js with the name of your server file.

  • node --inspect app.js

Starting the server in VS Code

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

You will get a successful connection:

Successful connection in VS Code

Step 4 — Making Debug Configuration 3 (Attach to Port)

Debug Configuration 3

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 go ahead and start our debug configuration. Choose “Attach to Port” configuration and click play:

Successful configuration 3 in VS Code

Step 5 — Making Debug Configuration 4 (Attach to Port with Nodemon)

Debug Configuration 4

For our final configuration, we are going to tweak the previous one to support auto-reloading with Nodemon. Nodemon is a package, typically installed globally from npm, that will auto-reload your Node server as you save your files. This makes it much easier to make changes and test at the same time.

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):

  • nodemon --inspect app.js

Output of `nodemon --inspect app.js`

Then, run your configuration:

Running debug configuration 4 in VS Code

Since we are using Nodemon, if we make a change to our server file and save it, our server will automatically be reloaded. 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.

Debugger reconnecting when server restarts

Conclusion

In this tutorial, you set up VS Code to debug Node.js code. You now have appropriate configurations to start debugging. To learn more about Node.js, see our How To Code in Node series.

0 Comments

Creative Commons License