如何正确检查 Chrome 中的 WebSocket 帧？答案

【问题标题】：How to inspect WebSocket frames in Chrome properly?如何正确检查 Chrome 中的 WebSocket 帧？
【发布时间】：2016-09-21 15:19:37
【问题描述】：

我按照建议输入了echo.websocket.org，在 Chrome 开发者工具中打开了网络选项卡和 WS 过滤器，但我没有看到任何框架。我看到了连接条目，但 Frames 选项卡始终为空。有什么特别的事情我应该做才能看到框架吗？

截图：

【问题讨论】：

【解决方案1】：

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

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

更新：

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

【讨论】：

【解决方案2】：

点击Network、WS，选择原来的HTTP连接，然后点击Frames标签。请注意，此选项卡的内容可能被另一个窗格隐藏，因此您需要向下拖动栏以查看 WebSocket 框架。

【讨论】：

这是我的问题 :-) 非常感谢！
这里也一样！不知道那是怎么发生的，起初并不明显。谢谢你
嗨@cassiomolin，感谢您的回答！我想知道箭头代表什么，我还可以在我的一条 WS 消息旁边看到一个黑色箭头
我希望有一种方法可以将这些信息从这里获取到 Excel 中。我想分析时间和规模。
@RyanShillington 也许这可能会有所帮助：stackoverflow.com/q/29953531/1426227 您可以尝试使用 HAR 分析器工具：toolbox.googleapps.com/apps/har_analyzer

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

另一个问题是，在新 Edge 中，开发者工具菜单选项和网络/WS 显示看起来与 Chrome 非常相似。我忘记了我在使用 Edge 并花了 20 分钟试图找到 JSON 消息，我认为这些消息在 Edge 中不可用。

【讨论】：

【解决方案5】：

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

这（显然，至少对我而言）会导致出现多个 socked 实例，所有实例都带有空消息。

原来只有第一个是“真实”的，并且有消息：

【讨论】：