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)

2 Answers 2

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.

6
  • 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? Sep 27, 2017 at 8: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: stackoverflow.com/questions/43081107/…
    – Sidney
    Sep 27, 2017 at 16:11
  • Thanks! That was the piece I was missing. Sep 28, 2017 at 9: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. github.com/firebase/firebase-js-sdk/blob/… Nov 15, 2019 at 14:16
  • 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. Aug 5, 2021 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.