在Google Chrome中调试WebSocket

Question

有没有办法或扩展,让我看到通过WebSocket的"流量"？出于调试目的,我想查看客户端和服务器请求/响应.

Answer 1

Chrome开发人员工具现在能够列出WebSocket帧,并且如果帧不是二进制的,还可以检查数据.

处理:

1. 启动Chrome开发者工具
2. 加载页面并启动WebSocket连接
3. 单击" 网络"选项卡.
4. 从左侧列表中选择WebSocket连接(它将具有"101 Switching Protocols"状态.
5. 单击" 框架"子选项卡.二进制帧将显示长度和时间戳,并指示它们是否被屏蔽.文本框架还将显示有效内容.

如果您的WebSocket连接使用二进制帧,那么您可能仍希望使用Wireshark来调试连接.Wireshark 1.8.0为WebSockets添加了解剖器和过滤支持.在另一个答案中可以找到另一种选择.

Answer 2

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

1. 导航到websocket.org网站上托管的WebSocket Echo演示.
2. 打开Chrome开发者工具.
3. 单击" 网络",并过滤开发工具显示的流量,单击" WebSockets".
4. 在Echo演示中,单击" 连接".在Google Dev Tool的"标题"选项卡上,您可以检查WebSocket握手.
5. 单击Echo演示中的"发送"按钮.
6. 这个步骤很重要:要在Chrome开发者工具中查看WebSocket框架,在名称/路径下,单击表示WebSocket连接的echo.websocket.org条目.这将刷新右侧的主面板,并使WebSocket Frames选项卡显示实际的WebSocket消息内容.

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

我还发布了屏幕截图和视频的步骤.

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

Answer 3

他们似乎不断改变Chrome中的内容,但这里现在有效:-)

• 首先,你必须点击红色记录按钮,否则你什么也得不到.

• 我从来没有注意到它WS,但它过滤掉了Web套接字连接.

• 选择它然后你就可以看到会显示错误信息等的帧.

Answer 4

如果您没有访问websocket的页面,则可以打开Chrome控制台并在以下位置键入JavaScript:

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

这将打开Web套接字,以便您可以在网络选项卡和控制台中查看它.

Answer 5

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

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

chrome://net-internals/#sockets

Answer 6

您有3个选项:Chrome(通过开发人员工具 - >网络选项卡),Wireshark和Fiddler(通过日志选项卡),但它们都非常基本.如果您的流量非常大或每个帧都非常大,则使用它们进行调试变得非常困难.

但是,您可以使用Fiddler和FiddlerScript以与检测HTTP流量相同的方式检查WebSocket流量.此解决方案的一些优点是您可以利用Fiddler中的许多其他功能,例如多个检查器(HexView,JSON,SyntaxView),比较数据包和查找数据包等.

请参阅我最近写的关于CodeProject的文章,该文章向您展示如何使用Fiddler(使用FiddlerScript)调试/检查WebSocket流量.http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Answer 7

如果你想要更好的体验，我建议使用 Postman 来调试 WebSocket 请求。它已作为新功能发布。 /sf/answers/3062830571/

Answer 8

我只是发布这个，因为 Chrome 变化很大，而且没有一个答案是最新的。

1. 打开开发工具
2. 刷新您的页面（以便网络选项卡捕获 WS 连接）
3. 点击您的请求
4. 单击“框架”子选项卡
5. 你应该看到这样的东西：

Answer 9

Chrome开发者工具允许查看在打开的连接期间保持待处理状态的握手请求，但据我所知，您看不到流量。但是，您可以嗅探它。