How to view WS/WSS Websocket request content using Firebug or other?

Asked 10/2, 2012 at 0:21 Answered 7/4, 2016 at 5:41

Is there a way to view the Websocket traffic?

Only Websocket headers are visible on the initial handshake.

Everything disappears after the response:

Connection  Upgrade
Sec-WebSocket-Accept    EQqklpK6bzlgAAOL2EFX/nx8bEI=
Upgrade WebSocket

I've tried Firebug, Live Headers, and Fiddler2 to trace the exchange and they all stop logging there.

Vevay answered 10/2, 2012 at 0:21 Comment(1)

Fiddler is easier to use for debugging WebSocket. I have recently written an article on CodeProject, which show you how to debug/inspect WebSocket traffic with Fiddler. codeproject.com/Articles/718660/… – Caesarean 31/1, 2014 at 21:39

Try Chrome's developer tools,

click 'Network' tab
use the filters at the bottom to show only WebSocket connections),
select the desired websocket connection,
note that there are 'Headers', 'Preview', 'Response', etc. sub-tabs to the right,
once data starts flowing a 'WebSocket Frames' subtab will appear. All data going in either direction is logged. Very informative.

Roue answered 6/9, 2012 at 17:31 Comment(4)

I saw this in the latest Canary build at Google IO 2012. very cool! – Vevay 6/9, 2012 at 17:59

For debugginng the server side I have found github.com/kanaka/websockify a great amount of help. I can insert my own debugging anywhere I want in the Python code. It's basic function is to allow you to tunnel to any TCP service to further enhance your debugging pleasure. – Roue 23/10, 2012 at 18:29

on the left there is name column, there are various images and so on , if you filter websocket - you will see socket. Of course if it exists on that page. – Bellbottoms 13/12, 2013 at 12:30

I will quote a user comment (#5751995) since it may help others: "Chrome Dev Tools has a UI bug with the panel, here's the work around #44533611" – Bartholomeo 19/9, 2018 at 17:12

As of 3, September 2014, it seems that WebSocket debugging in FireBug is in the hose : https://getfirebug.com/wiki/index.php/Firebug_2.0_Roadmap#Feature_Overview. But no release date is mentioned.

Update 2019-09-19

See this interesting Mozilla Hacks article.

Update 2017-11-24 The plugin system in Firefox changed. Websocket Monitor is at the moment of writing unavailable :(

Update 2016-04-06

WebSocket debugging in Firefox is finally possible using the Websocket Monitor addon for the Firefox Dev Tools! It is developed by the Firebug development team and its sources can be found here.

Update 2015-10-28

Jeff Griffiths, Product Manager for Firefox Developer Tools:

platform support is in nightly today & a prototype add-on is being worked on here: https://github.com/firebug/websocket-monitor

https://twitter.com/canuckistani/status/659399140590284800

Relevant feature request on the Firefox Bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1203802

Update as of 2015-04-08

Fiddler 4.5 can now inspect WebSocket traffic natively.

Update 2014-09-11

Regarding this comment on the Firebug issue tracker :

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.

Fortenberry answered 22/1, 2014 at 10:0 Comment(2)

Not compatible with Firefox version 57 or bigger. – Godown 24/11, 2017 at 7:35

discourse.mozilla.org/t/websocket-and-socketio-watch-frames/… Replacement in the works: github.com/janodvarko/webext-websocket-monitor – Pourpoint 21/5, 2018 at 5:21

The current version of Fiddler works just fine with WebSocket traffic. See http://blogs.msdn.com/b/fiddler/archive/2011/11/22/fiddler-and-websockets.aspx

See http://blogs.telerik.com/fiddler/posts/13-06-04/what-s-new-in-fiddler-2-4-4-5 for how to put the data on the Log tab.

To display data on a WebSockets tab,

WebSockets tab

you need an extension (this is slated to be built-in for version 2.5). For now, you can grab the current bits. Simply extract the ZIP and put the two files into the \Fiddler2\Scripts folder and restart Fiddler. If you double-click on a WebSocket session in Fiddler’s WebSessions list, the WebSockets tab will appear

Garvy answered 19/2, 2012 at 0:24 Comment(3)

thanks for the tip - yes latest Fiddler does show the info flowing. Too bad it is buried in a log file instead of being on its own tab. – Vevay 6/3, 2012 at 0:11

Firefox v45.0a2 doesn't seem to route web sockets through Fiddler (after reading superuser.com/a/558831/70209 I'm assuming this is because Firefox doesn't use the system proxy). @Garvy - is this something that Fiddler Hook and be improved to accommodate? – Aspire 29/12, 2015 at 14:51

@Matthew: Firefox attempts to use the SOCKS proxy (rather than the HTTPS proxy) for WebSockets. (It might work to create a fake socks proxy setting that will fail?) FiddlerHook is dead and will be removed from Fiddler 4.6.2. – Garvy 30/12, 2015 at 16:58

There is WebSocket Monitor - an extension for Firefox developer tools that can be used to monitor WebSocket connections

After the extension is installed, open Firefox Developer Tools and switch to 'Web Sockets' panel. It's displaying WS frame traffic for the current page. There is an extra support for the following protocols:

Socket IO
SockJS
WAMP
Plain JSON

Anorthite answered 7/4, 2016 at 5:41 Comment(5)

Why the tab doesn't appear? I have checked the options too and there is no checkbox to enable that tab :( – Aeromechanics 16/5, 2016 at 12:0

Hi @Jan Odvarko, Why dont you support for older version of Firefox? I see that you only support Version > 45. – Scanlan 30/5, 2016 at 9:31

WebSocket Monitor requires some platform API that have been introduced in Firefox 45. – Anorthite 31/5, 2016 at 12:28

If the Web Sockets tab doesn't appear it's likely because the extension isn't properly installed. You might try creating new fresh Firefox profile and installing again. – Anorthite 31/5, 2016 at 12:30

Not compatible with Firefox version 57 or bigger. – Godown 24/11, 2017 at 7:35

Not as comfortable as the other options mentioned here, but a universal tool that can help you in various situations: Use wireshark. With some knowledge about TCP you can debug problems that the other tools mentioned can not solve (unexpected disconnections, ...), because they work on a level that's too high. You can also (just as in Firebug, etc) read the actual websocket messages.

The disadvantage of wireshark is that it's rather cumbersome to work with encrypted connections.

Give it a try, I use it all the time to debug a Rails app which communicates with a Python websocket backend.

Disfrock answered 22/10, 2012 at 9:34 Comment(0)

I posted more details about using Chrome and Wireshark for debugging WebSocket messages at:

https://blogs.oracle.com/arungupta/entry/logging_websocket_frames_using_chrome

Dulosis answered 13/11, 2012 at 22:36 Comment(2)

While this may answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – Strontianite 13/11, 2012 at 22:54

Thanks for the tip!The blog has several image snapshots that explain in detail how WebSocket messages can be debugged and that's why included the reference instead of quoting. – Dulosis 14/11, 2012 at 20:11

Use Chrome developer tools

You will see data getting changed in Frames tab.

Forefinger answered 26/8, 2015 at 22:15 Comment(1)

This is the same answer as the top one. Might you consider just adding the screenshots to that one? – Desman 10/10, 2016 at 9:19

-2

In firefox you can open developer toolbar (Shift+F2) and see websockets in Network tab. You can use filtering at the bottom of the tab (choose Other for websockets).

Lottie answered 27/11, 2014 at 15:31 Comment(3)

Seems you're talking about Chrome, not Firefox – Fortenberry 29/1, 2015 at 14:22

It's in Firefox, I have just checked. – Lottie 6/2, 2015 at 13:28

I only see the 101 Switching ProtocolsHTTP response (to tell the client to switch to the WebSocket protocol) in the Firefox Dev Tools. Shift + F2 opens the Developer Toolbar, which is basically a console, which is different from the Firefox Dev Tools – Fortenberry 6/2, 2015 at 13:42

Recommended topics

Hot tags