调试node程序工具对比

最新推荐文章于 2024-09-02 09:16:15 发布

Jioho_

最新推荐文章于 2024-09-02 09:16:15 发布

阅读量592

点赞数

分类专栏：前端开发工具文章标签： nodejs 调试工具

本文链接：https://blog.csdn.net/jioho_chen/article/details/115288689

版权

前端同时被 2 个专栏收录

68 篇文章 8 订阅

订阅专栏

开发工具

48 篇文章 2 订阅

订阅专栏

调试 node 程序

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

何为称心如意？

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

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

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

热更新代表 nodemon

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

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

安装

npm i nodemon -D

package.json

"scripts": {
  "dev":"  ./src/index"
}

运行

npm run dev

chrome devtools

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

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

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

安装

无须安装

运行

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

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

查看

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

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

使用 vscode 调试

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

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

启动方式如下：

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

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

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

{
  // 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"
    }
  ]
}

使用 devtool 调试

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

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

所以 devtool 这个 npm 包非常聪明的把 devtool 打包了出来

更多说明看：github-devtool

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

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

安装

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

npm i devtool

#网络不好的用 cnpm
cnpm i devtool

运行

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

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

#已经全局安装的
devtool ./src/index.js --watch

watch 就是热更新的意思。

devtool 使用 chrome 插件

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

根目录新建 .devtoolrc。这样 devtool 会自动读取配置（用命令行设置配置，或者指定配置文件都行）

{
  "devToolsExtensions": ["./chrome-devtools-zerodarkmatrix-theme/theme-extension/"]
}

找插件

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

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

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

运行 devtool

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

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

重启 devtool

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

主角 ndb

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