11

I have a JavaScript app running in my desktop Chrome browser which is reading and writing to Firebase. I'd like to get a sense of how much traffic it uses (vs any local caching) and I figured I could just watch in the Chrome Inspector.

I'm not seeing any such traffic. I assume I need to tweak some Inspector setting, but it looks like I have everything turned on and nothing filtered.

How can I see this traffic? (For my current simple needs, I'd much rather do so in Chrome, and not have to fire up WireShark)

KENdi
  • 7,576
  • 2
  • 16
  • 31
David Goldfarb
  • 1,796
  • 3
  • 18
  • 32

2 Answers2

13

Firebase uses a websocket to communicate with clients. In the devtool's networking tab, filter by "WS" (websocket) and you should see the connection that Firebase is using.

Sidney
  • 4,495
  • 2
  • 18
  • 30
  • 1
    That's what I had expected to work. But, I'm not seeing anything. I can't imagine what step I'm skipping; I clicked on WS and it became highlighted with a grey lozenge. But, no output in either the console or network pane. Do I need to look somewhere else? – David Goldfarb Sep 27 '17 at 08:32
  • 4
    Messages sent or recieved in a websocket don't show up like normal network requests; they show up in the "Frames" tab of the websocket: https://stackoverflow.com/questions/43081107/how-do-you-inspect-websocket-traffic-with-chrome-developer-tools – Sidney Sep 27 '17 at 16:11
  • Thanks! That was the piece I was missing. – David Goldfarb Sep 28 '17 at 09:24
  • 8
    @Sidney this answer is outdated. The firebase SDK moved to using protobuf over GRPC or XHR. Inspecting the traffic in network pane will be somewhat useless though, because it will be a base64-encoded array-buffer of the data. https://github.com/firebase/firebase-js-sdk/blob/ed87b76e95d5f2e35f423110ae83ed9e1311e649/packages/firestore/src/remote/serializer.ts#L131 – Josh Hibschman Nov 15 '19 at 14:16
  • @JoshHibschman how do you advise to debug firebase on chrome inspector than? – greensin Aug 05 '21 at 09:43
  • 1
    @greensin it would take some effort -- for a frame of data, base64 decode into a byte array, then deserialize each byte segment in the array. Use the protobuf methods in that github link as an example to get the byte offsets e.g toInt32Value(), toTimestamp(). Might be easier to just load the unminified firebase JS SDK, then put breakpoints in the methods in the chrome JS pane. – Josh Hibschman Aug 05 '21 at 13:39
1

There is a great extension for Chrome called 'GTM/GA Debug' that has a readout for Firebase hits. When using the extension in Chrome Dev Tools, look at the tab named GA4F (Google Analytics for Firebase). It is very helpful for debugging.

Lauren
  • 11
  • 1