174

I'm trying to inspect websocket traffic using Chrome Developer Tools. From my research it seems you should be able to see it using the network tab - and it even has a filter for 'ws'.

However I've been inspecting sites that I know are using websockets and can't find a way to inspect the messages being sent back and forth. Using Chrome v56, also tried Safari with no luck...

Does anyone know how this can be achieved?

Joel Duckworth
  • 5,455
  • 3
  • 20
  • 21

2 Answers2

275

You need to reload the page with the network tab open and filter by type 'ws'. This will show you a connection being made with a websocket. You can then click on the connection to show the traffic being sent back and forth with the server on the 'Messages' tab

enter image description here

https://developer.chrome.com/docs/devtools/network/reference/#frames

Joel Duckworth
  • 5,455
  • 3
  • 20
  • 21
  • 9
    This seems to be broken with latest version of chrome, or am I wrong. If I try the echo demo: http://www.websocket.org/echo.html and follow the instructions here : https://kaazing.com/inspecting-websocket-traffic-with-chrome-developer-tools/ with chrome version 66.0.3359.139 the message content in the frames tab is always empty. Can anyone confirm this behaviour? – dasPing Apr 27 '18 at 14:26
  • 1
    @dasPing It seems fine to me - Chrome 66 on MacOS... In the Frames tab make sure you don't have any text in the filter and you have 'All' selected for the type – Joel Duckworth Apr 29 '18 at 22:30
  • 6
    @dasPing do you need to drag down the highlighted bar? See https://stackoverflow.com/a/37414271/4493564 – Petr Gazarov May 30 '18 at 00:47
  • Can anyone say what the length property is? Is this the size of the message sent/receive ? – Beingnin Aug 08 '20 at 15:21
  • @NithinChandran yes it is the size of the message sent/received, in bytes by the look of it – Joel Duckworth Aug 11 '20 at 21:39
  • 1
    "Frames" has now (2023/03) become "Messages", and the doc is at https://developer.chrome.com/docs/devtools/network/reference/#frames – Alexander Pavlov Mar 24 '23 at 08:11
14

Information about this traffic is nested deeper in Network tab. Using Chrome 58+, you will see entry about connection to the websocket, on the main Network tab listing.

This change a protocol (HTTP status 101),

so

every possible next request being websocket traffic, will be visible under Frames tab of above entry.

Of course you can have more opened connections to different websockets, aggregated on the main "Network" tab by websocket type.

Sławomir Lenart
  • 7,543
  • 4
  • 45
  • 61