调试功能

VSCode 的调试功能:

  1. 调试前端 js
  2. 调试 Node.js
    • 使用 launch.json 启动调试
    • 通过 launch.json 使用 npm 启动调试
      • 为的是复用 npm script 中写好的调试启动命令
    • 通过 launch.json 连接已启动的程序并开启调试
    • 其他调试方法
      • 直接通过 npm script 启动调试(这样调试信息就只会出现在外部终端,而且用不到 vscode 的可视化调试界面)
  3. 同时自动重启项目进程和调试进程

VSCode 的 Node.js 调试指南

在项目工程中常看到的 --inspect--inspect-brk--debug-port--inspect-port 都不是源自于 vscode 的,而是源自于 node 的 REPL 的。

$ node --help

...
--inspect[=[host:]port]     activate inspector on host:port
                              (default: 127.0.0.1:9229)
--inspect-brk[=[host:]port] activate inspector on host:port and
                            break at start of user script
--debug-port, --inspect-port=[host:]port
                            set host:port for inspector
...
1
2
3
4
5
6
7
8
9
10

使用 launch.json 启动调试

直接在 Debug 界面新建一份在 launch.json 中的调试配置。

通过 launch.json 使用 npm 启动调试

launch.json 中的调试配置除了默认的 node 运行程序外,还支持其他的、能在全局变量中找到的运行程序,比如说 npmmochagulp 等等。要指定这些额外的运行程序以及所需的参数,我们需要在 launch.json 中用到 runtimeExecutableruntimeArgs 配置字段。

举个使用 npm script 命令启动调试的配置例子:

// package.json
{
    // ...
    "scripts": {
        "debug": "node --inspect-brk=9229 index.js"
    }
}
1
2
3
4
5
6
7
// launch.json
{
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch via NPM",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",  // 这个可以理解为固定的参数,不要改动
                "debug" // 对应 package.json 中的 npm script
            ],
            "port": 9229
        },
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

该方法为的是复用 npm script 中写好的调试启动命令,但是要注意的是,npm script 中的必须是调试命令,换言之,必须带上 --inspect 或者 --inspect-brk 参数,这样才会进入「调试」状态嘛。

通过 launch.json 连接已启动的程序并开启调试

一般来说,我们会使用 npm script 来启动项目,有需要的时候才想起去开启调试模式(当然了,看个人习惯,大神除外)。

那当我们用 npm script 启动了项目,遇到了问题想要进入调试,又不想关掉进程,再重新从「调试模式」启动时怎么办呢?

理想的情况就是,可以另起一个调试进程,自动「连接」我们的项目进程,由此开启调试模式;而且调试完成时,可以单独 kill 掉调试进程,而不对我们的项目进程造成影响。

答案是有的。VSCode 的调试模式有两种:「launch」模式和「attach」模式。我们上面说的都是「launch」模式,接下来看看如何配置「attach」模式。

需要注意的是,这种模式下,要求在外部终端或者 VSCode 中的集成终端,以「调试模式」启动了项目进程,然后再让 vscode 的调试进程 attach 上去,提供可视化的调试界面

// package.json
{
    "scripts": {
        "debug": "node --inspect=9229 index.js"
    },
}
1
2
3
4
5
6
// launch.json
{
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Port",
            "port": 9229
        },
    ]
}
1
2
3
4
5
6
7
8
9
10
11

注意到了:

  1. 我们是通过 request 字段的值来控制调试程序使用哪种调试模式;
  2. 9229 这个端口号出现的很频繁,因为那是 node 调试模式的默认端口

同时自动重启项目进程和调试进程

我们在开发 nodejs 项目时,不可避免地会用到 nodemon 这个第三方插件来监听我们的代码,并自动重启项目进程。如果此时我们 launch 或 attach 了调试进程,调试会被断开的,所以我们需要让调试进程也要自动重新连接上。

现在实现方式有两种:

  1. launch 方式
  2. attach 方式

launch 方式:

{
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch server.js via nodemon",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/server.js",
            "restart": true,
            "protocol": "inspector",    //相当于--inspect了
            "console": "integratedTerminal"
        },
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

attach 方式:

// package.json
{
    // ...
    "scripts": "nodemon --inspect server.js"
}
1
2
3
4
5
{
    "configurations": [
        {
            "name": "Attach to node",
            "type": "node",
            "request": "attach",
            "restart": true,
            "port": 9229
        },
    ]
}
1
2
3
4
5
6
7
8
9
10
11

launch.json 中的 console 配置

VSCode 中的调试日志信息会打印在 launch.json 中 console 所指定的地方,可选取值有如下:

  • internalConsole: 默认值
  • integratedTerminal: 内部集成终端
  • externalTerminal: 外部终端

如果要使用外部终端,可以在 setting.json 中配置:

  • terminal.external.windowsExec
  • terminal.external.osxExec
  • terminal.external.linuxExec

参考链接