CODEWITHSUNDEEP
firebugwebsocketfiddler
Stevko
Stevko

Reputation: 4485

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

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.

Upvotes: 72

Views: 93320

Answers (9)

tseifried
tseifried

Reputation: 171

Websocket inspection has been added to Firefox with version 71 has been there since 2019.

In the Developer Tools, under the Network tab select the websocket request and select the Response tab.

enter image description here

Upvotes: 3

Epoc
Epoc

Reputation: 7486

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.

Upvotes: 36

Jan Odvarko
Jan Odvarko

Reputation: 421

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

WebSockets panel in Firefox DevTools

Upvotes: 5

kiranvj
kiranvj

Reputation: 34107

Use Chrome developer tools

enter image description here

enter image description here

You will see data getting changed in Frames tab.

Upvotes: 1

user570605
user570605

Reputation: 768

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).

Upvotes: -2

EricLaw
EricLaw

Reputation: 57075

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

Upvotes: 20

Arun Gupta
Arun Gupta

Reputation: 4035

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

Upvotes: 1

jupp0r
jupp0r

Reputation: 4670

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.

Upvotes: 2

Daniel Shields
Daniel Shields

Reputation: 837

Try Chrome's developer tools,

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

Upvotes: 72

Related Questions