Jioho 的博客

调试node程序工具对比

3/13/2021 调试

# 调试 node 程序

本文或许有点长，因为调试 node 真是折磨了很久，最后的当然也是找到了称心如意的工具，看下图！！

何为称心如意？

  1. 热更新
  2. console 查看输出的对象（命令行看 js 输出的对象真是噩梦）
  3. 方便调试，包括且不局限于：断点，运行单个文件，等...

上面的图看起来像是 chrome 控制台，但绝对不仅仅只是 --inspect-brk 打开的那个

感兴趣的可以看下下面一个个工具的对比，如果想直接达到上图的效果直接找到 ndb 的目录去把~

# 热更新代表 nodemon

优点

修改文件后，可以立刻更新
响应速度快

缺点

不支持断点调试
对对象输出不友好(只要嵌套多层，就会变成[Object])

# 安装

npm i nodemon -D
1

# package.json

"scripts": {
  "dev":"  ./src/index"
}
1
2
3

# 运行

npm run dev
1

# chrome devtools

这是网上说的最多的方式，文章全是 CV 的，这完全称不上调试好吗。。。只能说看一下变量还是挺方便的

优点

对象输出友好
支持断点调试(但是很鸡肋)

缺点

不支持热更新，修改代码后每次都要重新运行
不能自动打开调试界面，得手动打开

# 安装

无须安装

# 运行

node --inspect ./src/index.js #直接运行

#或
node --inspect-brk ./src/index.js #运行后立刻进入debugger模式
1
2
3
4

# 查看

运行 node 命令后，打开 chrome://inspect/#devices

等到 node 节点出现后，点击 inspect(每次重新运行，都得重新找到对应的节点 inspect，并不是在当前打开的控制台重新运行)

# 使用 vscode 调试

优点

支持断点调试
支持热更新
支持查看变量

缺点

虽然支持查看变量，可是每次都要打断点才能看到，不够 console 直观

启动方式如下：

  1. 打开 vscode 的调试面板，点击设置，将会自动生成 .vscode/launch.json 文件

  1. 默认是不支持热更新的，不过我们可以改用 nodemon 来启动 node 程序，让他支持热更新。这时候 nodemon 就需要全局安装了。

配置文件如下：
更多的配置可以看 https://go.microsoft.com/fwlink/?linkid=830387 (opens new window)

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "index",
      "restart": true, // 修改代码并保存后会自动重启调试
      "runtimeExecutable": "nodemon", // 用什么命令执行 app.js，这里设置为 nodemon
      "console": "integratedTerminal", // 当单击停止按钮或者修改代码并保存后自动重启调试，而 nodemon 是仍然在运行的，通过设置为 console 为 integratedTerminal 可以解决这个问题
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}\\src\\index.js"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 使用 devtool 调试

devtool 并不是说 chrome 浏览器，而且浏览器的控制台。

如果熟悉或者听说过 electron 的应该都清楚，electron 把前端的代码打包为一个桌面应用，底层依旧是浏览器，既然是浏览器，那就会有控制台。

所以 devtool (opens new window) 这个 npm 包非常聪明的把 devtool 打包了出来

更多说明看：github-devtool (opens new window)

优点

支持断点调试
支持热更新
支持查看变量
变量输出友好 支持 chrome 插件！！
支持查看 node 性能！！！

缺点

😭 字太小！！！
network 面板并不能用

# 安装

因为依赖 electron ，安装包非常大，还好 cnpm 已经收录了这个包，基本上都是要 cnpm 安装

npm i devtool

#网络不好的用 cnpm
cnpm i devtool
1
2
3
4

# 运行

# 由于我没装全局，而是装项目中了，所以用 npx 启动
npx devtool ./src/index.js --watch

# 也可以把命令加入到 package.json 文件中
# "dev":"devtool ./src/index.js --watch"
npm run dev

#已经全局安装的
devtool ./src/index.js --watch
1
2
3
4
5
6
7
8
9

watch 就是热更新的意思。

# devtool 使用 chrome 插件

devtool 很多配置我就不细说，详细的看 GitHub 最清楚，记录一下用插件的情况

  1. 根目录新建 .devtoolrc。这样 devtool 会自动读取配置（用命令行设置配置，或者指定配置文件都行）
{
  "devToolsExtensions": ["./chrome-devtools-zerodarkmatrix-theme/theme-extension/"]
}
1
2
3
  1. 找插件

看到 devToolsExtensions 就是 chrome 插件列表，我以改 devtool 样式为例 zero-base-themes 是应用商店的一套样式

我们要找到插件的源码,通常插件都是开源的 mauricecruz/chrome-devtools-zerodarkmatrix-theme (opens new window)

下载下来的源码，贪图方便直接放根目录了。插件入口都是有manifest.json 文件的，所以就找到了 theme-extension 目录

  1. 运行 devtool

这次运行还没生效，因为毕竟是样式插件，所以还得额外的开配置 Enable Developer Tools experiments

打开控制台的设置，找到 Experiments>Allow custom UI themes 打勾，如果在Experiments 没看到，连按 5 下 shift 召唤隐藏选项即可。（毕竟这是electron的控制台，所以隐藏选项早就都开了）

  1. 重启 devtool

可以看到样式已经被修改了，运行时也会告诉你那些插件已经被加载了

# 主角 ndb

优点

支持断点调试
支持热更新
支持查看变量
变量输出友好 支持查看 node 性能！！！
可以用鼠标控制控制台缩放（字体可以变大了）
阉割版编辑器（写代码没智能提示）
将会支持 network 面板issues (opens new window)
面板改的代码会同步保存到本地，包括新建文件也 ok
自动识别 package.json 的 script 命令
代码修改后 ndb 工具会同步更新
谷歌出品，后续应该会提供更多的支持

缺点

不支持热更新（不过有运行按钮，也可以右键运行单个文件）

# 安装

以下的步骤我忘记了需不需要 python 支持，截图没截到，不过我还是装了 可以根据后面的提示判断

npm i ndb -g
1

第一次运行，报错了，让我安装 python。不过这个错误是因为一个 node-gyp.js 的库报错的，后面还有他的锅，所以 python 应该可以忽略

最后安装如果出现了这个，那就说明 OK 了。我多装了几次后，都不报错了。。我服了

# 记录下 python 安装把

下载地址：

https://www.python.org/downloads/ (opens new window)

安装完应该要重启一下

# 使用感受和推荐度

每个工具都各有千秋和弊端，挑选适合自己的，才是最好的

以下的仅仅是个人观点，不喜勿喷~

如果有更好的工具/更好的改进方法，请务必告诉我一声！

# 第一名. ndb

首推 ndb，因为最起码是谷歌在维护的项目，network 面板看情况也快了，不能热更新的问题其实也不大，最多就重新点击一下运行嘛，还能接受

最重要的是，可以界面整体缩放，字体不会太小。。。

# 第二推荐. devtool

同为 Chromium 的控制台，热更新的速度和支持插件这点真的无敌！只可惜就是不能看 network 请求（没实际验证过，印象中不能），字体太小真的是硬伤

为了字体的问题，我试过改样式插件的代码，看过 elector 的配置，都无济于事，大屏幕看还好，要是笔记本屏幕开发，那字体小的脸得贴着屏幕才能看到。

# 第三推荐. vscode

vscode 对调试这块非常友好，加上nodemon热更新加持，只可惜看打印的对象真的太难受了，如果用 node 写简单的爬虫，打印 html 节点的时候，要么看不到，用 JSON.stringify() 处理后是可以看到了，可是原型链全都显示出来，几个屏幕都看不完

每次想看个变量而已，都得打断点，然后在手动下一步，实在是差了点意思（console 一眼可以看到想要的东西，如果不对继续改）

# 第四推荐 nodemon

因为 --inspect 体验感实在是太差了，所以 nodemon 还不至于最后

Last Updated: 7/4/2022, 3:54:47 PM