调试二进制 websocket

Posted 2023-02-16

【中文标题】调试二进制 websocket

【英文标题】：Debugging binary websockets

【发布时间】：2018-09-02 19:29:14

【问题描述】：

我正在尝试使用 websockets 来调试 Web 应用程序以传递二进制数据。 Chrome DevTools 有这个方便的网络选项卡，可以显示 websocket 帧......除了二进制帧，它只是说Binary Frame (Opcode 2)，就是这样。我不知道他们为什么会停下来，因为提供更多信息是如此容易。我什至找到了两年前的pull request for this feature。

无论如何，我正在寻找替代品。我还想为二进制数据添加一些自定义解析逻辑。

到目前为止，我找到的最佳解决方案 - 取消停靠 devtools 窗口，为 devtools 打开另一个 devtools（在元素选项卡中按 Ctrl+Shift+I），导航到网络选项卡的源文件，在该行放置一个断点设置框架的文本内容，并在编辑断点菜单中添加JS代码来修改局部变量。我得到了这样的东西，它非常完美，但是设置起来很麻烦，并且很难与更复杂的解析代码一起使用。

理想情况下，这样的事情应该由 chrome 扩展完成，但似乎 devtools 扩展只能捕获常规网络请求。

另一种选择是使用 Wireshark，但这需要 SSL 密钥日志，然后没有明确的文档说明如何使自定义解析器解析 SSL 解码器的输出而不是原始 TCP 数据（这里有一个 question about it 没有回答）。另外，我有大量的解析二进制数据的JS代码，把所有的东西都翻译成LUA会很痛苦。

更新：我设法使用debugger API 对此进行了扩展。这需要制作您自己的列出框架的 UI，但最终它可以按我的意愿工作。

【问题讨论】：

您介意分享您的扩展程序的链接吗？

@NikolayKostov 当然，Chrome extension link / Github link。

@riv：它是如何工作的？我安装了它，但我没有看到一种明显的方法可以访问 Chrome 网上商店中的屏幕截图中显示的视图。

@O.R.Mapper 只需点击 Chrome 工具栏上的图标即可。

【参考方案1】：

Chrome 74 中的 DevTools 支持开箱即用的二进制视图

updates/2019/03/devtools

【讨论】：

有没有办法拼接与特定 websocket 相关的所有二进制消息？我正在尝试关注 WS 流，但鉴于二进制数据在消息之间全部拆分，因此很难做到这一点。