The debugging tools are becoming more and more important as JavaScript programs are becoming more and more complex. There are browsers for debugging the client scripts, but how we debug the Node script?

In 2016, Node decided to use Chrome's developer tools as the official debugging tool, so that Node scripts can also be debugged through a graphical interface, which brings a great convenience to developers.

I'll introduce how to use the debugging tool for Node scripts in this article.

1. A Sample Program

Here gives a sample script for illustrative purposes. Let's create a new working directory first and then go into the directory.

$ mkdir debug-demo $ cd debug-demo

Now let's generate the package.json file and install the Koa framework and the koa-route module.

$ npm init -y $ npm install --save koa koa-route

Next, create a new script app.js and type the following code.

// app.js const Koa = require('koa'); const router = require('koa-route'); const app = new Koa(); const main = ctx => { ctx.response.body = 'Hello World'; }; const welcome = (ctx, name) => { ctx.response.body = 'Hello ' + name; }; app.use(router.get('/', main)); app.use(router.get('/:name', welcome)); app.listen(3000); console.log('listening on port 3000');

The above code is a simple Web application which specifies two routes, and it will display a welcome message after being visited.

2. Startup The Developer Tool

Now let's run the script above.

$ node --inspect app.js

In the above code, the --inspect parameter is required to start the debug mode. And, you can see Hello World after opening the browser and getting access to http://127.0.0.1:3000 .

Next, let's start debugging. There are two ways to open the debugging tool. The first is to type chrome://inspect or about:inspect in the address bar of Chrome. After you press Enter, you can see the following interface.

In the Target section, click on the link for inspect to get into the debugging tool.

The second way is to open the "Developer Tools" in the window of http://127.0 .0.1:3000 . There will be a green Node flag at the top left corner, just click on it.

3. The Window of The Debugging Tool

The debugging tool is actually a customized version of the "developer tools", which is omitted the part that is not useful for server scripts.

It has four main panels.

Console

Memory

Profiler

Sources

The usage of these panels is basically as the same as they are in the browser environment. Here only introduces the Sources panel.

4. Set Breakpoints

Go into the Sources panel and find the running script app.js .

Click on the line number of the line 11 to set a breakpoint.

ctx.response.body = 'Hello ' + name;

It will get access to http://127.0 .0.1:3000/al ice in the browser, and the page will show that it is waiting for the server to return. Switch to the debugging tool and you can see that the Node main thread is at the paused phase.

Go to the Console panel, and it will return alice if you type name. Now we are at the context of the breakpoint.

Then go back to the Sources panel, and you can see the collapsed items such as Watch, Call Stack, Scope, and Breakpoints on the right. Open the collapsed item of Scope and you'll see all the variables in the Local scope and the Global scope.

In the Local scope, the value of the variable name is alice . Double-click on the value to enter the editing state, and change it to bob .

Then, click the Continue Run button on the top toolbar.

You can see the Hello bob on the page now.

And you can press ctrl + c under the command line to end running app.js .

5. Debug Non-service Scripts

Web service scripts always run in the background, but most scripts only process a task and will be terminated after finishing running. It may be too late for you to open the debugging tool, because when you open it, the script has already finished running. So how we debug it?

$ node --inspect=9229 -e "setTimeout(function() { console.log('yes'); }, 30000)"

In the above code, --inspect=9229 specifies that the debug port is 9229, which is the default communication port of the debugging tool. The -e parameter specifies the string to be run as code.

Get access to chrome://inspect , and then you can use the debugging tool to debug the code.

The code is placed inside the setTimeout , so it is always inconvenient. It may be too late to open the debugging tool, as the scripts only run for a short time. Well, you can use the following method then.

$ node --inspect-brk=9229 app.js

In the above code, --inspect-brk specifies to set a breakpoint on the first line. So, the code will be in the state of suspension at the beginning of being run.

6. What if forgetting to write --inspect ?

The prerequisite for opening the debugging tool is to add the --inspect parameter when starting the Node script. Can we still debug it if we forget the parameter?

The answer is yes. First, let's start the script normally.

$ node app.js

Then, look up the process number of the script above in another command line window.

$ ps ax | grep app.js 30464 pts/11 Sl+ 0:00 node app.js 30541 pts/12 S+ 0:00 grep app.js

The process number of the app.js is 30464 in the above command.

Let's run the following command next.

$ node -e 'process._debugProcess(30464)'

It will establish a connection between the process 30464 and the debugging tool by the above command, and you can start the debugging tool then.

Another method is to send a SIGUSR1 signal to the script process or to establish a debugging connection.

$ kill -SIGUSR1 30464

7. Reference