How to debug node in vscode

#1. Create a configuration file

1. Select your project

2. Select the language of your project

3. Generate .vscode/launch.json under the current project path

{
    // 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": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/test.js"
        }
    ]
}

type - The debugger type used for this launch configuration. Each installed debugging extension introduces a type, for example, the node built-in node debugger, php and the goPHP and Go extensions.

request - The request type for this launch configuration. Currently supported are launch and attach. (See Chapter 3 below for a detailed explanation of request)

name - Friendly name, displayed in the "Debug Launch Configuration" drop-down list.

program - The executable or file to run when the debugger is started.

args - Arguments passed to the program for debugging.

env - environment variable (the value null can be used to "undefine" the variable).

cwd - The current working directory, used to find dependencies and other files.

Note 1: ${workspaceFolder} represents the root path of the workspace folder, ${file} represents the file opened in the active editor.

Note 2: "program": "${workspaceFolder}/test.js", I'm not sure how vscode recognizes /test.js in the current directory I want to debug. [To be solved]

Note 3: You can also write the configuration file into User Settings to become a global configuration.

4. Quickly return to your configuration file

2. Breakpoint

1. Breakpoint (traditional breakpoint)

(1) The graphics are replaced by circles;

(2) cannot be typed on a blank line.

2. Logpoint

(1) You can print out information in the debug console (wrap expressions with {});

(2) The graphics are replaced by diamonds;

(3) If it is not placed on the statement, but on a blank line, it will disappear during debugging and execution, but the effect will not be affected. So it is still recommended to type in the sentence!

3. Conditional Breakpoint

is divided into two conditions: expression/number of hits

(1) You can break to the statement closest to the breakpoint when the conditions are met;

(2) The graphic is replaced by a square;

(3) If you do not hit the statement, but A blank line will disappear during debugging, but will not affect the effect.

3. Debugging

#The launch.json configuration file mentioned in Chapter 1 has a request field, and the value range is: launch and attach

launch: vscode e runs a debugging process independently

attach: You start debugging by yourself through node --inspect-brk xxx.js, and then vscode attaches it

Let’s talk about the difference between specific debugging methods in these two categories:

1. Launch method

(1) Click Launch Program

(2) Select which configuration file to launch

Note: The value of the name attribute in the launch.json configuration file will be displayed here drop-down list.

(3) Start debugging

2. Attach method

(1) Turn on Auto Attach: On

（2）以调试的方式启动 node

node --inspect-brk test.js

（3）开始调试

四、调试相关功能

1、DEBUG CONSOLE

可以在此操作变量

五、多目标调试

需求：同时调试 server.js 和 client.js

1、建立配置文件

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Server",
            "program": "${workspaceFolder}/server.js",
            "cwd": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Client",
            "program": "${workspaceFolder}/client.js",
            "cwd": "${workspaceFolder}"
        }
    ],
    "compounds": [
        {
            "name": "Server/Client",
            "configurations": ["Server", "Client"]
        }
    ]
}

2、开始调试

注1：调试的时候，可以同时运行程序。

注2：当修改代码，同时运行的程序会立即生效，而调试的代码还是老的。

PHP中文网，有大量免费的vscode入门教程，欢迎大家学习！

The above is the detailed content of How to debug node in vscode. For more information, please follow other related articles on the PHP Chinese website!