Firefox’s New WebSocket Inspector
hacks.mozilla.org
hacks.mozilla.org
(To be clear, I'm not asking it to save past connections/frames. I just want to see the new frames that arrive/depart after I open it...)
That's cool, and there is a way to do this in chrome in the right circumstances (like another tab/window spawned that tab/window). But if you just want it there as kind of a DVR then that's nice... I wish that was the default (at least up to some reasonable buffer size).
And yeah for some reason Ctrl+Left/Right to jump around words, Ctrl+Shift+Left/Right to select words, and Ctrl+Backspace to delete a word, are disabled in the console prompt as well (they do seem to work in all the other DevTools input fields I can see). These are pretty ingrained in my muscle memory so I constantly bump into them.
Also I'm on Linux, in case that matters.
That's probably way too vague to be helpful unless someone else knows what I'm talking about, but if nobody does, I suppose knowing that could help motivate me to isolate and reproduce the issue next time it happens.
It's amazing how such a small change makes it so much more difficult to use the Firefox dev tools compared to Chrome. Sometimes I just want to toggle between CSS values and see what is changing, or undo a few changes I made.
1. JSFiddle. Run a fiddle with a loop (setTimeout/setInterval/requestAnimationFrame). Try to find it in the debugger. Fail
2. Add a `debugger` statement in the loop. Watch as Firefox doesn't display the code in the debugger
3. Add a syntax error, see message in console, click link to code, firefox doesn't display code.
Imo, it'd be much better to have a UI that interleaved full HTTP requests with websocket frames, so you can see the comparative timing of the both (and of frames across multiple WSs) rather than having to look at all of them separately.
I'm not convinced - if that's true, then there's so many frames that clicking the websocket would crash devtools, which is equally unacceptable.
In my experience people tend to use websockets in a not that dissimilar way to how they'd previously use pure HTTP requests, but now the server can instantly push data back too. If that is typical (hard to say) then it shouldn't be too bad.
If people were using many (10s, 100s) of websockets in a single page then there would be an argument that individually they're manageable but together it's impossible, but I would be surprised if that's common. I'd love examples if it is!
> it also clearly delineates between multiple websockets, or if you closed one and opened another
I think you could show all frames together and still differentiate the individual sockets within. I'm imagining a UI a bit like standard git tree UIs, with a row for each item, but links between the related ones. I don't think good UX here is impossible.
I routinely see devtools of both Chrome and Firefox bog down if you preserve transactions or stay ona page with a log or background requests for a while or the console and load a few pages with a lot of ajax and/or js or that log a lot. I'm not making some assumption about a case that has no basis, I deal with the basis for what I'm assuming regularly.
> In my experience people tend to use websockets in a not that dissimilar way to how they'd previously use pure HTTP requests, but now the server can instantly push data back too. If that is typical (hard to say) then it shouldn't be too bad.
Sure. But as I noted, I see this with regular requests, so I'm not expecting websockets to show any new behavior, I'm just noting how this might help existing behavior I see.
> If people were using many (10s, 100s) of websockets in a single page then there would be an argument that individually they're manageable but together it's impossible, but I would be surprised if that's common. I'd love examples if it is!
Imagine the scenario of a page that generated a lot of websocket traffic. Maybe you've been examining something else in devtools for a few minutes (or you left it for an hour). You could have thousands of messages. Clicking on the websocket section might show you the single websocket and some summary info (bytes transferred, last communication time, what the endpoint is, etc). Clicking on the websocket to expand it might bog down, freeze or crash devtools as it loads too much data to easily display. I all the messages were shown separately, just clicking on the websocket section would likely cause the problems, and that might leave some information harder to find out or lost if you close and restart devtools.
UI design isn't always about making stuff easiest for the common case. Part of it is making sure the somewhat uncommon but not entirely rare case doesn't break the UI entirely, and that sometimes necessitates some trade-offs in the common case.
Fun thing is - there is no real reason for that to happen. It's just that both devtools are written using HTML and JavaScript, and it's not trivial to handle big sets of data there.
Check out and financial trading website using websockets (for example the crypto ones). You'll see tens of messages per second. Example - https://www.bitmex.com/app/trade/XBTUSD
In my game a client can receive 60 WS frames a second. I've personally only used WebSockets for high throughput cases so I'm surprised you say people are using them in a similar way to how they would use a normal HTTP request.
I can't imagine ever wanting to know when my chat message was received in relation to when a .gif was loaded.
I recently found out about the CSS tooling Firefox has for flexbox (they're quite hard to discover).
Another feature I sometimes use in Chrome is the ability to specify my own network throttling specs (based on measured throughputs of customers and users) instead of the default profiles. It's much less of an issue than the websockets but I hope that custom network profiles become a feature as well soon. So far none of them seem advanced enough to not necessitate a virtual instance of pfSense with a shaper (to allow for burst speed/packet loss/etc.) to reliably reproduce customer network behaviour but every advancement here is a step closer to ditching my clunky setup.
The unsatisfying answers from the Web are generally, "Use Wireshark." I don't think I should need to drop down to that layer.
With such great dev tools for most other things, I've been looking forward to not have to use Chrome for websocket work.
Also, it seems we already see why competition is great, lots of cool features on the inspection.
BTW when could we have firefox be able to use the private client certificate from the MacOS's system keychain?
Have been switched back to FF as my personal browser for the past month, now this is the only thing blocking me from using it in my working environment.
Now you have my attention. I deploy both JSON and base64 string messages. It would save a lot of code-time effort to have a MITM custom handler that would allow me to inspect parse manipulate and view side effects
Thnx for building ;)
Chrome developer tools can view binary data transmitted with this approach.