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

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

涉及 vscode 配置:

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

步骤

启动配置

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

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

{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "dev",
"problemMatcher": [],
"label": "npm: dev",
"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"
}
}
}
]
}

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

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

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

调试配置

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

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