More on this blog at github.com/zhuanyongxi…

How to Debug node.js with the Best Tools Available? My favorite is using V8 Inspector and vscode.

In vscode, click the spider button

You can see the sidebar where debug appears, and then add the configuration

Choose the environment

You can see the launch.json file.

To start, select the appropriate configuration and click on the green triangle pointing to the right

Launch mode and Attach mode

{
  "version": "0.2.0"."configurations": [{"type": "node"."request": "launch"."name": "Launch Program"."program": "${workspaceRoot}/index.js"
    },
    {
      "type": "node"."request": "attach"."name": "Attach to Port"."address": "localhost"."port": 5858}}]Copy the code

When request is launch, it’s launch mode, this is where the program is launched from vscode, and if it’s debugging it’s always in debug mode. In attach mode, you connect services that have been started. For example, if you have started the project outside and suddenly need to debug, you do not need to close the started project and restart it in vscode. As long as you start it in attach mode, vscode can connect to the started service. When debugging is done, disconnect, which is obviously more convenient than launch.

Start with NPM in debug

Many times we write long startup commands and configurations in package.json scripts, for example

"scripts": {
  "start": "NODE_ENV=production PORT=8080 babel-node ./bin/www",
  "dev": "nodemon --inspect --exec babel-node --presets env ./bin/www"
},
Copy the code

We want vscode to start and debug using NPM, which requires the following configuration

{ "name": "Launch via NPM", "type": "node", "request": "launch", "runtimeExecutable": "npm", "runtimeArgs": ["run-script", "dev" // where dev is the same as scripts in package.json], "port": 9229 // This port is for debugging, not for project startup},Copy the code

Run the Nodemon command to start the debugging

Just start with NPM, even though nodemon is used in the dev command, and the program can be restarted normally, but after the restart, debugging is disconnected. So you need vscode to start the project using nodemon.

{ "type": "node", "request": "launch", "name": "nodemon", "runtimeExecutable": "nodemon", "args": ["${workspaceRoot}/bin/ WWW "], "restart": true, "protocol": "inspector", // inspect "sourceMaps": true, "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "runtimeArgs": [// nodemon --inspect --exec", "babel-node", "--presets", "env"]},Copy the code

Notice the runtimeArgs here, which would be true if the configuration were written in package.json

nodemon --inspect --exec babel-node --presets env ./bin/www
Copy the code

Conveniently, the project can be restarted normally, with debugging enabled every time it is restarted.

But what if we don’t want to have debugging on all the time?

This requires the attach mode mentioned above.

Use the following command to start the project normally

nodemon --inspect --exec babel-node --presets env ./bin/www
Copy the code

When we want to debug, we run the following configuration in vscode debug

{
  "type": "node"."request": "attach"."name": "Attach to node"."restart": true."port": 9229
}
Copy the code

Perfect!

The resources

  • Debugging
  • Node.js Debugging in VS Code
  • Nodemon + Babel + VSCode

I’m making github.com/zhuanyongxi…