[FE] 使用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,
        }
    ]
}

---

参考

Launch configuration support for 'npm' and other tools