如何使用 vscode 启动、调试 Node.js 项目

发表 更新 分类

适用场景：以 npm run xxx 启动项目，并进行本地开发；在需要调试的时候按 F5 或单击 Debug 相应按钮打开调试模式，进行断点调试。

涉及 vscode 配置：

  • .vscode/tasks.json 启动
  • .vscode/launch.json 调试

其实 launch.json 也一样可以启动项目，但是 tasks.json 能实现更多功能，并且将启动、调试分开，会更清晰。

步骤

启动配置 tasks.json

  • 1、直接输入 command + shift + p 进入命令窗口，输入 run task 关键字，然后选择 npm。
  • 2、此时会列出 package.json 中定义的 script 名称，可以选择一个进行编辑；或单击一个直接运行。

tasks 的使用说明详见官方文档，下面是我在用的一个自定义 task 示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  "version": "2.0.0",
  "tasks": [
    // 这是一个使用 npm 启动项目到示例，指定脚本 dev
    // 注意：设置不同 type 类型时，相应的可用参数是跟随变化的
    {
      "label": "npm: dev",
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "detail": "cross-env NODE_ENV=development DEBUG=xx:mysql:client webpack-cli -w --hide-modules --config webpack.dev.js",
      "options": {
        "env": {
          "NODE_ENV": "development",
          "DEBUG": "xx:mysql:client"
        }
      }
    },
    // 这是另一种启动方式
    // 1. 使用 nvm 切换到指定 Node 版本；2. 紧接着使用 npm 启动；3. 通过 options 追加额外参数
    {
      "label": "start dev",
      "type": "shell",
      "command": "source ~/.zshrc && nvm use 10 && npm run dev",
      "options": {
        "env": {
          "NODE_ENV": "development",
          "DEBUG": "xx:mysql:*"
        }
      }
    }
  ]
}

配置完之后保存，此时在根目录下自动添加 tasks.json 文件（如果没有 .vscode 目录则先创建）。

使用的时候直接输入 command + shift + p，然后输入 run tasks 回车，选择我们上一步配置并运行过的任务，回车即可，

提示：在 vscode 中，最近使用过的命令会排在最上面，可以借助方向键+回车键便捷操作。

调试配置 launch.json

单击左侧边栏的调试图标，创建一个调试配置，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "debug",
      "port": 9230,
      "request": "attach",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "type": "pwa-node"
    }
  ]
}

这是一个 attach 方式的调试配置，通过监听已启动 Node 服务开放的调试端口（如：9230）进行工作。

设置好之后保存，将生成 .vscode/launch.json 文件。

需要 debug 时，先打好断点，然后按 F5 或单击侧边栏的调试图标，手动启动对应的调试服务。