[开源免费] NodeJS 调试能力扩展 - 可视化网络请求

[bugyaluwang]

在开发过程中，你有没有遇到过这样的困扰：使用 --inspect 选项打开的 Node.js 程序，居然不支持网络标签！这就导致我们在调试时无法像在浏览器中那样方便地查看网络请求信息。 不过别担心，今天我要给大家介绍一个超棒的项目——Node Network DevTools，它完美解决了这个问题！

什么是 node-network-devtools ？

node-network-devtools 是一个基于 CDP 协议的 nodejs 调试扩展程序，无需安装证书、配置代理等各种繁琐步骤，简单引入包体后，即可将 nodejs 发起的 axios 、got 等网络请求在 chrome devtools 上限制！

项目功能 ✨

• HTTP 网络请求展示：支持 http/https 请求的显示和自动跟踪
• websocket 监听：支持对 websocket 进行监听和消息显示
• 全版本 node 支持：对 node 版本无要求，无需升级到特定版本
• 超出官方的能力： 支持请求跟踪到源代码堆栈、支持进一步的 sourcemap 、支持请求全流程的跟踪，确保不遗落信息

Other

项目地址： https://github.com/GrinZero/node-network-devtools

预览：

[next2023]

🐂🍺 有空去用用

[ixoy]

还是直接抓包更快些
浏览器看更直观些，需要额外嵌入代码不方便。
Chromium ，Node.js 有讨论： https://issues.chromium.org/issues/353924015

[bugyaluwang]

@ixoy 哈哈，你看看 nodejs 那个 PR 的实现对照一下我的实现方式，那不是从我这出来的方案吗 😂 然后感觉你说的是不是有点矛盾，浏览器看直观和直接抓包有点冲突吧？

[lisxour]

@bugyaluwang 区别就是，官网可能会有更好更底层的 hook 方式，可以适应所有请求框架，但是自己写的得每个请求库去适配实现

[bugyaluwang]

@lisxour 可能还需要一些时间发展吧。现在官方提供的钩子，提供的基本信息太少了，什么堆栈的根本做不到。自己写的话，其实并不一定要每一个请求库都去适配。因为在早期版本中，所有的请求库都一定是通过 HTTP ，HTTPS 这两个库去封装的。所以我只需要去拦截这两个库做处理就好了。后来虽然又增加了一些 fetch ，undici ，但是目前来讲成本还不算太高。

[lizhenda]

有点厉害哦，准备试试！

[next2023]

按照 readme 安装后，启动失败。
报错了：
调试连接已关闭。原因：WebSocket 已断开连接准备就绪时，打开 DevTools 即可重新连接。

重新连接 DevTools

[bugyaluwang]

@next2023 可以截个图或提个 issue 吗，我立刻修。可恶。