调试WebSocket在谷歌Chrome

Chrome开发工具允许看到握手请求在打开连接期间保持等待，但据我所知，你不能看到流量。但是你可以嗅嗅它为例。

Chrome开发工具现在有能力列出WebSocket帧，也检查数据，如果帧不是二进制的。

过程:

1. 启动Chrome开发工具
2. 加载页面并启动WebSocket连接
3. 单击网络选项卡。
4. 从左侧列表中选择WebSocket连接(它的状态为“101交换协议”)。
5. 单击消息子选项卡。二进制帧将显示长度和时间戳，并指示它们是否被屏蔽。文本帧将显示也包括有效载荷内容。

如果您的WebSocket连接使用二进制帧，那么您可能仍然需要使用Wireshark来调试连接。Wireshark 1.8.0为WebSockets增加了解析器和过滤支持。可以在其他的答案中找到替代方法。

Chrome Canary和Chromium现在有WebSocket消息帧检查功能。下面是快速测试的步骤:

1. 导航到the WebSocket Echo demo [2022年死亡]，托管在websocket.org站点 https://echo.websocket.events/.ws(由Lob公司运行)，或者您可以在本地运行回显服务器项目。
2. 打开Chrome开发者工具。
3. 单击网络，要过滤由Dev Tools显示的流量，单击尚。
4. 在Echo演示中，单击连接。在谷歌开发工具的Headers选项卡上，你可以检查WebSocket握手。
5. 单击Echo演示中的Send按钮。
6. 这一步很重要:要在Chrome开发工具中查看WebSocket框架，在名称/路径下，单击echo.websocket.org条目，代表您的WebSocket连接。这将刷新右边的主面板，并使WebSocket Frames选项卡显示实际的WebSocket消息内容。

请注意:每当你发送或接收新消息时，你必须通过点击左边的echo.websocket.org条目来刷新主面板。

我还发布了带有屏幕截图和视频的步骤。

我最近出版的书，HTML5 WebSocket的权威指南，也有一个专门的附录涵盖各种检查工具，包括Chrome Dev tools, Chrome net-internals和Wire Shark。

Chrome 29及以上版本的简短回答:

1. 打开调试器，转到“网络”选项卡
2. 使用websocket加载页面
3. 单击带有服务器升级响应的websocket请求
4. 选择标签“帧”查看websocket帧
5. 再次单击websocket请求刷新帧

你有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

如果你没有访问websocket的页面，你可以打开Chrome控制台并输入你的JavaScript:

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

这将打开web套接字，这样您就可以在网络选项卡和控制台中看到它。

其他答案涵盖了最常见的场景:观察帧的内容(开发人员工具->网络选项卡->右击websocket连接->帧)。

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

chrome://net-internals/#sockets

他们似乎在不断地改变Chrome中的东西，但这里是目前有效的:-)

• 首先你必须点击红色记录按钮，否则你什么都得不到。

我以前从未注意到WS，但它过滤掉了web套接字 连接。< / p >
• 选择它，然后你可以看到Frames(现在称为Messages)，它将向你显示错误消息等。

我使用的Chrome扩展名为简单WebSocket客户端v0.1.3，是由用户hakobera发布的。它的使用非常简单，它允许在给定的URL上打开websocket，发送消息并关闭socket连接。它非常简约。

我只是发布这篇文章，因为Chrome改变了很多，没有一个答案是最新的。

1. 开放开发工具
2. 刷新您的页面(以便网络选项卡捕获WS连接)
3. 点击你的请求
4. 点击“帧”子选项卡
5. 你应该会看到如下内容:

至于我开始使用的工具，我建议firecamp它像Postman，但它也支持websockets和socket.io。