本文详细介绍了如何在Visual Studio Code(VSCode)中调试Node.js项目以及npm scripts。首先，通过新建项目、初始化npm并设置断点来演示调试Node.js的基本步骤。接着，针对调试npm scripts的情况，添加特定的调试配置，包括设置`runtimeExecutable`、`runtimeArgs`和`port`。此外，还解决了调试非Node命令的问题，如使用webpack时，需要通过`node --inspect-brk`来启动调试。最后，介绍了`stopOnEntry`配置项，使得调试时能自动在代码第一行暂停。
1. 调试node.js
我们先来看看vscode如何调试node.js。
1.1 新建项目
$ mkdir vscode-debug
$ cd vscode-debug
$ npm init -f
1.2 新建index.js
console.log('hello');
1.3 打开vscode
用vscode打开vscode-debug文件夹，作为vscode资源管理的根目录。
1.4 添加vscode配置
打开工具栏的“调试”菜单，然后点击“添加配置”。
vscode会让我们选择环境，这里我们选择“Node.js”。
vscode会自动在工程目录下创建一个 .vscode/launch.json 文件。
我们看到 .vscode/launch.json的configurations.program属性为，
{
...
"configurations": [
{
...
"program": "${workspaceFolder}/index.js"
}
]
}
其中${workspaceFolder}/index.js表示了调试的入口，
workspaceFolder是vscode资源管理器的根目录，
因此，上文中我们强调了项目目录应当为资源管理器的根目录。
1.5 启动调试
添加完调试配置之后，直接按F5，就可以启动调试了。
在此之前，记得去 index.js 文件中打个断点。
启动调试之后，程序就会停在断点处了，
2. 调试npm scripts
在实际项目中，好多命令放到了npm scritps中，
下面我们介绍调试npm scripts的办法。
2.1 添加npm scripts
{
...
"scripts": {
...
"debug": "node --inspect-brk=5858 index.js"
},
...
}
其中，debug是npm scripts的名字，可以任取，
后面--inspect-brk=5858是必须的，其中5858是任意指定的调试端口号。
2.2 修改vscode调试配置
打开 .vscode/launch.json，
增加以下3个配置项，runtimeExecutable，runtimeArgs，port。
而program配置项就可以删掉了，
"program": "${workspaceFolder}/index.js"
{
...
"configurations": [
{
...
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 5858
}
]
}
其中，runtimeExecutable表示要使用的运行时，默认为node，这里我们配置成了npm，
runtimeArgs的第二个参数，就是npm scripts的命令名，第一个参数run-script不要修改。
port指的是npm scripts中我们配置的--inspect-brk=5858调试端口号5858。
2.3 启动调试
然后按F5，就可以启动调试了，
程序停到了 index.js 我们打的断点处。
3. 调试非node命令
3.1 node_modules/.bin
npm run会自动添加node_module/.bin 到当前命令所用的PATH变量中，
可参考npm-run-script。
例如，如果我们配置了名为build的npm scripts，
{
...
"scripts": {
"build": "webpack"
},
...
}
则npm run build实际调用的是 node_modules/.bin/webpack。
3.2 不能直接加 --inspect-brk
在这种情况下，直接加--inspect-brk=5858是不灵的。
{
...
"scripts": {
"debug": "webpack --inspect-brk=5858"
},
...
}
以上配置，会自动执行npm run debug，但不会进入断点。
3.3 转换成node调用
{
...
"scripts": {
"debug": "node --inspect-brk=5858 ./node_modules/.bin/webpack"
},
...
}
这次就启动成功了，这是因为--inspect-brk是node的参数，
我们需要将npm script中的命令改成node调用。
3.4 stopOnEntry
我们还可以设置 .vscode/launch.json 的 configurations.stopOnEntry属性，
启动调试后会，会自动将断点停在代码的第一行。
{
...
"configurations": [
{
...
"stopOnEntry": true,
}
]
}
参考
扫一扫
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
