Getting started with Node debugging tools
JavaScript programs are becoming more and more complex, and the importance of debugging tools has become increasingly prominent. The client script has a browser, how to debug the Node script?
In 2016, Node decided to use the “Developer Tools” of the Chrome browser as an official debugging tool, so that Node scripts can also be debugged using a graphical interface, which greatly facilitates developers.
This article describes how to use debugging tools for Node scripts.
One, the sample program
For the convenience of explanation, the following is a sample script. First, create a new working directory and enter it.
$ mkdir debug-demo $ cd debug-demo
Then, generate
package.json
files and install
Koa
framework and koa-route module.
$ npm init -y $ npm install --save koa koa-route
Next, create a new script
app.js
and write the following content.
// 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, two routes are specified, and a line of welcome message will be displayed after the visit. If you want to understand the detailed meaning of the code, you can refer to the Koa tutorial .
2. Start the developer tools
Now, run the above script.
$ node --inspect app.js
In the above code, the
--inspect
parameter is necessary to start the debug mode.
At this time, open the browser to visit
http://127.0.0.1:3000
, you can see Hello World.
Next, it is time to start debugging.
There are two ways to open the debugging tool, the first one is in the Chrome browser address bar, type
chrome://inspect
or
about:inspect
, carriage return after can see the following interface.
In the Target section, click the inspect link to enter the debugging tool.
The second way to enter the debugging tool is to open “Developer Tools” in the window of http://127.0.0.1:3000, there is a green Node logo in the upper left corner of the top, click to enter.
Third, the debugging tool window
The debugging tool is actually a customized version of the “developer tool”, eliminating those parts that are useless for server scripts.
It mainly has four panels.
- Console: Console
- Memory: memory
- Profiler: performance
- Sources: source code
The usage of these panels is basically similar to the browser environment, and only the Sources panel is introduced here.
Fourth, set a breakpoint
Go to the Sources panel and find the script that is running
app.js
.
Click on the line number on line 11 (that is, the line below) to set a breakpoint.
ctx.response.body = 'Hello ' + name;
At this time, when the browser visits http://127.0.0.1:3000/alice, 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 in the paused phase.
Enter the Console panel, enter name, and it will return to alice. This shows that we are in the context of the breakpoint.
Switch back to the Sources panel, and you can see the collapsed items such as Watch, Call Stack, Scope, Breakpoints, etc. on the right. Open the Scope item, you can see all the variables in the Local scope and Global scope.
In the Local scope,
name
the value of the
variable
is
alice
, double-click to enter the editing state, and change it to
bob
.
Then, click the Continue button on the top toolbar.
Hello bob can be seen on the page.
Under the command line, press ctrl + c to terminate the operation
app.js
.
Five, debug non-service scripts
Web service scripts will always run in the background, but most scripts just process a certain task and terminate after running. At this time, you may not have time to open the debugging tool. When you open it, the script will have finished running. How to debug at this time?
$ node --inspect=9229 -e "setTimeout(function() { console.log('yes'); }, 30000)"
In the above code, the
--inspect=9229
designated debugging port is 9229, which is the default communication port of the debugging tool.
-e
The parameter specifies a string to run as code.
Access
chrome://inspect
, you can enter the debugging tool to debug this code.
Putting the code
setTimeout
inside is always inconvenient.
Those scripts with a short running time may not have time to open the debugging tool.
At this time, the following method should be used.
$ node --inspect-brk=9229 app.js
In the above code,
--inspect-brk
specify the breakpoint on the first line.
In other words, when it starts running, it is in a suspended state.
6. What should I do if I forgot to write –inspect?
The premise of opening the debugging tool is to add
--inspect
parameters
when starting the Node script
.
If I forget this parameter, can I still debug it?
The answer is yes. First, start the script normally.
$ node app.js
Then, in another command line window, look for the process number of the above script.
$ ps ax | grep app.js 30464 pts/11 Sl+ 0:00 node app.js 30541 pts/12 S+ 0:00 grep app.js
In the above command,
app.js
the process number is
30464
.
Next, run the following command.
$ node -e 'process._debugProcess(30464)'
The above command will establish the connection between process 30464 and the debugging tool, and then you can open the debugging tool.
Another method is to send the SIGUSR1 signal to the script process , and you can also establish a debugging connection.
$ kill -SIGUSR1 30464
Seven, reference link
- Debugging Node.js with Google Chrome , by Jacopo Daeli
- Debugging Node.js with Chrome DevTools , by Paul Irish
- Last minute node debugging , by Remy Sharp
(over)