Debugging WebSocket in Google Chrome

Question

Is there a way, or an extension, that lets me watch the "traffic" going through a WebSocket? For debugging purposes I'd like to see the client and server requests/responses.

Answer 1

Chrome Canary and Chromium now have WebSocket message frame inspection feature. Here are the steps to test it quickly:

1. Navigate to the WebSocket Echo demo, hosted on the websocket.org site.
2. Turn on the Chrome Developer Tools.
3. Click Network, and to filter the traffic shown by the Dev Tools, click WebSockets.
4. In the Echo demo, click Connect. On the Headers tab in Google Dev Tool you can inspect the WebSocket handshake.
5. Click the Send button in the Echo demo.
6. THIS STEP IS IMPORTANT: To see the WebSocket frames in the Chrome Developer Tools, under Name/Path, click the echo.websocket.org entry, representing your WebSocket connection. This refreshes the main panel on the right and makes the WebSocket Frames tab show up with the actual WebSocket message content.

Note: Every time you send or receive new messages, you have to refresh the main panel by clicking on the echo.websocket.org entry on the left.

I also posted the steps with screen shots and video.

My recently published book, The Definitive Guide to HTML5 WebSocket, also has a dedicated appendix covering the various inspection tools, including Chrome Dev Tools, Chrome net-internals, and Wire Shark.

Answer 2

Short answer for Chrome Version 29 and up:

1. Open debugger, go to the tab "Network"
2. Load page with websocket
3. Click on the websocket request with upgrade response from server
4. Select the tab "Frames" to see websocket frames
5. Click on the websocket request again to refresh frames

Answer 3

They seem to continuously change stuff in Chrome, but here's what works right now :-)

• First you must click on the red record button or you'll get nothing.

• I never noticed the WS before but it filters out the web socket connections.

• Select it and then you can see the frames which will show you error messages etc.

Answer 4

I have used Chrome extension called Simple WebSocket Client v0.1.3 that is published by user hakobera. It is very simple in its usage where it allows opening websockets on a given URL, send messages and close the socket connection. It is very minimalistic.

Answer 5

Chrome developer tools now have the ability to list WebSocket frames and also inspect the data if the frames are not binary.

Process:

1. Launch Chrome Developer tools
2. Load your page and initiate the WebSocket connections
3. Click the Network Tab.
4. Select the WebSocket connection from the list on the left (it will have status of "101 Switching Protocols".
5. Click the Frames sub-tab. Binary frames will show up with a length and time-stamp and indicate whether they are masked. Text frames will show also include the payload content.

If your WebSocket connection uses binary frames then you will probably still want to use Wireshark to debug the connection. Wireshark 1.8.0 added dissector and filtering support for WebSockets. An alternative may be found in this other answer.

Answer 6

Chrome developer tools allows to see handshake request which stays pending during the opened connection, but you can't see traffic as far as I know. However you can sniff it for example.