Chrome Web Inspector Web Socket 调试答案

【问题标题】：Chrome Web Inspector Web Socket DebuggingChrome Web Inspector Web Socket 调试
【发布时间】：2012-02-15 16:32:30
【问题描述】：

我可以使用 Google Chrome Web Inspector 中的“网络”标签来调试网络流量（AJAX 请求等）。我可以轻松检查传输的数据。但是 Websocket 连接只显示为

Request URL:ws://localhost/...
Request Method:GET
Status Code:101 Switching Protocols
...

而且我看不到传输的数据。 Google Chrome 中是否有任何内置功能来检查传输的数据？还是我需要使用 Wireshark？

PS：我使用的是最新的稳定版本 (16.0.912.75)。如果更新的版本（beta/dev）有这个功能，那就太好了。

【问题讨论】：

【解决方案1】：

Chrome 和 Chromium 现在具有 WebSocket 消息帧检查功能。以下是快速测试它的步骤：

导航到WebSocket Echo demo，托管在websocket.org 网站上。
打开 Chrome 开发者工具。
点击Network，启用filter（开发工具顶部左起第三个图标）过滤开发者工具显示的流量，然后点击 WebSockets。
在 Echo 演示中，单击连接。在 Google Dev Tool 的 Headers 选项卡上，您可以检查 WebSocket 握手。
点击 Echo 演示中的发送按钮。
要在 Chrome 开发人员工具中查看 WebSocket 框架，请在名称下单击代表您的 WebSocket 连接的条目。这会刷新右侧的主面板，并使 WebSocket Frames 选项卡显示实际的 WebSocket 消息内容。

【讨论】：

在发布多个问题的复制和粘贴样板/逐字答案时要小心，这些往往会被社区标记为“垃圾邮件”。如果您这样做，则通常意味着问题是重复的，因此请标记它们。
谢谢你，凯夫。顺便说一句，它是否也适用于 cmets... ;-)
我认为 Fiddler 更容易用于调试 WebSocket。我最近写了一篇关于 CodeProject 的文章，向您展示了如何使用 Fiddler 调试/检查 WebSocket 流量。 codeproject.com/Articles/718660/…
Chrome 开发工具在这里不再有“Websocket Frames”选项卡：/ 有一个“Frames”选项卡，但无论发送多少 websocket 消息或发送多少消息，它始终是空的有时我单击左侧的名称/路径条目。我做错了什么？
@nzifnab 不为空。您可以在框架选项卡中移动 splitter 以查看框架列表：

【解决方案2】：

经过更多研究，我在这里发现了一个重复的问题：Debugging WebSocket in Google Chrome

Chrome 不支持查看当前稳定版本的流量。我需要使用 Wireshark。

【讨论】：

【解决方案3】：

另一个想法，对于简单的 Web 套接字测试和轻量级，使用 Chrome 插件“Simple Web-socket。我只想检查是否可以建立连接。在 Chrome 插件之后”Simple Web-socket（链接：@987654321 @)" 像魅力一样工作。见图片。

【讨论】：