如何正确地在Chrome中检查WebSocket帧？

Question

我已输入建议的 echo.websocket.org，在Chrome 开发者工具中打开网络选项卡和WebSocket筛选器, 但我没有看到任何帧(Frame)。我可以看到连接条目，但Frame选项卡始终为空白。我是否需要进行特殊设置才能看到帧(Frame)呢？

屏幕截图:

- jayarjo

---

刚在这里进行了测试，我可以正确地看到帧。你能提供一张截图吗？ - cassiomolin

已更新并附上截图。 - jayarjo

我猜他们应该在那个部分设置一些最小高度。 - jayarjo

是的，他们应该... - cassiomolin

Answer 1

点击 网络，WS，选择原始的HTTP连接，然后点击帧选项卡。请注意，该选项卡的内容可能会被另一个窗格所隐藏，因此需要拖动条将WebSocket帧显示出来。

- cassiomolin

---

那是我的问题 :-) 非常感谢! - Paweł Sroka

一样！我甚至不知道那是怎么发生的，而且一开始也不明显。谢谢。 - Thibs

我希望有一种方法可以将这些信息提取出来并导入Excel。我想要分析时间和大小。 - Ryan Shillington

@RyanShillington 或许这个链接可以帮到你：https://dev59.com/Wl0a5IYBdhLWcg3wxrON 你也可以尝试使用一个HAR分析工具：https://toolbox.googleapps.com/apps/har_analyzer/ - cassiomolin

@ChagaiFriedlander 绿色向上箭头表示已发送的消息，红色向下箭头表示已接收的消息。工具栏中还有一个下拉菜单，可以根据方向筛选消息。 - Fahad

Answer 2

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

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

现在，您应该可以看到所有与WebSockets通信的内容，有三个列：数据、长度和时间。

- Pingolin

---

嗨Armel，感谢您的回答！我想知道这些箭头代表什么，我还看到一个黑色箭头在我的WS消息旁边。 - Chagai Friedlander

这是正确的答案，其他回复已经过时。我正在使用 Chrome 105.0.0.0。 - user2677034

Chrome Websocket 如何通过关键字过滤消息？ - CS QGB

Answer 3

您是否在页面上发送任何数据？单击Connect后，请尝试发送一条消息：

Chrome中还有一个有用的区域，可以查看所有活动套接字：

您可以在此处访问它： chrome://net-internals/#events&q=type:SOCKET%20is:active

更新：

在看到您新添加的屏幕截图后，似乎您的数据表被挤压了，您需要将其向下拖动以查看条目。

- Gideon Pyzer

---

我也有一个被挤压的数据表格。谢谢！ :) - Scymex

Chrome的net-internals工具太棒了！谢谢你向我展示这个。 - likebike

哎呀，chrome://net-internals在当前版本的Chrome中已经不存在了。 - mikemaccana

Answer 4

如果您在开发过程中使用了livereload，那么还有另一种可能会出现问题的方式。

这似乎会导致多个socket实例出现，所有实例都没有消息。

事实证明，只有第一个是“真正”的，它有消息：

- GreenAsJade

Answer 5

另一个需要注意的问题是，在新版Edge中，开发者工具菜单选项和网络/WS显示与Chrome非常相似。我忘记了我正在使用Edge，并花了20分钟尝试找到JSON消息，我认为在Edge中不可用。

- Andrew W. Phillips

---

最新的Edge基本上就是Chrome。 - jayarjo

Chromium Edge 103.0.1264.71开发者工具中的消息表可能会因工具窗口的大小而为空，只显示一个水平滚动条和“选择消息以浏览其内容”的窗口占据所有空间。拉动滚动条底部以查看消息。Google Chrome Canary 106.0.5202.2至少显示一条消息。 - unwave

Chrome WebSocket 是如何通过关键字监控过滤消息的呢？ - CS QGB