Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the ways to debug Node.js code". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the ways to debug Node.js code"?

Most of the time, I worry about debugging Node.js. I only use console.log as an intrusive method, but in fact, Node.js can be as convenient as browser debugging.

The context of this article:

MacChrome 94.0.4606.81node v12.12.0vscode Version: 1.61.1 example of this article

The example in this article uses the one that explored the onion model before. There is only one file, that is, index.js in the root directory, as follows:

Const Koa = require ('koa'); const app = new Koa (); console.log (' test') / / middleware 1app.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`)) ); V8 Inspector Protocol + Chrome DevTools

V8 Inspector Protocol is a new debugging protocol added by nodejs v6.3, which interacts with Client/IDE through websocket. At the same time, devtools based on Chrome/Chromium browser provides a graphical debugging interface.

Let's go to the project root and execute (pay attention to this port 8888, which will be used later):

Node-inspect=8888 index.js

The results are as follows:

The result is a link-ws://127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d. This link is the websocket address where Node.js and Chrome communicated before. Through websocket communication, we can see the results of Node.js in Chrome in real time.

How to enter the debugging interface of Chrome

The first way (it is useless to try by yourself)

Open http://localhost:8888/json/list, where 8888 is the parameter to the above-- inspect.

[{"description": "node.js instance", "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d", "devtoolsFrontendUrlCompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=localhost:8888/5f5c59fc-d42b-4ab0-be15-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"}]

A lot of materials say that it can be accessed directly through devtoolsFrontendUrl, but it has been tried without success. [it may have something to do with my environment]

The second way

Check the information and find the corresponding solution in stackoverflow, as follows:

Devtools://devtools/bundled/inspector.html?experiments=true&ws=127.0.0.1:8888/5f5c59fc-d42b-4ab0-be15-6feb1a05ed2d

Where devtools://devtools/bundled/inspector.html?experiments=true is fixed and the ws parameter corresponds to the websocket address.

You can see that the interface is as follows:

The third way

Chrome browser opens the HTTP listening interface page, opens dev tool, and after executing node-inspect=8888 index.js, you can see this icon. Click:

You can have the same debugging page as the browser, such as Sources Panel viewing scripts, Profile Panel monitoring performance, and so on.

In addition, you can access the chrome://inspect/#devices and see all the inspect that the current browser is listening to.

Vscode debugging

In addition to browsers, all major IDE support Node.js debugging, this article takes Vscode as an example.

Launch Configuration

Open the debugging page and add a launch configuration to our Node project:

Select Node.js

This will generate the corresponding file .vscode / launch.json in the project root directory (you can also 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": ["/ * *"], "program": "${workspaceFolder} / index.js"}]}

Press F5, or click the following button:

Results:

As you can see, on the left, you can display the value of the current scope, call stack and other information, and the upper right can also gradually debug functions, restart and other functions, which is very powerful.

Attach to Node Process Action

Through the way of Attach to Node Process Action, we can debug the running Node.js process directly.

For example, let's start the project-- npm run start.

Then command + shift + p (window Ctrl+Shift+p), type Attach to Node Process Action, enter, select the running process and enter again, and you can debug the code as configured above.

Thank you for your reading, these are the contents of "what are the ways to debug Node.js code?" after the study of this article, I believe you have a deeper understanding of the way of debugging Node.js code, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.