How do you inspect websocket traffic with Chrome Developer Tools? [duplicate]

Answer 1

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.

Answer 2

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 on the server

https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#frames