Inspecting WebSocket Traffic with Chrome Developer Tools

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 updated Chrome Dev Tools,  you can now see the WebSocket traffic coming and going to and 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 20+.
  2. Navigate to the Echo demo, hosted on the websocket.org site.
  3. Turn on the Chrome Developer Tools.
  4. Click Network, and to filter the traffic shown by the Dev Tools, click
    WebSockets (all the way on the bottom).
  5. In the Echo demo, click Connect.

  6. Click www.websocket.org on the left, representing the WebSocket connection.
  7. Make sure you’re on the Headers tab. This tab shows the WebSocket handshake.
    Request URL:ws://echo.websocket.org/?encoding=text
    Request Method:GET
    Status Code: 101 Web Socket Protocol Handshake
    

    Request Headers

    Connection:Upgrade
    Cookie:__utma=9925811.1340073179.1336513627.1336513627.1336513627.1; __utmb=9925811.4.10.1336513627; __utmc=9925811; __utmz=9925811.1336513627.1.1.utmcsr=websocket.org|utmccn=(referral)|utmcmd=referral|utmcct=/
    Host:echo.websocket.org
    Origin:http://www.websocket.org
    Sec-WebSocket-Extensions:x-webkit-deflate-frame
    Sec-WebSocket-Key:DIbT9axdUEPm89HWFqMAZA==
    Sec-WebSocket-Version:13
    Upgrade:websocket
    (Key3):00:00:00:00:00:00:00:00
    Query String Parameters view URL encoded
    encoding:text
    

    Response Headers

    Access-Control-Allow-Credentials:true
    Access-Control-Allow-Headers:content-type
    Access-Control-Allow-Origin:http://www.websocket.org
    Connection:Upgrade
    Date:Tue, 08 May 2012 22:14:46 GMT
    Sec-WebSocket-Accept:rKTyKcnJ105fv4ebnspiYbCB9ns=
    Server:Kaazing Gateway
    Upgrade:WebSocket
    (Challenge Response):00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00

  8. Click the Send button in the Echo demo.
  9. 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.

    The little arrow indicates the direction of the message, after the timestamp, op code, and mask you see the length and contents of the WebSocket message.