time: 2020.12.22
update: 2021-04-02 10:48:52
author: heyunjiang
通常我们项目开发,调试有如下三种方法
- console.log
- node debugger、node inspector、vscode
- 测试驱动开发(tdd | bdd)
直接在 nodejs 代码中插入 debugger 是没有效果的,本文着重学习第二点,而 debug 又有三种方式
- 直接通过 cmd 工具调试 nodejs,调试命令需要自己输入,使用不是太方便
- 使用 chrome 调试:在 cmd 中 inspect 启动项目并打断点之后,在浏览器中输入 chrome://inspect 来启动浏览器调试
- 使用编辑器调试:vscode 中
command shift D
进入调试模块,并通过配置项目项目的 launch.json 配置启动项目,即可使用编辑器自带的 nodejs 调试工具
使用 node inspect node.js
启动,过程中使用如下命令输入
- cont, c:继续执行,跳过当前 breakpoint,类似 f8
- next, n:单步执行下一步,类似 f10
- step, s:单步进入
- out, o:单步退出
- pause:暂停执行代码
- .exit:退出调试
- setBreakpoint('script.js', 1, 'num < 4'): 在 script.js 文件中,第一行,当 num < 4 时会中断
- watch?
- run, restart, kill?
nodejs v8 检查器允许 chrome 开发者工具和 nodejs 实例相连,以便进行调试和性能分析。
- 启动 nodejs 应用:
node inspect hello.js
- 浏览器导航输入
chrome://inspect
打开工具栏 - 选择对应程序调试:在 Remote Target 中,选择对应 nodejs 应用,点击
inspect
即可打开调试小窗口 - f8, f10 调试,并且小窗口会加载源码
- 切换到调试模式:选择左侧工具栏-调试,也就是小虫子,或者输入
command shift D
- 添加调试配置:点击调试按钮右侧的 select 框,选择目标项目添加配置,打开
launch.json
配置文件 - 选择 nodejs 调试:选择 nodejs 调试之后,在 launch.json 中会增加一条配置,注意修改目标启动文件地址
- 代码中插入 debugger,或者对应行前面点击添加小红点
- 点击调试旁边的绿色启动按钮,即可进入调试代码
launch.json 环境变量
- workspaceFolder:当前项目目录
- file:launch.json 所在的目录
使用 vscode 调试模式,会在目标项目下生成 .vscode 目录,目录下有 launch.json 配置文件,描述的就是调试相关信息,这里学习分析一下。
基本格式如下(这里采用的是 npm 启动命令)
// npm 启动
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"cwd": "${workspaceFolder}/",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"args": [],
"port": 9229
}
]
}
// 对应目录的 package.json 配置
"scripts": {
"debug": "node inspect ./node_modules/@vue/cli-service/bin/vue-cli-service.js build",
"build": "vue-cli-service build",
},
参数分析
- type: node 表示在 node 环境,如果是 php 环境则修改为 php,浏览器环境则为 chrome
- request: launch 表示新启应用调试,attach 表示链接已经启动的程序来调试
- runtimeExecutable:表示使用 npm 命令启动
- runtimeArgs:启动的环境变量参数,按顺序拼接
- args: 程序启动参数,与 runtimeArgs 不同的是,args 不用作环境变量参数
- port: v8 监视器启动的 websocket 监听端口
- cwd: 指定目录
注意:
- 通过非 node 命令启动,不方便增加 inspect 参数,需要在 vue-cli-service bin 入口文件中,首行修改为 #!/usr/bin/env node inspect
- 通过 node 命令启动,需要指明 inspect
- 多个配置只有第一个会起效?
- 如果没有启动 inspect,将不会有输出 console.log
上面三种调试方法,都是需要指定调试的入口文件的。而我的 webpack 项目,是通过 npm 启动的,引用的 node_modules 下的 webpack 资源,这种情况应该怎么调试呢?
是否需要独立在 webpack 项目中启动调试模式?不需要
通常我们的项目是通过 npm 启动,比如 webpack
或 vue-cli-service build
,当前命令内部调用当前 node_modules 目录下对应的资源,如果我们想 在 npm 模式以调试模式启动,有2种方法
- 修改命令入口
node inspect ./node_modules/@vue/cli-service/bin/vue-cli-service.js build
- 修改资源文件启动配置项
#!/usr/bin/env node inspect
2种方式都可以启动调试模式
- 核心模块:nodejs 调试,是使用了 v8 检查器,v8 检查器提供核心能力,默认启动 websocket 并监听 9229 端口
- 协议通信:基于 chrome 开发者工具协议,实现与 chrome、vscode 调试通信
- 中断处理:开发者入侵代码设置断点或通过工具设置之后,即可控制 js 代码执行是否中断
- webpack 能够调试,是因为它本身是 commonjs 可执行代码,当然可以使用 node 调试。那 vue 项目,如何调试 vue 呢?因为 vue 本身是打包后的代码,那也只能调试打包后的结果
- webpack 能通过调用 bin/webpack.js 来启动调试,vue-cli-service 能调试 webpack 吗?能,入口设置为 vue-cli-service, webpack 中打断点就好了
狼叔:如何正确的学习Node.js
vscode launch.json 开发
nodejs 调试原理
vscode 官网调试 nodejs