UPDATED May 2017: All content and screenshots updated to Chrome Version 58! This very popular post was originally written 5 years ago, back when Chrome was at version 20! We’ve completely updated this post to be accurate with the current version of Chrome.

What makes working with WebSockets challenging at times is that the messages are extremely tiny and incredibly fast – making it hard to see them. 

With the Chrome Dev Tools, you can now see the WebSocket traffic coming to and going from your browser without using tools like Wireshark.

Here are the simple steps to make the invisible visible:

1. Be sure that your Chrome version is 58+.
2. Navigate to the Echo demo, hosted on the websocket.org site.
3. Turn on the Chrome Developer Tools. Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).
4. Click Network, and to filter the traffic shown by the Dev Tools, clickWS.
5. In the Echo demo, click Connect. The WebSocket connection is displayed in the Network tab.You can see the WebSocket connection for the Echo test listed as echo.websocket.org in the Name column.
6. Click echo.websocket.org in the Name column, representing the WebSocket connection.
7. Client the Headers tab. This tab shows the WebSocket handshake (upgrade request and response).

   Request URL:ws://echo.websocket.org/?encoding=text
   Request Method: GET
   Status Code:101 Web Socket Protocol Handshake
   

   Request Headers:

   GET ws://echo.websocket.org/?encoding=text HTTP/1.1
   Host: echo.websocket.org
   Connection: Upgrade
   Pragma: no-cache
   Cache-Control: no-cache
   Upgrade: websocket
   Origin: http://www.websocket.org
   Sec-WebSocket-Version: 13
   ...
   

   Response Headers:

   HTTP/1.1 101 Web Socket Protocol Handshake
   Access-Control-Allow-Credentials: true
   Access-Control-Allow-Headers: content-type
   Access-Control-Allow-Headers: authorization
   Access-Control-Allow-Headers: x-websocket-extensions
   Access-Control-Allow-Headers: x-websocket-version
   Access-Control-Allow-Headers: x-websocket-protocol
   Access-Control-Allow-Origin: http://www.websocket.org
   Connection: Upgrade
   Date: Thu, 18 May 2017 23:32:06 GMT
   Sec-WebSocket-Accept: 9VamgTwO66To2wyOKLwYnimZrgI=
   Server: Kaazing Gateway
   Upgrade: websocket

8. Click the Send button in the Echo demo. The text in the demo’s Message field is sent and echoed back to the demo.
9. To see the WebSocket frames, click the echo.websocket.org entry, and then click the Frames tab. The Frames tab shows the actual WebSocket message content.The Frames tab content is described below.

The Frames Tab

The Frames tab table contains three columns:

• Data: the message payload. Plain text is displayed here, and for binary opcodes, the column displays the opcode name and code. The following opcodes may be displayed: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame, and Pong Frame.
• Length: the message payload length, in bytes.
• Time: the time when message was received or sent.

Messages are color-coded according to their type:

• Green: outgoing text messages.
• White: incoming text messages.
• Yellow: WebSocket opcodes.
• Red: errors.

Here’s an animated gif showing the entire connection and message process:

For more information, see Analyze the frames of a WebSocket Connection from Google.