如何从桌面 chrome 检查器查看 firebase 流量答案

【问题标题】：how to watch firebase traffic from desktop chrome inspector如何从桌面 chrome 检查器查看 firebase 流量
【发布时间】：2018-03-07 17:42:15
【问题描述】：

我的桌面 Chrome 浏览器中运行了一个 JavaScript 应用程序，该应用程序正在读取和写入 Firebase。我想了解它使用了多少流量（与任何本地缓存相比），我想我可以在 Chrome Inspector 中查看。

我没有看到任何此类流量。我想我需要调整一些 Inspector 设置，但看起来我已经打开了所有东西，没有任何过滤。

如何查看此流量？（对于我目前的简单需求，我宁愿在 Chrome 中这样做，而不必启动 WireShark）

【问题讨论】：

【解决方案1】：

Firebase 使用 websocket 与客户端通信。在 devtool 的网络选项卡中，按“WS”（websocket）过滤，您应该会看到 Firebase 正在使用的连接。

【讨论】：

这就是我所期望的工作。但是，我什么也没看到。我无法想象我跳过了哪一步；我点击了 WS，它以灰色菱形突出显示。但是，控制台或网络窗格中都没有输出。我需要去别的地方吗？
在 websocket 中发送或接收的消息不像正常的网络请求那样显示；它们显示在 websocket 的“框架”选项卡中：stackoverflow.com/questions/43081107/…
谢谢！那是我遗漏的部分。
@Sidney 这个答案已经过时了。 Firebase SDK 转而使用 protobuf 而不是 GRPC 或 XHR。不过，检查网络窗格中的流量会有些用处，因为它将是数据的 base64 编码数组缓冲区。 github.com/firebase/firebase-js-sdk/blob/…
@JoshHibschman 你如何建议在 chrome 检查器上调试 firebase 比？

【解决方案2】：

Chrome 有一个很棒的扩展名为“GTM/GA Debug”，它可以读出 Firebase 命中。在 Chrome 开发工具中使用扩展时，请查看名为 GA4F（Google Analytics for Firebase）的选项卡。对调试很有帮助。

【讨论】：