如何使用Chrome开发者工具检查websocket流量？

Question

我尝试使用Chrome开发者工具检查websocket流量。根据我的研究，您似乎应该能够使用网络标签查看它 - 它甚至还有一个过滤器用于＆＃39; ws＆＃39;。

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

有谁知道如何实现这一目标？

Answer 1

您需要在网络标签打开的情况下重新加载页面，然后按类型＆＃39; ws＆＃39;进行过滤。这将显示与websocket建立的连接。然后，您可以单击该连接以显示在服务器上来回发送的流量

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

Answer 2

有关此流量的信息更深入地嵌套在“网络”标签中。 使用Chrome 58+，你会看到 关于连接到websocket的条目，在主网络选项卡列表中。

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

所以

每个可能的下一个请求都是websocket流量，将在上面条目的“框架”选项卡下显示。

当然，您可以拥有更多打开的连接到不同的websockets，聚合在主要＆＃34;网络＆＃34;按websocket类型标签。