Node+VSCode调试全面讲解

记在前边，总是搞混

• node.js是javascript的一种运行环境，是对Google V8引擎进行的封装，是一个服务器端的javascript的解释器。
• npm是node.js的包管理工具
• npx是node-modules/.bin/hexo g的简写形式(npx hexo g)

1. Node调试所需参数

--inspect

Node.js 进程开始侦听调试客户端

• 默认侦听127.0.0.1:9229
• 支持--inspect=[host:port]

--inspect-brk

Node.js 进程开始侦听调试客户端，并停在第一行

• 默认侦听127.0.0.1:9229
• 支持--inspect-brk=[host:port]

详情见：调试 - 入门指南 | Node.js

2. 调试npm scripts

2.1. 配置npm scripts

很多时候，项目运行的命令基本都放在了package.json.scripts中，开启调试只需要为node增加--inspect-brk参数即可，例如

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "debug": "node --inspect-brk=5858 index.js",
    "build": "node index.js"
  }
}

这里用--inspect-brk指定项目运行时监听的VSCode端口，需要与VSCode中launch.json.configurations.port配置一致

2.2. 配置VSCode

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "hexo g",
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "debug"],
      "port": 5858,
      "stopOnEntry": true
    }
  ]
}

• request 必须 launch:调试整个项目时，attach:调试单个文件
• runtimeExecutable 必须 配置为npm
• runtimeArgs 必须 配置npm的参数数组，[0]:固定值run-script，[1]:package.json.scripts中的值，实际结果就是在执行npm run debug
• port 必须 调试客户端运行的端口
• console 可选 使用VSCode内置终端
• stopOnEntry 可选 停在首行

3. 调试非node命令

例如，项目安装了hexo

npm install hexo

那么package.json.scripts使用如下内容，是否可以开启调试呢？

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo g --inspect-brk=5858"
  }
}

执行npm run build时，即运行hexo g --inspect-brk=5858。

此时你会发现VSCode的调试并没有正常连接，因为--inspect参数是属于node的

所以需要把hexo g转为node的形式，并附带--inspect参数，那么问题来了。

只看结果，过程不看版：

npx --node-arg=--inspect-brk=5858 hexo g

详细版：

3.1. 先插播一下npm包的全局安装

3.1.1. npm的{prefix}配置项

前缀配置，默认为包bin安装的位置。

• 在大多数系统上，为/usr/local
• 在Windows上，为%AppData%/npm
• 在Lixux系统上，为/usr/local/bin

  通过此命令查看配置npm config get prefix

3.1.2. 全局安装包逻辑

• npm会将包安装到{prefix}/lib/node_modules中
• npm会将包bin链接到{prefix}/bin中
• 如果未设置{prefix}，它将使用当前包的根目录
• 如果尚未在包中，则使用当前工作目录

  包和包bin的位置各系统可能存在差异，请使用下列命令查询

// 查看包全局安装路径
npm root -g
// 查看{prefix}路径
npm config get prefix

3.2. 重点来了，说下npm包的非全局安装

• npm会将包安装在这个项目的node_moduels目录下
• npm会将包bin链接到项目的node_moduels/.bin目录下

但此时在项目下执行命令你会发现，命令不存在

正确的写法应该是

./node_moduels/.bin/hexo g

这显然不是我们想要的，这时候有两种方式解决

1. npx 就是想解决这个问题，只需像下边这样调用就可以

   npx hexo g

2. 在package.json.scripts里直接使用hexo g。

   由于npm run时会自动增加node_module/.bin到当前命令所用的PATH变量中，详见：npm-run-script

我们在这里就要使用npx解决问题

这时仔细一想，发现不对啊，我不是需要给node设置--inspect参数才行吗，别急，npx有一个--node-arg参数
，答案呼之欲出。

npx --node-arg=--inspect-brk=5858 hexo g

So，package.json.scripts内容如下

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "debug": "npx --node-arg=--inspect-brk=5858 hexo g",
    "build": "hexo g"
  }
}

VSCode的配置不变

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "hexo g",
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "debug"],
      "port": 5858,
      "stopOnEntry": true
    }
  ]
}

点一下绿色的小三角，Debug起来吧！

补充一下

ERROR: --node-arg/-n can only be used on packages with node scripts.

报以上错误，不知道是我理解的有问题还是npx确实有bug，详情看这里npx -n on Windows broken since cmd-shim 3.x

可以追加./node_modules/.bin/临时解决

npx --node-arg=--inspect-brk=5858 ./node_modules/.bin/hexo g