Tuesday, February 27, 2018

Debugging websockets in Chrome

Debugging websockets using Chrome turns out to be quite simple.

Here is a step by step guide:

  1. Hit F12 to open the Developer Tools in Chrome

  2. image
  3. Go to the Network tab and select the "WS" filter to only show WebSocket connections.    

  4. image
  5. Open a page where you are using websockets. You should see a request appear in the list.     

  6. Click on the name of the request, and select the tab "Frames".

  7. Messages triggered by your client are shown in green, while messages from the server are white.

  8. clip_image002

No comments: