在Google Chrome中调试WebSocket

Question

有没有一种方法或扩展可以让我观看通过WebSocket的“流量”？出于调试目的，我想查看客户端和服务器的请求/响应。

Answer 1

Chrome开发人员工具现在可以列出WebSocket框架，如果框架不是二进制的，还可以检查数据。

处理：

1. 启动Chrome开发者工具

2. 加载页面并启动WebSocket连接

3. 单击网络选项卡。

4. 从左侧列表中选择WebSocket连接（其状态为“ 101交换协议”。

5. 单击消息子选项卡。二进制帧将显示长度和时间戳，并指示是否被遮罩。文本框将显示还包括有效载荷内容。

如果您的WebSocket连接使用二进制框架，那么您可能仍将希望使用Wireshark调试连接。Wireshark 1.8.0添加了对WebSocket的解剖器和过滤的支持。在另一个答案中可以找到替代方法。

Answer 2

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

1. 导航到websocket.org网站上托管的WebSocket Echo演示。

2. 打开Chrome开发者工具。

3. 单击“ 网络”，然后单击WebSockets以过滤开发工具显示的流量。

4. 在Echo演示中，点击连接。在Google Dev Tool的Headers选项卡上，您可以检查WebSocket握手。

5. 单击Echo演示中的发送按钮。

6. 此步骤很重要：要在Chrome开发者工具中查看WebSocket框架，请在“名称/路径”下单击代表您的WebSocket连接的echo.websocket.org条目。这将刷新右侧的主面板，并使“ WebSocket框架”选项卡显示实际的WebSocket消息内容。

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

我还通过屏幕截图和视频发布了步骤。

我最近出版的书《 HTML5 WebSocket权威指南》也有专门的附录，涵盖了各种检查工具，包括Chrome开发工具，Chrome网络内部程序和Wire Shark。