如何使用桌面版Chrome检查器观察Firebase流量

Question

我在桌面版的Chrome浏览器中运行了一个JavaScript应用，该应用正在读写Firebase。我想知道它使用了多少流量（与本地缓存相比），并且我认为我可以在Chrome检查器中观察到这些信息。

但是我没有看到任何流量。我猜需要调整一些检查器设置，但是似乎我已经打开了所有设置并没有过滤任何内容。

如何查看这些流量？（对于我的简单需求，我更喜欢在Chrome中实现，而不是启动WireShark）

- David Goldfarb

Answer 1

Firebase使用websocket与客户端通信。在开发者工具的网络选项卡中，过滤器选择"WS"（websocket），您应该可以看到Firebase正在使用的连接。

- Sidney

---

这就是我期望的工作方式。但是，我没有看到任何东西。我无法想象我跳过了哪个步骤；我点击了WS，它变成了一个灰色菱形高亮显示。但是，在控制台或网络窗格中都没有输出。我需要在其他地方查找吗？ - David Goldfarb

Websocket发送或接收的消息不像普通的网络请求一样显示，而是在Websocket的“帧”选项卡中显示：https://dev59.com/a1gQ5IYBdhLWcg3wPxhM - Sidney

谢谢！那就是我缺少的部分。 - David Goldfarb

@Sidney 这个答案已经过时了。Firebase SDK现在使用protobuf代替GRPC或XHR。尽管在网络面板中检查流量会有些无用，因为它将是数据的base64编码数组缓冲区。https://github.com/firebase/firebase-js-sdk/blob/ed87b76e95d5f2e35f423110ae83ed9e1311e649/packages/firestore/src/remote/serializer.ts#L131 - Josh Hibschman

@JoshHibschman，你怎么建议在Chrome检查器上调试Firebase呢？ - greensin

@greensin 需要一些努力——对于一个数据帧，需要将其base64解码为字节数组，然后反序列化数组中的每个字节段。使用该GitHub链接中的protobuf方法作为示例，获取字节偏移量，例如toInt32Value()、toTimestamp()。可能更容易的方法是加载未压缩的Firebase JS SDK，然后在Chrome JS窗格中的方法中设置断点。 - Josh Hibschman

Answer 2

有一个名为“GTM/GA Debug”的Chrome扩展程序，可以显示Firebase的点击量。在Chrome Dev Tools中使用该扩展程序时，请查看名为GA4F（Google Analytics for Firebase）的标签页。它非常有助于调试。

- Lauren