【发布时间】：2011-08-10 17:23:52
【问题描述】：
有没有一种方法或扩展可以让我观察通过 WebSocket 的“流量”？出于调试目的，我想查看客户端和服务器请求/响应。
【问题讨论】：
【发布时间】：2011-08-10 17:23:52
【问题描述】：
Chrome 开发者工具现在可以列出 WebSocket 帧，如果帧不是二进制的，还可以检查数据。
流程：
- 启动 Chrome 开发者工具
- 加载您的页面并启动 WebSocket 连接
- 点击网络标签。
- 从左侧列表中选择 WebSocket 连接（其状态为“101 Switching Protocols”。
- 点击消息子标签。二进制帧将显示长度和时间戳，并指示它们是否被屏蔽。显示的文本框架还包括有效负载内容。
如果您的 WebSocket 连接使用二进制帧，那么您可能仍希望使用 Wireshark 来调试连接。 Wireshark 1.8.0 添加了对 WebSockets 的解析器和过滤支持。可以在此other answer 中找到替代方案。
【讨论】：
-
你知道如何使用 Wireshark 来做到这一点吗？我从未真正使用过它，它似乎显示所有网络流量，并显示原始数据包。
-
您可以使用capture filters 将捕获限制在单个端口。或者，在您获得捕获后，您应该能够右键单击属于会话一部分的捕获帧上的任何一个，然后选择仅显示该会话的选项。
-
不幸的是，在 Windows 上通过 localhost 使用 WireShark 需要跳过障碍才能使其工作。见wiki.wireshark.org/CaptureSetup/Loopback
-
我最近在 CodeProject 上写了一篇文章，向您展示了如何使用 Fiddler 调试/检查 WebSocket 流量。 codeproject.com/Articles/718660/…
-
@NiCkNewman 是的，它是一个 7 位字段，指示有效负载的字节长度。但是，如果该字段的值是 126 或 127，那么接下来的 16 或 64 位分别是有效载荷的长度（以字节为单位）。请参阅规范中长度字段的描述：tools.ietf.org/html/rfc6455#section-5.2（很容易理解）。这有点奇怪，但它使短消息非常高效（只是一个 2 字节的标头）。
Chrome Canary 和 Chromium 现在具有 WebSocket 消息帧检查功能。以下是快速测试的步骤：
- 导航到WebSocket Echo demo，托管在websocket.org 网站上。
- 打开 Chrome 开发者工具。
- 点击Network，要过滤开发工具显示的流量，点击WebSockets。
- 在 Echo 演示中，单击 连接。在 Google Dev Tool 的 Headers 选项卡上，您可以检查 WebSocket 握手。
- 点击 Echo 演示中的发送按钮。
- 此步骤很重要：要在 Chrome 开发人员工具中查看 WebSocket 框架，请在名称/路径下单击 echo.websocket.org 条目，代表您的 WebSocket 连接。这会刷新右侧的主面板，并使 WebSocket Frames 选项卡显示实际的 WebSocket 消息内容。
注意：每次发送或接收新消息时，都必须通过单击左侧的 echo.websocket.org 条目来刷新主面板。
我还发布了steps with screen shots and video。
我最近出版的书The Definitive Guide to HTML5 WebSocket 也有一个专门的附录，涵盖了各种检查工具，包括 Chrome Dev Tools、Chrome net-internals 和 Wire Shark。
【讨论】：
-
在发布多个问题的复制和粘贴样板/逐字答案时要小心，这些往往会被社区标记为“垃圾邮件”。如果您这样做，则通常意味着问题是重复的，因此请将它们标记为这样。
-
感谢您的第 6 步！我知道网络选项卡中的 WebSockets 过滤器，但很沮丧，它似乎只捕获了我的前几条消息。你知道是否有办法让它知道在你打开标签之前打开的 websocket 连接？
-
布莱恩 - 我不相信你今天能做到。
-
@Howie 你不能用 Chrome 做到这一点。你可以使用 WireShark。我们的新书《HTML5 WebSocket 权威指南》也为您提供了 WireShark 的快速介绍。 amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/…
-
步骤 1 中的 websocket 链接现在已损坏。
如果您没有访问 websocket 的页面，您可以打开 Chrome 控制台并输入您的 JavaScript：
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }
这将打开网络套接字，以便您可以在网络选项卡和控制台中看到它。
【讨论】：
-
谢谢！另外：您打开的页面必须与您的 websocket 位于同一来源。如果您尝试在其他来源（甚至是新标签页）上打开 Chrome 开发工具，然后连接到您的 websocket，您将收到授权错误。
-
有办法解决这个问题吗？
其他答案涵盖了最常见的场景：观看框架的内容（开发者工具 -> 网络选项卡 -> 右键单击 websocket 连接 -> 框架）。
如果您想了解更多信息，例如哪些套接字当前处于打开/空闲状态或能够关闭它们，您会发现此网址很有用
chrome://net-internals/#sockets
【讨论】：
您有 3 个选项：Chrome（通过开发人员工具 -> 网络选项卡）、Wireshark 和 Fiddler（通过日志选项卡），但它们都是非常基本的。如果您的流量非常大或者每帧非常大，那么使用它们进行调试变得非常困难。
但是，您可以使用 Fiddler 和 FiddlerScript 来检查 WebSocket 流量，就像检查 HTTP 流量一样。该解决方案的几个优点是您可以利用 Fiddler 中的许多其他功能，例如多个检查器（HexView、JSON、SyntaxView）、比较数据包和查找数据包等。
请参阅我最近撰写的关于 CodeProject 的文章，该文章向您展示了如何使用 Fiddler（使用 FiddlerScript）调试/检查 WebSocket 流量。 http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler
【讨论】：
如果你想要更好的体验，我建议使用 Postman 来调试 WebSocket 请求。它已作为新功能发布。 https://stackoverflow.com/a/43754722/15988851
【讨论】：
Chrome 开发者工具允许查看在打开连接期间保持挂起的握手请求，但据我所知，您看不到流量。但是，例如，您可以sniff it。
【讨论】：
Chrome 版本 29 及更高版本的简短回答：
- 打开调试器，转到“网络”选项卡
- 使用 websocket 加载页面
- 点击来自服务器的升级响应的 websocket 请求
- 选择“框架”选项卡以查看 websocket 框架
- 再次点击websocket请求刷新帧
【讨论】：
-
这似乎可行，但如果您断开连接并重新连接到 websocket url（例如在websocket.org/echo.html），它会停止工作，在这种情况下您必须刷新页面！ :(
我使用了名为 Simple WebSocket Client v0.1.3 的 Chrome 扩展程序，由用户 hakobera 发布。它的使用非常简单，它允许在给定的 URL 上打开 websocket，发送消息并关闭套接字连接。非常简约。
【讨论】：
对于我开始使用的一个工具，我建议firecamp 它像Postman，但它也支持websockets和socket.io。
【讨论】：