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

Posted 2023-03-07

【中文标题】如何正确检查 Chrome 中的 WebSocket 帧？

【英文标题】：How to inspect WebSocket frames in Chrome properly?

【发布时间】：2016-09-21 15:19:37

【问题描述】：

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

截图：

【问题讨论】：

刚刚在这里测试，我可以正常看到框架。能否提供截图？

更新了截图。

我想他们应该在那个部分放一些最小的高度。

是的，他们应该...

【参考方案1】：

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

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

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

更新：

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

【讨论】：

我还有一个压缩的数据表。谢谢！ :)

Chrome 的网络内部工具非常棒！谢谢你给我看这个。

唉 chrome://net-internals 在当前版本的 Chrome 中不再存在。

【参考方案2】：

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

【讨论】：

这是我的问题 :-) 非常感谢！

这里也一样！不知道那是怎么发生的，起初并不明显。谢谢你

嗨@cassiomolin，感谢您的回答！我想知道箭头代表什么，我还可以在我的一条 WS 消息旁边看到一个黑色箭头

我希望有一种方法可以将这些信息从这里获取到 Excel 中。我想分析时间和规模。

@RyanShillington 也许这可能会有所帮助：***.com/q/29953531/1426227 您可以尝试使用 HAR 分析器工具：toolbox.googleapps.com/apps/har_analyzer

【参考方案3】：

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

打开 Chrome 开发者工具。 点击网络标签。 点击过滤器WS（用于WebSockets）。 重新加载页面以确保您在 名称 列中看到您的连接。 点击消息。

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

【讨论】：

您好Armel，感谢您的回答！我想知道箭头代表什么，我还可以在我的一条 WS 消息旁边看到一个黑色箭头

【参考方案4】：

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

【讨论】：

最新的 Edge 基本上是 Chrome。

【参考方案5】：

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

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

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