Debugging WebSocket in Google Chrome

google-chrome websocket
mellowsoon picture mellowsoon · Apr 22, 2011 · Viewed 218k times · Source

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

kanaka picture kanaka · Apr 22, 2011

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.

Related questions

Differences between socket.io and websockets

What are the differences between socket.io and websockets in node.js? Are they both server push technologies? The only differences I felt was, socket.io allowed me to send/emit messages by specifying an event name. In the case …

Read More
websocket closing connection automatically

I'm building an application in java that has an embedded websocket server based on jetty. The client is the default websocket implementation in google chrome. Everything is working ok, only if there is no transfer between server and client after …

Read More
'Sec-WebSocket-Accept' header is missing in Chrome 17

Edit: I tried this phpwebsocket: http://www.wilky.it/Shared/phpwebsocket.zip and it works in Firefox, but my question still remains: how do I get websockets to work with a php server in Chrome 17? I'm following the tutorial here: …

Read More