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

Question

我正在尝试使用Chrome开发者工具检查websocket流量.根据我的研究,您似乎应该能够使用网络标签查看它 - 它甚至还有一个'ws'的过滤器.

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

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

Answer 1

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

@dasPing你需要向下拖动突出显示的栏吗？请参阅/sf/answers/2618999001/ (4认同)
这似乎打破了最新版本的chrome,或者我错了.如果我尝试回声演示:http://www.websocket.org/echo.html并按照此处的说明操作:https://kaazing.com/inspecting-websocket-traffic-with-chrome-developer-tools/ with chrome版本66.0.3359.139框架选项卡中的消息内容始终为空.谁能证实这种行为？ (2认同)

Answer 2

有关此流量的信息嵌套在"网络"选项卡中.使用Chrome 58+,您将在主网络选项卡列表中看到有关连接到websocket的条目.

这改变了协议(HTTP状态101),

所以

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

当然,您可以有更多打开的连接到不同的websockets,通过websocket类型聚合在主"网络"选项卡上.