调试node程序工具对比

调试 node 程序

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

何为称心如意?

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

上面的图看起来像是 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 直观

启动方式如下:

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

  1. 默认是不支持热更新的,不过我们可以改用 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 最清楚,记录一下用插件的情况

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

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

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

下载下来的源码,贪图方便直接放根目录了。插件入口都是有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
面板改的代码会同步保存到本地,包括新建文件也 ok
自动识别 package.json 的 script 命令
代码修改后 ndb 工具会同步更新
谷歌出品,后续应该会提供更多的支持

缺点
不支持热更新(不过有运行按钮,也可以右键运行单个文件)

安装

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

npm i ndb -g

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

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

记录下 python 安装把

下载地址:

https://www.python.org/downloads/

安装完应该要重启一下

使用感受和推荐度

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

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

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

第一名. ndb

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

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

第二推荐. devtool

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

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

第三推荐. vscode

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

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

第四推荐 nodemon

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

一段小尾巴: Jioho/调试node程序工具对比

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值