[meta] WebSocket Inspector
Categories
(DevTools :: Netmonitor, defect)
Tracking
(Not tracked)
People
(Reporter: canuckistani, Unassigned)
References
(Depends on 35 open bugs)
Details
(4 keywords, Whiteboard: [difficulty=hard] [DevRel:P1])
User Story
Summary: our tools should allow developers to visualize the websocket connections, this means providing transparency for the frames as defined in RFC 6455, and providing a way to correlate the frames and the events produced by the browser WS API implementation. At a high level, here are the features we need: 1) The core information that belongs in the network inspector for websocket MUST be frames, and not messages. There are several reasons for this: - RFC 6455 specifies how websocket works, what goes over the network are frames, not what the websocket API interprets. We need to provide developers with transparency for RFC 6455. - Putting messages into the network inspector is totally redundant and useless because the developer can already get this information via the debugger, there's really no use for it in the network inspector. You just put a break on the websocket API calls. - If we were to put the messages in there, we are effectively instrumenting the websocket API, when instead we should be inspecting the network itself, since that is what the network inspector is meant to be. Obviously, the frames should be grouped by WS connection, and the WS connections should be discoverable (US 1203308). Note that in the future, websocket connections in workers will make the discovery process a little more complicated from a presentation point of view. US 927481 covers the websocket frame inspection. There are currently six frame types that are identified by RFC 6455, plus 10 more open for future expansion. At the very least, we must provide developers with a view of the basic six frames and their associated meta-data. Only perf issue here is whether displaying data content on payload frames would cause excessive memory usage and/or excessive frame rate slow down 2) We should provide developers with the ability to BRIDGE the websocket API with the frames. This means we need to provide a way for the developer to be able to go from a websocket API event to the frames associated with that event. Perhaps the most useful example would be an error message. The network doesn't produce an error, the WS API does. And if an error takes place, we need to show the user what frame caused the error. Similarly, a ws.onmessage event should be correlated to all the associated frames. One way to do this is to overlay the API events on top of a frame timeline. As a bonus we could also make sure we can at least highlight JSON objects in the frames. Bug 1197903 outlines the need for the JSON parser. 3) Search for patterns, frames, etc... 1) 2) and 3) are part of the minimum viable product. Then there are some interesting additional features we can provide: 4) Protocol upgrade intelligence: make the grouping UI extensible so that someone could correlate to upgraded protocol attributes. For example, show frames that represents STOMP payloads and can decode the stomp control frames. 5) We should provide developers with a means for setting BREAKPOINTS that are based on frame attributes, and not on the API itself. A developer should be able to trigger the debugger to break when a particular frame pattern is detected. So for example, break on the 4 bit Opcode, here are the different types of break possible: * %x0 denotes a continuation frame * %x1 denotes a text frame * %x2 denotes a binary frame * %x3-7 are reserved for further non-control frames * %x8 denotes a connection close * %x9 denotes a ping * %xA denotes a pong * %xB-F are reserved for further control frames Old stuff is below this line. ----------------------------------- It should also be possible for the community to extend the websocket monitoring framework to support specific protocol parsing so that protocols can also be monitored. The platform work for websocket did not include any support for being able to debug and monitor websocket communications. As a result, any tooling will have to be preceded by some platform work to enable tooling. Features at a Glance Websocket frames The heart of the tooling should enable developers to inspect individual websocket frames. Pretty much everything can be added on top of individual frame inspection. Websocket state changes http handshakes, Open, close, error and protocol upgrades are the major websocket events that should be visible in a tool. Multiple websocket connections Whatever tool we implement, it has to have support for multiple websocket connections. This could be achieved by providing a filter, or by having the UI display any websocket data based on each WS connection. Protocol support WS was designed specifically so that developers did not have to be constrained by the http protocol and instead can select the most appropriate protocol for the task they are trying to solve. For example. STOMP or AMQP are popular protocols for solving publish/subscribe type problems such as those encountered in stock market applications. SocketIO is a protocol that was loosely implemented for chat problems but is used extensively for many applications requiring basic real time messaging. The most ubiquitous tasks for developers is to be able to inspect payloads for specific protocols. Such inspection includes both the payload itself (JSON, Binary JSON, binary) and the wrapper, such as message options and topic and subscription information, i.e. who is supposed to receive the message. The knowledge of the protocol is embedded in the protocol upgrade event, and if it's a readable protocol, our tool should be smart enough to use the right parser. Any given payload is an assembly of frames that have to be pieced together by the parser according to the protocol. The three most popular open source protocols are SocketIO, STOMP, and AMQP, but AMQP does come in two distinct flavors, v. 0.9 and v. 1.0, both are in use and are very different. We should solicit the community to help us implement the parsers. websocket extensions The WS standard supports WS extensions. These allow specific vendors to add meta-data to frames so that additional functionality can be overlaid on a websocket stream independent of which protocol runs on the websocket connection. Our tools should be smart enough to decipher the content of the meta-frame data.
Attachments
(1 file, 2 obsolete files)
(deleted),
patch
|
Details | Diff | Splinter Review |
Updated•11 years ago
|
Updated•11 years ago
|
Updated•11 years ago
|
Reporter | ||
Updated•11 years ago
|
Updated•11 years ago
|
Comment 1•11 years ago
|
||
Comment 2•11 years ago
|
||
Comment 3•11 years ago
|
||
Comment 4•11 years ago
|
||
Reporter | ||
Comment 5•11 years ago
|
||
Comment 6•11 years ago
|
||
Comment 7•11 years ago
|
||
Reporter | ||
Comment 8•11 years ago
|
||
Comment 9•11 years ago
|
||
Comment 10•11 years ago
|
||
Comment 11•11 years ago
|
||
Comment 12•11 years ago
|
||
Comment 13•11 years ago
|
||
Comment 14•11 years ago
|
||
Comment 15•11 years ago
|
||
Reporter | ||
Comment 16•11 years ago
|
||
Comment 17•11 years ago
|
||
Comment 18•11 years ago
|
||
Comment 19•11 years ago
|
||
Comment 20•11 years ago
|
||
Reporter | ||
Comment 22•11 years ago
|
||
Reporter | ||
Comment 23•11 years ago
|
||
Updated•10 years ago
|
Updated•10 years ago
|
Comment 24•10 years ago
|
||
Comment 25•10 years ago
|
||
Comment 26•10 years ago
|
||
Comment 27•10 years ago
|
||
Comment 28•10 years ago
|
||
Comment 29•10 years ago
|
||
Updated•10 years ago
|
Updated•10 years ago
|
Reporter | ||
Updated•10 years ago
|
Comment 30•9 years ago
|
||
Updated•9 years ago
|
Updated•9 years ago
|
Updated•9 years ago
|
Updated•9 years ago
|
Updated•9 years ago
|
Updated•9 years ago
|
Updated•9 years ago
|
Updated•9 years ago
|
Comment 32•9 years ago
|
||
Comment 33•9 years ago
|
||
Updated•9 years ago
|
Comment 34•7 years ago
|
||
Comment 35•7 years ago
|
||
Comment 37•7 years ago
|
||
Comment 38•7 years ago
|
||
Comment 39•7 years ago
|
||
Comment 40•7 years ago
|
||
Updated•7 years ago
|
Updated•7 years ago
|
Comment 41•7 years ago
|
||
notechnicalvalue |
Comment hidden (me-too) |
Updated•7 years ago
|
Updated•6 years ago
|
Comment 43•6 years ago
|
||
Comment 44•6 years ago
|
||
Comment 45•6 years ago
|
||
Comment 46•6 years ago
|
||
Updated•6 years ago
|
Comment 47•6 years ago
|
||
Comment 48•6 years ago
|
||
I would really like to be able to debug WS with FF, have to switch to chromium each time I need to do it :/
Honza does your prototype work on recent FF?
Comment 49•6 years ago
|
||
We will be picking up this work in the summer (as GSOC project, so it depends on being accepted). Expect bugs to be filed soon.
Comment 50•6 years ago
|
||
Stuck on this bug on my development too.
Response payload is empty and same test on Chrome display frames.
There is a plan to solve this, a part of digitarald last comment ?
Comment 51•6 years ago
|
||
(In reply to a_pakla from comment #50)
Stuck on this bug on my development too.
Response payload is empty and same test on Chrome display frames.
There is a plan to solve this, a part of digitarald last comment ?
Yes, Mozilla has been accepted as a mentoring organization and the project should happen June - August.
Honza
Updated•6 years ago
|
Updated•6 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Comment 58•5 years ago
|
||
Just for the record. The entire WebSocket support is currently implemented behind a pref: devtools.netmonitor.features.webSockets
Honza
Comment 59•5 years ago
|
||
Hello, thank you all for working on this! I've been missing this in Firefox and even the current working version is miles ahead of Chrome already. A few things that I think might be worth adding (apologies if these have been proposed already / elsewhere) :
- WebSockets support extensions which are negotiated during the initial handshake. It would be great if I could see which extensions have the parties agreed upon and are in use.
- One of the extensions is "permessage-deflate" and I can imagine this being fairly commonly used. It would be great if there was a "Compressed Size" column in the Messages tab (not available if the extension is not in use and hidden by default).
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Updated•5 years ago
|
Comment 60•5 years ago
|
||
I have seen that a WebSocket Inspector was added to Firefox 71. Is it also planned to allow intercepting and editing WebSocket messages? (similar to the "Edit and Resend" feature for HTTP requests)
Is there a WebExtension API that allows viewing and editing WebSocket messages? Or is it planned to have an API in the future like for HTTP requests?
Otherwise, how are the extensions previously mentioned doing? (for example https://github.com/firebug/websocket-monitor, https://github.com/janodvarko/webext-websocket-monitor and https://github.com/rinatr1/websocket_sniff)
Are they overriding the WebSocket constructor like another project is doing? (https://github.com/skepticfx/wshook)
Currently I am using mitmproxy to automatically modify WebSocket messages but it would be nice if we can do it in the web browser directly, without adding a man-in-the-middle certificate in Firefox.
Comment 61•5 years ago
|
||
(In reply to baptx from comment #60)
I have seen that a WebSocket Inspector was added to Firefox 71. Is it also planned to allow intercepting and editing WebSocket messages? (similar to the "Edit and Resend" feature for HTTP requests)
Yes, we are already working on the platform API that should allow us to implement Edit & Resend for WS messages, see bug 1618711 (the platform work is happening in bug 1621345)
Honza
Comment 62•5 years ago
|
||
Thanks Honza, do you also have an idea for my other questions about a WebExtension API?
Comment 63•5 years ago
|
||
(In reply to baptx from comment #60)
Is there a WebExtension API that allows viewing and editing WebSocket messages?
I don't think we have but, Luca do we have any plans for WebExtension API for WebSockets?
Otherwise, how are the extensions previously mentioned doing? (for example https://github.com/firebug/websocket-monitor
This extension is based on Add-on SKD (deprecated) and nsIWebSocketEventService
the platfrom API used also by DevTools now.
https://github.com/firebug/websocket-monitor/blob/master/lib/wsm-actor.js#L267
, https://github.com/janodvarko/webext-websocket-monitor and
This is only a prototype that was supposed to use WebExtensions experiments API, it's also based on nsIWebSocketEventService
Read more about WebExtensions experiments https://webextensions-experiments.readthedocs.io/en/latest/
I don't know about this one.
Honza
Comment 64•5 years ago
|
||
(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #63)
(In reply to baptx from comment #60)
Is there a WebExtension API that allows viewing and editing WebSocket messages?
I don't think we have but, Luca do we have any plans for WebExtension API for WebSockets?
At the moment we do not have any immediate plan for a WebExtension API for WebSockets, but it sounds like a reasonable addition (e.g. I think that it would be reasonable to be under the browser.devtools.network
API namespace, e.g. in a new API namespace named browser.devtools.network.websockets
), especially given that we do have an experimental API to actually evaluate how the API would looks like and what it would provide.
I'm going to needinfo Philipp for his opinion from a product perspective.
Otherwise, how are the extensions previously mentioned doing? (for example https://github.com/firebug/websocket-monitor
This extension is based on Add-on SKD (deprecated) and
nsIWebSocketEventService
the platfrom API used also by DevTools now.https://github.com/firebug/websocket-monitor/blob/master/lib/wsm-actor.js#L267
, https://github.com/janodvarko/webext-websocket-monitor and
This is only a prototype that was supposed to use WebExtensions experiments API, it's also based on nsIWebSocketEventService
Read more about WebExtensions experiments https://webextensions-experiments.readthedocs.io/en/latest/I don't know about this one.
From a quick look to the https://github.com/rinatr1/websocket_sniff repository it seems that the extension is using a content script to override the WebSocket global in all webpages, from the ws_sniffer.js content script here.
Comment 65•5 years ago
|
||
Hi Philipp,
As mentioned in comment 63 and comment 64, some times ago Jan created an experimental API for a WebSockets monitoring/sniffing WebExtensions API (See https://github.com/janodvarko/webext-websocket-monitor).
Given that the underlying feature is also actively used by the integrated WebSocket Inspection DevTools (and so it is an internal component that is actively used and maintained), it may be interesting to also provide a WebExtension API based on the same internals, what do you think about it from a product perspective?
Comment 66•4 years ago
|
||
Sorry if this is not the correct place to ask this, but is there a possibility to add UNICODE support to the message inspector? ATM. it's not supported, so all messages going over the socket are "unreadable" if special (æøå e.g.) are used. It would be even better if Unicode similes also were supported.
Comment 67•4 years ago
|
||
(In reply to PS from comment #66)
Sorry if this is not the correct place to ask this, but is there a possibility to add UNICODE support to the message inspector? ATM. it's not supported, so all messages going over the socket are "unreadable" if special (æøå e.g.) are used. It would be even better if Unicode similes also were supported.
Yes, this should be supported.
Can you please file a new bug and provide a simple test case (an online page or you can attach an HTML page to the bug) so we can use to test this.
Thanks!
Honza
Comment 68•4 years ago
|
||
(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #67)
(In reply to PS from comment #66)
Sorry if this is not the correct place to ask this, but is there a possibility to add UNICODE support to the message inspector? ATM. it's not supported, so all messages going over the socket are "unreadable" if special (æøå e.g.) are used. It would be even better if Unicode similes also were supported.
Yes, this should be supported.
Can you please file a new bug and provide a simple test case (an online page or you can attach an HTML page to the bug) so we can use to test this.
Thanks!
Honza
Thanks, I've done so here: https://bugzilla.mozilla.org/show_bug.cgi?id=1646932
(I didn't manage to include screenshots in the bug report, so I liked to them instead.)
Comment 69•4 years ago
|
||
I think having WebExtension APIs around this would be great, especially if it can be integrated with webRequest in some way. I'm forwarding this to Jorge though.
Comment 70•4 years ago
|
||
I like the idea. Does Chrome support some API already?
Comment 71•4 years ago
|
||
Sounds like a good idea, but I don't think we'll prioritize this unless there's a clear need for developers to use it.
Updated•2 years ago
|
Description
•