是否有一种方法或扩展,让我观察“流量”通过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

其他回答

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

Navigate to the WebSocket Echo demo [dead as of 2022], hosted on the websocket.org site https://echo.websocket.events/.ws (run by the company Lob) or you can locally run the Echo Server project. Turn on the Chrome Developer Tools. Click Network, and to filter the traffic shown by the Dev Tools, click WebSockets. In the Echo demo, click Connect. On the Headers tab in Google Dev Tool you can inspect the WebSocket handshake. Click the Send button in the Echo demo. THIS STEP IS IMPORTANT: To see the WebSocket frames in the Chrome Developer Tools, under Name/Path, click the echo.websocket.org entry, representing your WebSocket connection. This refreshes the main panel on the right and makes the WebSocket Frames tab show up with the actual WebSocket message content.

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

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

我最近出版的书,The Definitive Guide to HTML5 WebSocket,也有一个专门的附录,涵盖了各种检查工具,包括Chrome Dev tools, Chrome net-internals和Wire Shark。

你有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扩展名为Simple WebSocket Client v0.1.3,是由用户hakobera发布的。它的使用非常简单,它允许在给定的URL上打开websocket,发送消息并关闭socket连接。它非常简约。

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

过程:

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

如果您的WebSocket连接使用二进制帧,那么您可能仍然需要使用Wireshark来调试连接。Wireshark 1.8.0为WebSockets增加了解析器和过滤支持。在另一个答案中可以找到另一种答案。

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