在Google Chrome中debuggingWebSocket

有没有办法或扩展，让我看通过WebSocket的“交通”？ 为了debugging的目的，我想看到客户端和服务器的请求/响应。

Answer 1

Chrome开发人员工具现在可以列出WebSocket框架，并且在框架不是二进制的情况下也可以检查数据。

处理：

1. 启动Chrome开发人员工具
2. 加载您的页面并启动WebSocket连接
3. 点击networking标签 。
4. 从左边的列表中selectWebSocket连接 （它将具有“101交换协议”的状态。
5. 单击框架子选项卡。 二进制框架将显示一个长度和时间戳，并指出是否被屏蔽。 文本框架将显示也包括有效载荷内容。

如果您的WebSocket连接使用二进制帧，那么您可能仍然希望使用Wireshark来debugging连接。 Wireshark 1.8.0增加了对WebSocket的parsing和过滤支持。 在这个其他答案中可以find另一种方法。

Answer 2

Chrome Canary和Chromium现在具有WebSocket消息帧检查function。 以下是快速testing的步骤：

1. 导航到websocket.org站点上的WebSocket Echo演示 。
2. 开启Chrome开发者工具。
3. 点击networking ，然后过滤开发工具显示的stream量，点击WebSockets 。
4. 在回声演示中，单击连接 。 在Google Dev Tool的Headers选项卡上，您可以检查WebSocket握手。
5. 点击回声演示中的发送button。
6. 这一步很重要 ：要查看Chrome开发人员工具中的WebSocket框架，请在Name / Path下单击echo.websocket.org条目，表示您的WebSocket连接。 这将刷新右侧的主面板，并使WebSocket Frames选项卡显示实际的WebSocket消息内容。

注意 ：每次发送或接收新消息时，都必须通过单击左侧的echo.websocket.org条目来刷新主面板。

我还公布了屏幕截图和video的步骤 。

我最近出版的“HTML5 WebSocket权威指南”也有专门的附录，涵盖了各种检测工具，包括Chrome开发工具，Chromenetworking内部设备和Wire Shark。

Answer 3

他们似乎不断改变Chrome中的东西，但这是现在的工作:-)

• 首先，你必须点击红色的loggingbutton，否则你什么也得不到。

• 我从来没有注意到WS之前，但它过滤掉networking套接字连接。

• select它，然后你可以看到会显示错误消息等的帧。

Answer 4

其他答案涵盖了最常见的情况：观看帧的内容（开发工具 – >networking选项卡 – >右键单击websocket连接 – >帧）。

如果你想知道更多的信息，比如哪些套接字当前打开/空闲或者能够closures它们，你会发现这个URL有用

 chrome://net-internals/#sockets 

Answer 5

如果您没有正在访问WebSocket的页面，则可以打开Chrome控制台并在以下位置inputJavaScript：

 var webSocket = new WebSocket('ws://address:port'); webSocket.onmessage = function(data) { console.log(data); } 

这将打开Web套接字，以便您可以在networking选项卡和控制台中看到它。

Answer 6

你有3个选项：Chrome（通过开发工具 – >networking标签），Wireshark和Fiddler（通过日志标签），但他们都非常基本。 如果你的stream量很大，或者每个帧都非常大，那么使用它们进行debugging就变得非常困难。

但是，您可以使用FiddlerScript和FiddlerScript来检查WebSocketstream量，就像您考虑HTTPstream量一样。 这个解决scheme的一些优点是可以利用Fiddler中的许多其他function，例如多个检查器（HexView，JSON，SyntaxView），比较数据包和查找数据包等。

请参考我最近编写的关于CodeProject的文章，向您展示如何使用Fiddler（使用FiddlerScript）debugging/检查WebSocketstream量。 http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Answer 7

Chrome开发人员工具允许查看在打开的连接期间保持挂起状态的握手请求，但根据我所知，您看不到stream量。 但是，你可以嗅探它 。

Answer 8

我使用了由用户hakobera发布的名为Simple WebSocket Client v0.1.3的 Chrome扩展。 它的使用非常简单，它允许在给定的URL上打开websocket，发送消息并closures套接字连接。 这是非常简约的。

Answer 9

Chrome版本29及以上的简短答案：

1. 打开debugging器，转到选项卡“networking”
2. 用websocket加载页面
3. 点击服务器的升级响应的websocket请求
4. select选项卡“框架”来查看websocket框架
5. 再次单击websocket请求来刷新帧