WebSocket Traffic Inspection in Chrome Developer Tools

Just like debugging any other thing, doing the same for websocket traffic can be really useful. Not sure if firebug does that, but inspecting your websocket traffic in chrome dev tools is definitely possible.

Some Code First

Whenever dealing with websockets, I find myself mostly working with Node.js and Socket.IO. You can setup a quick node server that does websocket data transfer back and forth with socket.io. Check out some code here to get started.

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

If you are reading this post, then you probably already have an app that’s leveraging the power of websockets to do something in realtime.

How to Inspect ?

Take the following steps:

  1. Open Chrome Dev Tools.
  2. Click Network Tab.
  3. Filter the traffic by clicking WebSockets in the bottom-most bar.
  4. Find your proper websocket connection and click it.
  5. Now you will see a new pane appear with Headers and Frames tab. Click the Frames tab.
WebSockets Chrome Debugging

Note: Unfortunately, the Frames pane showing messages does not refresh automatically in realtime. To refresh the data table, click that connection again from the Network tab’s Name Column.

Chrome version used is 22, but I also remember inspecting in Chrome 20 or so.

Happy WebSockets Debugging!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *