Node.js debugging pain points

For most front-end people, JavaScript debugging is more in the browser, like console.log and debugger, but it is more intrusive and even requires page refreshes or compiler restarts. After switching to the server, there is no browser interface. If you just stay in the original debugging mode, the development efficiency must be low. Therefore, when front-end personnel switch to server-side development, they should get used to debugging means such as the command line and IDE and step out of their comfort zone to accurately locate problems and improve development efficiency.

Node.js debugging means

The dependent libraries and software versions described below

  • Node. Js – v10.15.3
  • Chrome – v72.0.3626
  • VS Code – v1.13.0

The following code snippet uses KOA as an example to create a simple HTTP server

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
    const time = new Date(a); ctx.body =`hello, hiker! ${time}`;
});

app.listen(3000, () = > {console.log('nodejs listening 3000.');
});
Copy the code

1. console.log()

Console.log (), console.error(), console.time(), and other forms of console are written directly in the code where you need to debug, just in a different way. In Node.js it is printed on the terminal command line. This is the simplest and fastest debugging method, but its disadvantages are also obvious, such as large intrusion on the original code and limited use in specific scenarios.

For example,

app.use(async ctx => {
    const time = new Date(a);console.time('TIME_TAKE');
    console.log('this is time', time);

    ctx.body = `hello, hiker! ${time}`;
    console.timeEnd('TIME_TAKE');
});

app.listen(3000, () = > {console.log('nodejs listening 3000.');
});
Copy the code

The results of

Js, and access localhost:3000 in the browser. You can view the corresponding log in the cli of the terminal.

2. Debugger Protocol (node-inspector)

Nodejs v6.3+ provides two protocols for debugging: THE V8 Debugger Protocol and the V8 Inspector Protocol. You can use third-party clients/ides to monitor Node(V8) operations.

Node-inspector is an early Debugger tool with a visual interface based on Chrome. It uses the V8 Debugger Protocol and communicates with the Client/IDE through the TCP port. However, this tool has been replaced with the v8 Inspector Protocol, and the alternatives are described below.

use

$NPM install -g node-inspector connect to the Node-inspector service via the browser and start the Node.js application in debug mode: $node -- debug = 5858 index. Js browser open http://127.0.0.1:8080/debug? Port =5858, the background provides a UI debugging interface similar to Chrome DevTools.Copy the code

3. Inspector Protocol + Chrome DevTools

V8 Inspector Protocol is a new debugging Protocol added to NodeJS V6.3. It interacts with the Client/IDE through Websocket and provides a graphical debugging interface based on Chrome/Chromium browser DevTools.

$ node --inspect=9222 index.js
Copy the code

If the program terminates at the end of execution, then –inspect will flash and end before the breakpoint signal is sent, and the breakpoint will not work at all. In this case, you can use — inspec-brk to start the debugger so that the script can break before the code executes.

The results of

Ws: / / 127.0.0.1:9222 / a45dc332 dbf212ae28a – 2 – bf01 c8c – 4614-1 this is not for our access address in Chrome, but the Node. Js and communicate between Chrome’s address, Communicate through Websocket to display debugging results in real time in Chrome browser.

How do I get the debug address in Chrome? We can visit http://localhost:9222/json/list, you can see the corresponding information. Where ID is a UUID, which is a specific identifier. Each process is assigned a UUID, so each call has a different result. DevtoolsFrontendUrl is the Chrome address we want to access, and we can debug the new window by opening this address.

More convenient debugging entry

If the above steps are a bit cumbersome, don’t worry, the powerful Chrome provides a more convenient debugging entry.

Node– inspect=9222 index.js/http_monitor_port/http_monitor_port/http_monitor_port

What does this green button open? We can keep watching. Visit Chrome ://inspect/# Devices to see all inspect that the current browser listens on

Here, we can use Chrome DevTools various features, Sources Panel to view scripts, Profile Panel monitoring performance, etc., this article does not expand specifically.

4. Inspector Protocol + VS Code

For server-side development, browsers are used less frequently, so debugging Nodejs in the IDE is especially important. The good news is that the ides on the market are friendly to Nodejs debugging, especially VS Code. It has Node Debugger built in and supports both v8 Debugger Protocol and V8 Inspector Protocol.

launch

In VS Code, open Debug/Add Configuration/as shown below, add launch configuration, and click Start Debugging.

{
    "version": "0.2.0"."configurations": [{"type": "node"."request": "launch"."name": "Launch Program"."program": "${workspaceFolder}\\index.js"}}]Copy the code

In the debug window, you can directly set breakpoints in the IDE. In the small window on the left, you can see the variables of the current scope (tree expansion), call stack, all breakpoints, etc. In the upper right, you can also step by step debug functions, restart, etc., very powerful.

Auto Attach

Also VS Code provides automatic Attach: Auto Attach. Fast debugging without configuration.

Ctrl+Shift+ P open Auto Attach, then do the same on the terminal command line: node –inspect= 9222.\ index.js

drunken

This paper summarizes the Nodejs debugging methods, basically covering all debugging means, including command line debugging, Chrome browser debugging, VS Code editor debugging, and in-depth part of the debugging protocol, with pictures and texts, for other Nodejs developers to reference, reduce the learning cost of developers, in the project engineering application, Accurately locate problems and improve development efficiency.

References:

Nodejs. Cn/API/inspect…

Nodejs. Cn/API/debugge…

i5ting.github.io/vsc/#1