0%

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
请我喝杯咖啡吧 Coffee time !