调试二进制WebSocket

Question

我正在尝试使用websockets调试Web应用程序以传递二进制数据。Chrome DevTools具有这个方便的网络选项卡，可以显示websocket框架...，只是显示了二进制框架，仅Binary Frame (Opcode 2)此而已。我不知道为什么在提供更多信息如此容易的情况下他们为什么会停下来。我什至从2年前就发现了对此功能的拉动请求。

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

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

理想情况下，可以通过chrome扩展来完成类似的事情，但是devtools扩展似乎只能捕获常规的网络请求。

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

更新：我设法使用调试器API对此进行了扩展。这需要创建自己的列出框架的UI，但最终它会按照我的期望工作。

Answer 1

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

更新/2019/03/devtools