google-chromewebsocket

Debugging WebSocket in Google Chrome

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.

Solution

  • 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 Messages 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.