如何正确检查Chrome中的WebSocket框架？

Question

我已按照建议进入echo.websocket.org,在Chrome开发者工具中打开了网络选项卡和WS过滤器,但我没有看到任何框架.我看到连接条目,但框架选项卡始终保持为空.看框架有什么特别之处吗？

截图:

Answer 1

单击Network,WS,选择原始HTTP连接,单击frames选项卡并向下拖动突出显示的栏以查看WebSocket框架:)

Answer 2

您是否在页面上发送了任何数据？您需要在点击后尝试发送消息Connect:

Chrome中还有一个有用的区域,您可以在其中查看所有活动套接字:

你可以在这里访问它:chrome:// net-internals /#events&q = type:SOCKET%20is:active

更新:

看到新添加的屏幕截图后,看起来您的数据表被压扁了,您需要将其向下拖动以查看条目.

Answer 3

截至 2019 年 12 月 10 日，使用 Chrome 调试 WebSockets 的过程略有不同。

1. 打开 Chrome开发者工具。
2. 单击网络选项卡。
3. 单击过滤器WS（对于 WebSockets）。
4. 重新加载页面以确保您在名称列中看到您的连接。
5. 点击消息。

现在您应该看到您与 WebSockets 的所有通信，包括 3 列：数据、长度和时间。