How To Debug Node.js Code in Visual Studio Code
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.
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’.
While it is not required for you to run the same application, you can clone the source code in order to follow along.
After choosing an application to Debug, install the Debugger for Chrome extension.
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.
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.
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:
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.
To start a Node application in debug mode going forward, use the
Step 4 — Making 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 earlier) 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 the Node process that corresponds to the command we just ran to start our server.
You will get a successful connection:
Step 4 — Making 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 go ahead and start our debug configuration. Choose “Attach to Port” configuration and click play:
Step 5 — Making 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. 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
Then, run your configuration:
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.
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.