如何使用 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 或单击侧边栏的调试图标,手动启动对应的调试服务。