How to Debug Node.js Applications Using Node.js Debugger, Chrome DevTools and VS Code

Node.js is used to create servers, APIs and web services, which can be heavily coded with complex structures, making it hard to debug Node.js. It is very overwhelming for a developer to find which line exactly produces the bug.

The simple solution is the Node.js Debugger, which provides various tools to debug the code directly using the terminal. You can also use Chrome DevTools and VS Code if you want to debug through using a graphical interface instead of the terminal.

What is Node.js Debugger?

The Node.js debugger is a tool accessed through the command line that helps debug Node.js code. It provides a way to set different breakpoints to stop the program’s execution at a point to find bugs. The Node.js debugger is efficient for tracking the value of variables and how they change with the flow of execution.

For using the Node.js debugger, you must have Node.js installed on your PC. To initiate the Node.js debugger, use the below command:

node inspect file_name

Where file_name is the name of the file you want to inspect.

Commands to Debug Node.js Application

Node.js Debugger provides various commands which are important to learn before understanding the working of Debugger.

c/cont: This command is used to execute the code till a breakpoint or end.
n/next: This command will move the execution to the next line.
s/step: Use to get inside a function.
o: Use to get out of a function.
pause: pause the execution.

These commands might be difficult for you to understand, but soon we will see a fully working example that will clear your doubt.

Debugging Node.js Applications Using Command Line

For understanding the working of the debugger, let’s create an example project containing a single file, app.js, with the following code:

let numbers = [1, 2, 3, 4, 5];

let sumOfNumbers = 0;

for (let i = 0; i &lt;= numbers.length; i++) {
    sumOfNumbers += numbers[i];
}

console.log(sumOfNumbers);

To run the application, locate it inside the terminal and type the following command:

node app.js

The output we expected is 15.

The output we get is:

NaN

Now, we will use the debugger to find the bug in the program:

Run node inspect app.js in your terminal. We see that the execution starts from the top and as we press n, it will move to the next line.

Now we have to use the watch method to track the variables i and sumOfNumbers. Type watch('i') and watch('sumOfNumbers').This method takes an argument, a string containing the name of the variable to track its value.

As we proceed, we see that the value of both variables changes as expected, in each loop, the value of the array’s next element is added to the sumOfNumbers variable.

Let’s run the loop until the value of sumOfNumbers becomes NaN.

Now, we see that the bug happens when the value of variable i becomes 5, and we notice that the array has only 5 elements since the elements of an array start with index 0, so the last element of the array should be at index 4, but our value of i becomes 5 and it tries to add the value of the element in index 5, but no element exists at that index so the default value of the element at index 5 is NaN, that’s why the sumOfNumbers becomes NaN.

From the above observation, we conclude that the value of i should not be greater than 4, as it is the last index of the array, so we just remove the = symbol in the for loop and run the code again.

Interactive Debugging with Chrome and Remote Debug

Use Chrome DevTools for a visual debugging experience. This approach gives a user interface to your debugging sessions. For many people this is easier than the command line. You can see loaded scripts, set breakpoints, inspect variables and step through code using the DevTools interface.

Chrome DevTools can also be used to debug Node.js applications running on remote servers. This requires starting Node.js with the --inspect option and connecting Chrome DevTools to the exposed debugging port.

Steps for Chrome Debugging:

Open your terminal.
Run the command node --inspect app.js.
Open the Chrome web browser.
Type chrome://inspect in the address bar.
Click on the “Open dedicated DevTools for Node” link.
Click on the “Sources” tab to see your code.

You can use this command as well:

node--inspect-brk server.js

This command stops the code at the first line. It waits for the debugger to be attached. This gives you time to open the tools.

Debugging Node.js Applications in VS Code

Visual Studio Code is a popular IDE that helps you debug a Node.js application. It has a built-in debugger that is easy to use. You can debug Node.js code efficiently here. You do not need to use the command line. You can inspect your JavaScript code visually. This makes it easy to manage your debugging sessions.

Steps to Debug Node.js in VS Code:

Open your Node.js project in VS Code.
Open the JavaScript file you want to debug.
Click near the line number to set a breakpoint.
Press F5 or click Run and Debug.
Select Node.js as the environment.
The debugger automatically starts your code.
You can see the output in the integrated terminal.
You can use a debug configuration file to set options like the debugger port.

Consider the following code:

let numbers = [1, 2, 3, 4, 5];

let sumOfNumbers = 0;

for (let i = 0; i &lt;= numbers.length; i++) {
    sumOfNumbers += numbers[i];
}

console.log(sumOfNumbers);

Set a breakpoint inside the for loop and start debugging. As the code executes you can monitor the values of i, numbers[i], and sumOfNumbers in the Variables panel. This helps identify that when i becomes 5, numbers[5] returns undefined which causes sumOfNumbers to become NaN.

Advanced Debugging Scenarios for Child Process and Environment Variable

Sometimes you have to debug a child process. This can be difficult because the process is running in the background. You can resolve this with an environment variable. You can debug Node.js code that spawns other tasks. You do not have to change your logic, just set up the Node.js app to listen for connections.

Steps for Child Process Debugging:

Open your terminal.
Set the environment variable NODE_OPTIONS to --inspect.
Run your main script.
The child process will start with the debugger active.
Connect your Chrome DevTools to the new process.

Example:

export NODE_OPTIONS="--inspect=9229"
node main_script.js

This code sets the inspect flag for any Node.js process started from this terminal.

Summary

In this article, we explored debugging Node.js applications using the built-in Node.js debugger, Chrome DevTools, and VS Code. These tools let you set breakpoints, inspect variables and step through code to find and fix bugs more efficiently. Depending on your workflow, you can select command-line or graphical debugging tools to make debugging easier.