如何使用Firebug或其他工具查看WS/WSS WebSocket请求内容？

Question

有没有一种方法可以查看Websocket流量？

仅在初始握手时可见Websocket头。

响应后，所有内容都消失了：

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

我已经尝试使用Firebug、Live Headers和Fiddler2来追踪交换，它们都在那里停止记录日志。

- Stevko

---

Fiddler更易于用于调试WebSocket。我最近在CodeProject上撰写了一篇文章，向您展示如何使用Fiddler调试/检查WebSocket流量。http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler - engineforce

Answer 1

尝试使用Chrome开发者工具，

1. 点击“网络”选项卡
2. 使用底部的过滤器仅显示WebSocket连接
3. 选择所需的WebSocket连接
4. 注意右侧的子选项卡中有“头部”，“预览”，“响应”等选项
5. 一旦数据开始传输，“WebSocket帧”子选项卡将出现。记录了所有来往数据，非常有信息量。

- Daniel Shields

---

我在2012年Google IO的最新金丝雀版中看到了这个。非常酷！ - Stevko

为了调试服务器端，我发现 https://github.com/kanaka/websockify 是一个非常有帮助的工具。我可以在 Python 代码中任何想要的位置插入自己的调试代码。它的基本功能是允许您隧道连接到任何 TCP 服务，以进一步增强您的调试体验。 - Daniel Shields

在左边有名称列，还有各种图像等等，如果您过滤WebSocket - 您将会看到套接字。当然，前提是它存在于该页面上。 - Dariux

我将引用一个用户评论（https://dev59.com/jW025IYBdhLWcg3w3J5H#W-DpnYgBc1ULPQZFAg3a），因为它可能对其他人有帮助：“Chrome Dev Tools在面板方面存在UI错误，这是解决方法 https://dev59.com/jlcP5IYBdhLWcg3wXIsy#45378852” - baptx

Answer 2

截至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监视器不可用:(

---

更新于2016-04-06

使用Firefox Dev Tools的Websocket Monitor插件，终于可以进行WebSocket调试了！它由Firebug开发团队开发，并且其源代码可以在这里找到。

---

更新于2015年10月28日

Jeff Griffiths，Firefox开发者工具产品经理：

平台支持今天已在夜间版中，这里正在开发原型插件：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 团队正在与 DevTools 集成，因此它将能够重用内置 DevTools 提供的功能。这意味着它将不再是一个独立的工具。您可以关注 https://bugzil.la/885508。

- Epoc

---

不兼容Firefox 57或更高版本。 - TweeZz

正在进行替换工作：https://github.com/janodvarko/webext-websocket-monitor/WebSocket和Socket.IO观察帧：https://discourse.mozilla.org/t/websocket-and-socketio-watch-frames/20653/2 - Peter Becich

Answer 3

Fiddler的当前版本可以正常处理WebSocket流量。请参见http://blogs.msdn.com/b/fiddler/archive/2011/11/22/fiddler-and-websockets.aspx。

了解如何在Log选项卡上放置数据，请参见http://blogs.telerik.com/fiddler/posts/13-06-04/what-s-new-in-fiddler-2-4-4-5。

要在WebSockets选项卡上显示数据，

您需要一个扩展程序（这将成为2.5版本内置功能）。目前，您可以获取当前的扩展程序。只需解压缩ZIP文件并将两个文件放入\Fiddler2\Scripts文件夹中，然后重新启动Fiddler。如果您在Fiddler的WebSessions列表中双击WebSocket会话，则WebSockets选项卡将出现。

- EricLaw

---

谢谢你的提示-是的，最新版的Fiddler确实显示了信息流动。可惜这些信息埋在日志文件中而不是在单独的选项卡中显示。 - Stevko

Firefox v45.0a2似乎无法通过Fiddler路由Web套接字（在阅读http://superuser.com/a/558831/70209之后，我认为这是因为Firefox不使用系统代理）。 @EricLaw-这是Fiddler Hook可以改进以适应的内容吗？ - mlhDev

@Matthew：Firefox 尝试使用 SOCKS 代理（而不是 HTTPS 代理）来处理 WebSockets。（也许可以尝试创建一个失败的虚假 SOCKS 代理设置？）FiddlerHook 已经废弃，将在 Fiddler 4.6.2 中被移除。 - EricLaw

Answer 4

有一个WebSocket Monitor插件可用于监控WebSocket连接的情况，该插件是Firefox开发人员工具的一部分。

安装插件后，打开Firefox开发人员工具并切换到“Web Sockets”选项卡。它将显示当前页面的WS帧流量。以下协议也有额外的支持：

• Socket IO
• SockJS
• WAMP
• Plain JSON

- Jan Odvarko

---

为什么选项卡没有出现？我也检查了选项，但是没有复选框可以启用该选项卡 :( - Rafael Moni

嗨，@Jan Odvarko，为什么不支持旧版本的Firefox？我看到你只支持版本> 45。 - Tan Mai Van

WebSocket监视器需要一些已经在Firefox 45中引入的平台API。 - Jan Odvarko

如果Web Sockets选项卡没有出现，很可能是因为扩展程序未正确安装。您可以尝试创建新的清新Firefox配置文件并重新安装。 - Jan Odvarko

不兼容Firefox 57版本或更高版本。 - TweeZz

Answer 5

不像其他在这里提到的选项那样舒适，但这是一个通用工具，可以在各种情况下帮助您：使用Wireshark。如果你对TCP有一些了解，你就可以解决其他工具无法解决（如意外断开连接等）的问题，因为它们在一个太高的级别上工作。你也可以（就像在Firebug之类的工具中一样）阅读实际的 WebSocket 消息。

Wireshark 的缺点是它在处理加密连接时相当麻烦。

试试看，我经常使用它来调试与 Python WebSocket 后端通信的 Rails 应用程序。

- jupp0r

Answer 6

使用Chrome开发者工具。

您将在“Frames”选项卡中看到数据发生变化。

- kiranvj

---

这个答案和顶部的那个是一样的。你考虑把截图添加到那个答案里面吗？ - Dan Dascalescu

Answer 7

我在以下链接中发布了关于使用Chrome和Wireshark调试WebSocket消息的更多详细信息：

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

- Arun Gupta

---

虽然这可能回答了问题，但最好在此处包含答案的基本部分，并提供参考链接。 - Adi Lester

谢谢你的提示！该博客有几个图像快照，详细解释了如何调试WebSocket消息，这就是为什么我包含了引用而不是引用的原因。 - Arun Gupta

Answer 8

在Firefox中，您可以打开开发者工具栏（Shift + F2），并在网络选项卡中查看WebSockets。您可以在选项卡底部使用过滤器（选择WebSockets的其他选项）。

- user570605

---

似乎你在谈论Chrome，而不是Firefox。 - Epoc

它在Firefox中，我刚刚检查过。 - user570605

我只能在Firefox Dev Tools中看到“101 Switching Protocols”HTTP响应（告诉客户端切换到WebSocket协议）。按下 Shift + F2 可以打开开发者工具栏，这基本上是一个控制台，与Firefox Dev Tools不同。 - Epoc