如何使用 Chrome 开发者工具检查 websocket 流量？ [复制]答案

【问题标题】：How do you inspect websocket traffic with Chrome Developer Tools? [duplicate]如何使用 Chrome 开发者工具检查 websocket 流量？ [复制]
【发布时间】：2017-08-22 05:00:54
【问题描述】：

我正在尝试使用 Chrome 开发人员工具检查 websocket 流量。根据我的研究，您似乎应该能够使用网络选项卡看到它 - 它甚至还有一个过滤器用于“ws”。

但是，我一直在检查我知道正在使用 websockets 的网站，但找不到检查来回发送的消息的方法。使用 Chrome v56，也尝试了 Safari，但没有运气......

有人知道如何实现吗？

【问题讨论】：

@KyleMit 是的！在问这个之前我做了很多搜索。太奇怪了，我当时没有遇到它:)

标签： websocket google-chrome-devtools

【解决方案1】：

您需要在网络选项卡打开的情况下重新加载页面并按类型“ws”进行过滤。这将向您显示与 websocket 建立的连接。然后，您可以单击连接以显示在服务器上来回发送的流量

https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#frames

【讨论】：

这似乎被最新版本的 chrome 破坏了，或者我错了。如果我尝试 echo 演示：websocket.org/echo.html 并按照此处的说明进行操作：kaazing.com/… with chrome version 66.0.3359.139，则框架选项卡中的消息内容始终为空。谁能确认这种行为？
@dasPing 对我来说似乎很好 - MacOS 上的 Chrome 66...在“框架”选项卡中，确保过滤器中没有任何文本，并且为类型选择了“全部”
@dasPing 是否需要向下拖动突出显示的栏？见stackoverflow.com/a/37414271/4493564
谁能说出长度属性是什么？这是发送/接收消息的大小吗？
@NithinChandran 是的，它是发送/接收的消息的大小，以字节为单位

【解决方案2】：

关于此流量的信息嵌套在网络标签的更深处。使用 Chrome 58+，您将看到关于连接到 websocket 的条目，在主网络选项卡列表中。

这改变了一个协议（HTTP 状态 101），

所以

每个可能的下一个请求都是 websocket 流量，将在上述条目的 Frames 选项卡下可见。

当然，您可以有更多打开的连接到不同的 websocket，按 websocket 类型聚合在主“网络”选项卡上。

【讨论】：