vscode调试npm script

背景

想在vscode中调试npm run build这样的scripts，例如想断点查看webpack构建过程中某个插件的工作过程。 例如，工程目录：

|--package.json

|--webpack.config.js

|--dev.js

package.json:

"scripts": {
    "dev": "node dev.js",
    "webpack": "webpack",
},

dev.js:

const webpack = require('webpack')
const webpackConfig = require('./webpack.config')
webpack(webpackConfig)

也就是npm run dev就相当于npm run webpack, 一个是运行webpack命令启动项目，一个是在dev.js中用webpack api启动webpack. 二者效果等价。

方案

方案一，npm

按照vscode官网的launch.json配置：

{
    "type": "node",
    "request": "launch",
    "name": "npm scripts",
    "cwd": "${workspaceFolder}",
    "runtimeExecutable": "npm", // 这里是npm
    "runtimeArgs": [
      	"--inspect-brk=9229",
        "run-script",
        "webpack"
    ],
    "console": "integratedTerminal",
    "port": 9229,
},

会发现，无法实现断点，得到一个超时的错误弹窗：

换一种方式，改为webpack api方式启动：

{
    "type": "node",
    "request": "launch",
    "name": "npm dev",
    "cwd": "${workspaceFolder}",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "--inspect-brk=9229",
        "run-script", 
        "dev" // 你的scripts的参数
    ],
    "console": "integratedTerminal",
    "port": 9229
}

但是此种方式需要scripts中配置相互对应的端口号： package.json:

...
"scripts": {
    "dev": "node --inspect-brk=9229 dev.js", // 注意这里加了--inspect-brk=9229，和launch.json中port: 9229呼应
},
...

发现此时可以断点。

二者的区别在于，一个是执行了工程下的dev.js脚本启动的项目。一个是执行了node_modules/.bin/webpack启动的项目。而前者可以断点，后者不能断点。

方案二，node

既然npm run webpack 执行的是node_modules/.bin/webpack, 那么换种方式执行，修改runtimeExecutable为node：

{
    "type": "node",
    "request": "launch",
    "name": "node bin",
    "cwd": "${workspaceFolder}",
    "runtimeExecutable": "node", // 这里为node
    "runtimeArgs": [
        "--inspect-brk=9229",
        "${workspaceFolder}/node_modules/.bin/webpack", // 指到真正的js上
    ],
    "console": "integratedTerminal",
    "port": 9229
},

发现也可以断点。

结论

• 如果你的npm script 是运行的本地的scripts，方案一中的配置一通常可以断点调试。
• 如果你的npm script 运行的是node_modules下的文件（例如，babel, webpack, dx 等脚本），方案一中的配置一往往会得到一个超时的弹窗提示，并且不能断点调试。
• 所有的npm script都可以改为node 执行脚本的方式。想省心点可以选择这种配置方式（参考上面的方案二中的配置）

Reference

Node.js debugging in VS Code: code.visualstudio.com/docs/nodejs…