使用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.jsonconfigurations.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个配置项,runtimeExecutableruntimeArgsport

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.jsonconfigurations.stopOnEntry属性,
启动调试后会,会自动将断点停在代码的第一行。

{
    ...
    "configurations": [
        {
            ...
            "stopOnEntry": true,
        }
    ]
}

参考

 

THE END
< <上一篇
下一篇>>