使用vscode调试npm scripts
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,
}
]
}
参考