调试二进制Websocket

Question

我正在尝试使用websocket调试Web应用程序以传递二进制数据。 Chrome DevTools具有这个方便的网络选项卡，可以显示websocket框架……除了二进制框架外，它只显示Binary Frame (Opcode 2)，仅此而已。我不知道为什么在提供更多信息如此容易的情况下他们为什么会停下来。我什至发现2年前的pull request for this feature。

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

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

理想情况下，Chrome扩展程序可以完成类似的工作，但是devtools扩展程序似乎只能捕获常规的网络请求。

另一种替代方法是使用Wireshark，但这需要SSL密钥日志，然后没有清晰的文档说明如何使自定义解剖器解析SSL解码器的输出而不是原始TCP数据（这里有question about it没有答案）。此外，我有大量的JS代码用于解析二进制数据，将所有内容转换为LUA会很痛苦。

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

Answer 1

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

updates/2019/03/devtools