Debug js in the browser, but sometimes you want to debug js or node.js in the code tool as in the background. Here is how to debug in vscode.

1, used to debug JS

Search for Debugger for Chrome in the extension on the left and click Install:

Two: click F5 under your HTML project directory, or select the debug button on the left

{
    "version": "0.2.0"."configurations": [{
            "type": "chrome"."request": "launch"."name": "Launch Chrome against localhost"."url": "http://localhost:8080"."webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome"."request": "attach"."name": "Attach to Chrome"."port": 9222,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Launch index.html (disable sourcemaps)"."type": "chrome"."request": "launch"."sourceMaps": false."file": "${workspaceRoot}/jsTest/test1/test1.html"  # change the file address here every time}}]Copy the code

5: Debugging can be carried out here, in

Launch index.html (disable sourcemaps)

2, used to debug Node.js

There are many ways to debug NodeJS. You can see this article at blog.risingstack.com/how-to-debu…

My favorite is the V8 Inspector and vscode approach. In vscode, click the spider button

Configurations "{"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