1. Open Firebug on this page: http://www.websocket.org/echo.html
2. Enable and switch to the Net Panel
3. On the webpage, click on the "Connect" button |=> A new request should appear in the Net Panel
4. Expand the information about the request |=> A "Headers" and a "Frame" [1] tabs should be proposed
5. Switch to the "Frame" tab |=> The content of the tab is empty
6. On the webpage, click on "Send" |=> Two new entries appear, one displaying the data sent by the client, the other displaying the data returned by the server [2]
7. On the webpage, click on disconnect |=> The request is put in grey, and a new entry should appear in the "Frame" tab saying "Connection closed", with the reason and the code.

And the request should also appear in the Console at the connection.

[1] just a reuse of the name chosen by Web Inspector, though we can choose another name [2] I think of a 2-rows table with the data sent by the client and by the server, but maybe it clutters the display a bit?

Documentation: https://developer.mozilla.org/en-US/docs/WebSockets/WebSockets_reference

Florent

This would be really cool! Any ideas how we should intercept the HTTP communication to collect data we want to display in the Net panel?

Honza

Not sure... Could this do the trick? https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/nsIWebSocketListener

Florent

Yep, this sounds promising.

Honza

Is this happening ? Any alpha / beta branches ?

The status "Triaged" of this issue means that the issue was just reviewed, but work on this didn't start yet.

Sebastian

Hi, Can any of the project members give an estimate of by which version this feature will be available?

-- Sam

Hi, I am also looking for this kind of feature. Found it on Chrome Developer Tools but would love to see it in Firebug too.

Ben

The feature is on our roadmap and we are definitely planning to have it in the next Firebug version. My (rough) time estimate could be something like 4-5 months.

Honza

[2] I think of a 2-rows table with the data sent by the client and by the server, but maybe it clutters the display a bit? The important point is to distinguish sent from received messages, which isn't clear in the Chrome DevTools. Do you mean a 2-rows or a 2-columns table? I created two mockups of how I imagine that.

Sebastian

Hey, I was looking for a way to debug websockets using Firebug and came across this. Is this still on the roadmap or something? Note: I prefer the two-columns format (webSocketDataTwoColumns.png).

Any update?

It's currently off the radar as the Firebug team is working on integrating Firebug with the DevTools at the moment. This means it will be able to reuse the features provided by the built-in DevTools. You may therefore follow https://bugzil.la/885508.

Sebastian