在Google Chrome中调试WebSocket
Answers:
Chrome开发人员工具现在可以列出WebSocket框架，如果框架不是二进制的，还可以检查数据。
处理：
- 启动Chrome开发者工具
- 加载页面并启动WebSocket连接
- 单击网络选项卡。
- 从左侧列表中选择WebSocket连接（其状态为“ 101交换协议”。
- 单击消息子选项卡。二进制帧将显示长度和时间戳，并指示是否被遮罩。文本框将显示还包括有效载荷内容。
如果您的WebSocket连接使用二进制框架，那么您可能仍将希望使用Wireshark调试连接。Wireshark 1.8.0添加了对WebSocket的解剖器和过滤的支持。在另一个答案中可以找到替代方法。
Chrome Canary和Chromium现在具有WebSocket消息框架检查功能。以下是快速测试它的步骤：
- 导航到websocket.org网站上托管的WebSocket Echo演示。
- 打开Chrome开发者工具。
- 单击“ 网络”，然后单击WebSockets以过滤开发工具显示的流量。
- 在Echo演示中，点击连接。在Google Dev Tool的Headers选项卡上，您可以检查WebSocket握手。
- 单击Echo演示中的发送按钮。
- 此步骤很重要：要查看Chrome开发者工具中的WebSocket框架，请在“名称/路径”下单击代表您的WebSocket连接的echo.websocket.org条目。这将刷新右侧的主面板，并使“ WebSocket框架”选项卡与实际的WebSocket消息内容一起显示。
注意：每次发送或接收新消息时，都必须通过单击左侧的echo.websocket.org条目刷新主面板。
我最近出版的书《 HTML5 WebSocket权威指南》也有专门的附录，涵盖了各种检查工具，包括Chrome开发工具，Chrome网络内部程序和Wire Shark。
他们似乎在不断地改变Chrome中的功能，但是现在这是可行的方法:-)
首先，您必须单击红色的记录按钮，否则您将一无所获。
我以前从没注意到，
WS但它过滤掉了Web套接字连接。选择它，然后您将看到显示错误消息等的框架。
如果没有访问websocket的页面，则可以打开Chrome控制台并在以下位置键入JavaScript：
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }
这将打开Web套接字，以便您可以在“网络”选项卡和控制台中看到它。
其他答案涵盖了最常见的情况：观看框架的内容（“开发工具->网络”选项卡->右键单击websocket连接->框架）。
如果您想了解更多信息，例如当前正在打开/空闲的套接字或能够关闭它们，您会发现此URL很有用
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
Chrome版本29及更高版本的简短答案：
- 打开调试器，转到“网络”选项卡
- 使用websocket加载页面
- 单击带有服务器升级响应的websocket请求
- 选择标签“框架”以查看网络套接字框架
- 再次单击websocket请求以刷新框架
我已经使用了由用户hakobera发布的名为Simple WebSocket Client v0.1.3的 Chrome扩展程序。它的用法非常简单，它允许在给定的URL上打开websocket，发送消息并关闭套接字连接。这是非常简约的。