如何使用Firebug或其他方式查看WS / WSS Websocket请求内容？

有没有办法查看Websocket流量？

在初始握手中仅可见Websocket标头。

响应后一切都消失了：

Connection  Upgrade
Sec-WebSocket-Accept    EQqklpK6bzlgAAOL2EFX/nx8bEI=
Upgrade WebSocket

我已经尝试过Firebug，Live Headers和Fiddler2来跟踪交换，但它们都停止在那里记录。

尝试使用Chrome的开发人员工具，

1. 点击“网络”标签
2. 使用底部的过滤器仅显示WebSocket连接），
3. 选择所需的Websocket连接，
4. 请注意，右侧有“标题”，“预览”，“响应”等子标签，
5. 一旦数据开始流动，将出现“ WebSocket框架”子选项卡。记录了任一方向上的所有数据。非常丰富。

从2014年9月3日开始，似乎可以在FireBug中进行WebSocket调试：https : //getfirebug.com/wiki/index.php/Firebug_2.0_Roadmap#Feature_Overview。但是没有提到发布日期。

更新2019-09-19

请参阅这篇有趣的Mozilla Hacks文章。

更新2017-11-24 Firefox中的插件系统已更改。Websocket Monitor在撰写本文时不可用:(

更新2016-04-06

终于可以使用Firefox开发工具的Websocket Monitor插件在Firefox中进行WebSocket调试！它是由Firebug开发团队开发的，其资源可以在这里找到。

更新2015-10-28

Firefox开发人员工具产品经理Jeff Griffiths：

平台支持在今天晚上进行，并且正在这里开发原型附件：https : //github.com/firebug/websocket-monitor

https://twitter.com/canuckistani/status/659399140590284800

Firefox Bugzilla上的相关功能请求：https ://bugzilla.mozilla.org/show_bug.cgi ? id = 1203802

截至2015-04-08更新

Fiddler 4.5现在可以本地检查WebSocket流量。

更新2014-09-11

关于此评论对Firebug问题跟踪器的：

目前，Firebug团队正在努力将Firebug与DevTools集成在一起，因此它不在人们的视野中。这意味着它将能够重用内置DevTools提供的功能。因此，您可以关注https://bugzil.la/885508。

当前版本的Fiddler可以很好地与WebSocket通信配合使用。参见http://blogs.msdn.com/b/fiddler/archive/2011/11/22/fiddler-and-websockets.aspx

请参阅http://blogs.telerik.com/fiddler/posts/13-06-04/what-s-new-in-fiddler-2-4-4-5了解如何将数据放在Log标签。

要在“ WebSockets”标签上显示数据，

您需要一个扩展程序（该程序将在2.5版中内置）。现在，您可以获取当前位。只需提取ZIP并将两个文件放入\Fiddler2\Scripts文件夹中，然后重新启动Fiddler。如果在Fiddler的WebSessions列表中双击WebSocket会话，则将显示WebSockets选项卡

有WebSocket监控器-针对Firefox的开发工具的扩展，可以用来监测WebSocket连接

安装扩展程序后，打开Firefox开发人员工具并切换到“ Web套接字”面板。它显示当前页面的WS框架流量。对以下协议有额外的支持：

• 插槽IO
• SockJS
• WAMP
• 纯JSON

不像这里提到的其他选项那样舒适，但是可以在各种情况下为您提供帮助的通用工具：使用wireshark。掌握了有关TCP的一些知识之后，您就可以调试提到的其他工具无法解决的问题（意外断开，...），因为它们的工作水平过高。您还可以（就像在Firebug中一样）阅读实际的websocket消息。

Wireshark的缺点是使用加密连接比较麻烦。

试试看，我一直使用它来调试与Python websocket后端通信的Rails应用。

我在以下位置发布了有关使用Chrome和Wireshark调试WebSocket消息的更多详细信息：

https://blogs.oracle.com/arungupta/entry/logging_websocket_frames_using_chrome

使用Chrome开发人员工具

您将在“框架”选项卡中看到数据被更改。

在firefox中，您可以打开开发人员工具栏（Shift + F2），然后在“网络”标签中查看websocket。您可以在标签底部使用过滤（对于websocket，请选择“其他”）。