在谷歌浏览器中调试WebSocket

Question

在谷歌浏览器中调试WebSocket

google-chromewebsocket

273

有没有一种方法或扩展可以让我观察WebSocket传输的“流量”？为了调试目的，我想看到客户端和服务器的请求/响应。

- mellowsoon

12个回答

85

Chrome似乎不断更改东西，但是这里是目前可用的方法 :-)

首先你必须点击红色的记录按钮，否则你将得到空白。
我以前从未注意过WS，但它可以过滤掉WebSocket连接。
选择它，然后你就可以看到显示错误消息等的Frames（现在叫做Messages）。

- Simon_Weaver

3

我不喜欢那个 JSON 格式，太丑了。基本上没有格式化。 - ses

1

@ses，那是SignalR协议。请向Microsoft提出。 - Simon_Weaver

1

很高兴看到这个回答四年后仍然有效 :p - Stu Thompson

2

@StuThompson 是的 - 我的赞数不断增加 :-) - Simon_Weaver

2

点赞这张图片。我认为 Frames 现在称为 Messages。 - Laurence

显示剩余4条评论

77

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

进入 ~~WebSocket Echo demo~~ [2022年已经关闭]~~，托管在websocket.org 站点上~~ https://echo.websocket.events/.ws (由公司Lob 运营) 或者您可以本地运行Echo Server 项目。
打开Chrome开发者工具。
点击Network，并在Dev Tools中过滤所显示的流量，点击WebSockets。
在Echo演示中，点击Connect。在Google Dev Tool的Headers选项卡中，您可以检查WebSocket握手。
单击Echo演示中的Send按钮。
此步骤很重要：在名称 / 路径下，单击表示WebSocket连接的echo.websocket.org条目，这将刷新右侧的主面板，并显示实际WebSocket消息内容的WebSocket Frames选项卡。

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

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

我最近出版的书，HTML5 WebSocket权威指南，还有一个专门介绍各种检查工具（包括Chrome Dev Tools、Chrome net-internals和Wire Shark）的附录。

- Peter Moskovits

3

在发布复制粘贴的模板/原文回答多个问题时要小心，这些往往会被社区标记为“垃圾邮件”。如果您这样做，通常意味着这些问题是重复的，请将它们标记为重复。 - Kev

3

谢谢你提供第六步！我已经知道网络选项卡中的WebSockets过滤器，但我很沮丧似乎只能捕捉到我最开始的一些信息。你知道是否有办法让它意识到在打开选项卡之前已经打开的websocket连接吗？ - Bryan Head

1

Bryan - 我不相信你今天能做到。 - Peter Moskovits

1

@Howie，你不能使用Chrome来完成这个任务。你可以使用WireShark。我们的新书，《HTML5 WebSocket 完全指南》也为你提供了关于WireShark的快速介绍。http://www.amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/1430247401 - Peter Moskovits

1

第一步中的WebSocket链接现在已经失效。 - JohnK

显示剩余4条评论

53

如果你没有正在使用websocket的页面，你可以打开Chrome控制台并输入JavaScript代码：

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

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

- Dylan

谢谢！另外：您打开的页面必须与您的WebSocket在同一个源上。如果您尝试在不同的来源（甚至是新标签页）上打开Chrome开发工具，然后连接到您的WebSocket，您将收到授权错误。 - Dan Esparza

有没有办法修复这个问题？ - not2qubit

如果您没有专门的页面与Websocket交互，这将非常有用。要发送数据，只需调用 webSocket.send('foo');。 - Iceberg

42

其他答案已经覆盖了最常见的情况：观看帧的内容（开发者工具->网络选项卡->右键单击websocket连接->帧）。

如果你想知道更多信息，比如哪些socket当前是打开/空闲状态或者如何关闭它们，你会发现这个url很有用

chrome://net-internals/#sockets

- Riccardo Galli

9

您有三种选择：Chrome（通过开发者工具 -> 网络标签）、Wireshark和Fiddler（通过日志标签），但它们都非常基础。如果您的流量很高或每个帧很大，使用它们进行调试会变得非常困难。

但是，您可以使用FiddlerScript在同样的方式下检查WebSocket流量，就像检查HTTP流量一样。这种解决方案的优点之一是您可以利用Fiddler中的许多其他功能，例如多个检查器（HexView、JSON、SyntaxView）、比较数据包和查找数据包等等。

请参考我最近在CodeProject上撰写的文章，其中介绍了如何使用Fiddler（带有FiddlerScript）调试/检查WebSocket流量。 http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

- engineforce

9

如果您想要更好的体验，我建议使用Postman来调试WebSocket请求。它已经作为一个新功能发布了。 https://dev59.com/ulgQ5IYBdhLWcg3wxGlP#43754722

- Anudeep

7

我发表这篇文章是因为Chrome经常有变化，而且没有一个答案是最新的。

打开开发者工具
刷新页面（以便网络选项卡捕获WS连接）
点击您的请求
点击“Frames”子选项卡
您应该会看到类似于以下内容：

- iuliu.net

6

Chrome开发者工具可以查看在打开的连接期间保持挂起状态的握手请求，但据我所知，您无法看到流量。但是，您可以例如嗅探它。

- yojimbo87

4

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

打开调试器，进入“Network”选项卡
加载具有websocket的页面
点击来自服务器的升级响应的websocket请求
选择“Frames”选项卡以查看websocket帧
再次点击websocket请求以刷新帧

- Tires

1

看起来这个程序可以工作，但是如果你断开并重新连接到websocket的url（例如在http://www.websocket.org/echo.html上），它会停止工作，这很烦人！ :( - matanster

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kanaka · Accepted Answer

Chrome开发者工具现在可以列出WebSocket帧，并且如果帧不是二进制的，还可以检查数据。

步骤:

启动Chrome开发者工具
加载您的页面并启动WebSocket连接
点击网络选项卡。
从左侧列表中选择WebSocket连接（它将具有“101切换协议”的状态）。
点击消息子选项卡。二进制帧将显示出长度和时间戳，并指示它们是否被屏蔽。文本帧也会包含有效载荷内容。

如果您的WebSocket连接使用二进制帧，则可能仍然需要使用Wireshark调试连接。Wireshark 1.8.0 添加了WebSockets的解析器和过滤支持。另一种替代方法可以在此答案中找到。