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.