Visual debugging and performance analysis of Node.js applications

In versions prior to Node.js v6.3, the debugger used the old V8 Debugger Protocol, which can be done through node --debug app.js. In order to perform visual breakpoint debugging in a graphical interface, you need to use editors and plug-ins such as VSCode and WebStorm, or install additional tools such as node-inspector.

For most front-end developers, the DevTools that comes with the Chrome browser are no strangers. The new version of Node.js begins to support the new Chrome DevTools Protocol. You can start the new version of the debugging protocol through node --inspect app.js, and with the help of Chrome DevTools, you can achieve the same experience as debugging web pages in the past.

Some editors also support the new Node.js debugging protocol, or support it by installing the Chrome plugin NIM. But if you have Node.js 6.3+ and Chrome 55+ installed on your computer, you no longer need any additional tools to easily debug your Node.js program.

Breakpoint debugging

First, let's create a new program file app.js to experience the new debugging method:

 const http = require( 'http' );
 const server = http.createServer( function (req, res) {
  res.writeHead(200, { 'content-type' : 'text/html' });
  res. end ( '<h1>It works!</h1>' );
 });
 server.listen(3000, function () {
  console.log( 'Listening on http://localhost:3000' );
 });

Then execute the following command to start the program and enter debugging mode:

 node --inspect app.js  

You can see the following information printed out on the console:

 Debugger listening on ws://127.0.0.1:9229/1bde07a4-2afa-44b1-a3bc-45aa9977ff67
 For help see https://nodejs.org/en/docs/inspector
 Listening on http://localhost:3000

At this point, open the Chrome browser (Chrome 55 or higher is required), enter chrome://inspect in the address bar and press Enter, the following interface will open:

Click the Open dedicated DevTools for Node link on the interface to open the debugging window:

In this window, click the Sources tab and find the source code file app.js under file:// in the left sidebar to see its source code. If you want to perform breakpoint debugging, just click on the line number of the source code:

In the right sidebar of the window, you can see information such as Watch, Call Stack, Scope, etc. You can also modify the code directly in the source code window and press ⌘ + S (Ctrl + S on Windows) to save and it will take effect immediately.

Performance Analysis

The Profiler tab in the debugging interface can be used to analyze which Node.js programs have a high CPU usage:

We can use the wrk command to perform a simple HTTP interface test. First, click the Start button in the interface to start recording CPU usage information, and then execute the following command in the command line window (start 5 threads, 100 concurrent connections, and last for 1 minute):

 wrk -c 100 -t 5 -d 1m http://localhost:3000/

Wait for 1 minute. After the command is executed, click the Stop button in the DevTools interface and you will see the following results:

In addition, you can also use the Memory tag to perform memory usage analysis.

Debugging TypeScript Programs

If your program is written in TypeScript, you can use ts-node to start debugging mode:

 ts-node --inspect app.ts  

or:

 node --inspect --require ts-node/register app.ts  

Debugging a running Node.js process

If the program is started without the --inspect option, you can send a SIGUSR1 signal to the process to put it into debug mode (92801 is the PID of the Node.js process being debugged, replace it according to the actual situation):

 kill -s SIGUSR1 92801

You can see that the process console prints the following prompts:

 Debugger listening on ws://127.0.0.1:9229/cc35d4da-c8ae-42e3-943a-8ac81d5c067a
 For help see https://nodejs.org/en/docs/inspector

At this point, you can use Chrome DevTools to debug according to the above method.