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

Question

我按照建议输入了echo.websocket.org，在Chrome开发者工具中打开了网络标签和WS过滤器，但我看不到任何框架。我看到连接条目，但框架选项卡始终保持为空。有什么特别的东西可以看到框架吗？

截图：

Answer 1

点击网络， WS ，选择原始HTTP连接，然后点击框架标签。此选项卡的内容可能被另一个窗格隐藏，因此您需要向下拖动该栏以查看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. 点击消息。

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