logo标签列表

Chrome网页检查器Web Socket调试

google-chromewebsocketgoogle-chrome-devtools
40

我可以使用 Google Chrome Web Inspector 中的“Network”选项卡来调试网络流量（如AJAX请求等），以便轻松查看传输的数据。但是，Websocket连接仅显示为

Request URL:ws://localhost/...
Request Method:GET
Status Code:101 Switching Protocols
...

我无法看到传输的数据。Google Chrome是否有内置功能来检查传输的数据？或者我需要使用Wireshark吗？

PS：我正在使用最新稳定版（16.0.912.75）。如果更新版本（beta/dev）具有此功能，那就太好了。

1
可能是在Google Chrome中调试WebSocket的重复问题。 - Ali Dehghani
3个回答
72
Chrome和Chromium现在支持WebSocket消息帧检查。以下是快速测试的步骤：
  1. 进入WebSocket Echo演示，托管在websocket.org网站上。
  2. 打开Chrome开发者工具。
  3. 点击网络，启用筛选器（DevTools顶部第三个图标）来过滤开发者工具显示的流量，并点击WebSockets。
  4. 在Echo演示中，单击连接。在Google Dev Tool的标题选项卡中，您可以检查WebSocket握手。
  5. 单击Echo演示中的发送按钮。
  6. 要在Chrome Developer Tools中查看WebSocket帧，请在“名称”下单击表示WebSocket连接的条目。这将刷新右侧的主面板并显示实际WebSocket消息内容的WebSocket Frames选项卡。
我还发布了带有屏幕截图和视频的步骤。 输入图像描述
2
在发布复制粘贴的样板/逐字回答多个问题时要小心，社区往往会将其标记为“垃圾邮件”。如果您这样做，通常意味着这些问题是重复的，请将它们标记为重复。 - Kev
5
谢谢，Kev。顺便问一下，这是否也适用于评论呢... ;-) - Peter Moskovits
1
我认为Fiddler在调试WebSocket方面更易于使用。最近，我在CodeProject上撰写了一篇文章，向您展示如何使用Fiddler调试/检查WebSocket流量。http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler - engineforce
6
Chrome开发工具中不再有“Websocket Frames”选项卡:/ 现在有一个“Frames”选项卡，但无论发送了多少个websocket消息，或者我点击左侧的名称/路径条目多少次，它都是空的。我做错了什么？ - nzifnab
1
如果您的视图也只显示文本“选择帧以浏览其内容。”，那是因为您看不到上面的帧表格。尝试拖动调整帧详细信息窗口的手柄，该手柄可能位于表格标题正下方。如果您从大屏幕分辨率切换到较小的分辨率，则经常会发生这种情况 :) - SimonSimCity
显示剩余4条评论
8

经过更多的研究，我在这里找到了一个重复的问题：Chrome中WebSocket的调试

当前稳定版本的Chrome不支持查看流量。我需要使用Wireshark。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接