Most of the time, I’m stuck debugging Node.js and use console.log as an intrusive method, but Node.js can be just as convenient as browser debugging.

Environment of this paper:

MAC Chrome 94.0.4606.81 node V12.12.0 VScode Version: 1.61.1Copy the code

In this paper, the sample

The example in this paper adopts the onion model explored before, and there is only one file, which is the index.js under the root directory, as follows:

const Koa = require('koa');

const app = new Koa();
console.log('test')

// Middleware 1
app.use((ctx, next) = > {
  console.log(1);
  next();
  console.log(2);
});

// Middleware 2
app.use((ctx, next) = > {
  console.log(3);
  next();
  console.log(4);
});

app.listen(9000.() = > {
    console.log(`Server is starting`);
});
Copy the code

V8 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.

We go to the project root directory and execute (note port 8888, which will be used later) :

node --inspect=8888 index.js
Copy the code

The results are as follows:

Results a link – ws: / / 127.0.0.1:8888/5 f5c59fc ab0 d42b – 4 – feb1a05ed2d be15-6. This link is the websocket address that Node.js and Chrome used to communicate. Through websocket communication, we can see the result of Node.js in Chrome in real time.

How do I access the Chrome debug page

The first way (try it yourself)

Open the http://localhost:8888/json/list, which is above 8888 – inspect parameters.

[ { "description": "node.js instance", "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6 feb1a05ed2d", "devtoolsFrontendUrlCompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be1 5-6feb1a05ed2d", "faviconUrl": "https://nodejs.org/static/images/favicons/favicon.ico", "id": "5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d", "title": "index.js", "type": "node", "url": "file:///Users/gpingfeng/Documents/Personal/Test/test-onion/index.js", "webSocketDebuggerUrl": "ws://localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d" } ]Copy the code

Much of the material was said to be directly accessible via devtoolsFrontendUrl, but attempts were unsuccessful. Maybe it has something to do with my environment.

The second way

Check the data and find the corresponding solution in StackOverflow as follows:

devtools://devtools/bundled/inspector.html? Experiments = true&ws = 127.0.0.1:8888/5 f5c59fc ab0 d42b - 4 - feb1a05ed2d be15-6Copy the code

The devtools: / / devtools bundled/inspector. HTML? Experiments =true are fixed, and ws parameters correspond to websocket addresses.

You can see the following interface:

The third way

Open dev Tool and execute node –inspect=8888 index.js.

The same debug page as the browser, such as Sources Panel to view scripts, Profile Panel to monitor performance, etc.

Alternatively, you can visit Chrome ://inspect/# Devices to see all inspect that the current browser listens on.

Vscode debugging

In addition to browsers, all major ides support node.js debugging. This article uses Vscode as an example.

Launch Configuration

Open the debug page and add a Launch configuration to our Node project:

Select the Node. Js

This will generate the corresponding.vscode/launch.json file in the project root directory (you can create it manually, of course), where program refers to the file entry and ${workspaceFolder} refers to the root directory.

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0"."configurations": [{"type": "pwa-node"."request": "launch"."name": "Launch Program"."skipFiles": [
        "<node_internals>/**"]."program": "${workspaceFolder}/index.js"}}]Copy the code

Press F5, or click the following button:

Results:

As you can see, on the left side, you can display the value of the current scope, call stack and other information. On the upper right side, you can also step by step debugging functions, restart and other functions, very powerful.

Attach to Node Process Action

By attaching to Node Process Action, we can directly debug a running Node.js Process.

For example, let’s start the project — NPM Run Start.

Then command + shift +p (Window Ctrl+Shift+ P), type Attach to Node Process Action, press Enter, then select the running Process and press Enter to debug the code as configured above.

conclusion

This article summarizes two common ways to debug Node.js. Node.js passes information to Chrome via websocket, and we debug directly in Chrome. The second way is to debug through Vscode Launch Configuration and custom Configuration. By attaching to Node Process Action, you can easily debug running Node.js code without configuration.