Introduction

It will be useful if you can debug the WebSocket connections in your browser to eliminate any connection issues. In this tutorial, we will go through the process of debugging with the developer tools in Chrome or Firefox. Note importantly that Chrome is preferred as it provides better support over WebSocket.

Debugging WebSocket in Chrome

Steps

1. Open the Developer Tools by selecting "More Tools" > "Developer tools".
2. Select the Network tab.
3. Navigate to or reload the page that you want to debug.
4. You will see a number of requests in the window. Now filter all WebSocket connections by selecting the "WebSockets" tab.
5. All established WebSocket connections will be shown here.
   
   
   
   
6. You can select the interested connection and view its request and response headers.
   
   
   
   
7. To view the contents of each incoming and outgoing packets (named as "frames") for the WebSocket connection, choose the "Frames" tab. You can find all the messages in this connection. If you use Socket.IO to establish the WebSocket connection, you may find some extra information in which the Socket.IO library uses to maintain the states.
   
   
   

Understanding the error messages

• If you forget to set up the server side for listening WebSocket connections (e.g., the socket.io module in your application), you may encounter the following error in the Console.
  
  
  
• If the browser cannot connect to the server using WebSocket (e.g., the server application crashes), you may receive the Connection Refused error.
  
  
  

Debugging WebSocket in Firefox

Steps

1. Open the Developer Tool for Network by selecting "Developer" > "Network".
   
   
   
2. Navigate to or reload the page that you want to debug.
3. You will see a number of requests in the window.
   
   
   
4. Now filter all WebSocket connections by selecting the "Other" tab. All established WebSocket connections will be shown here.
   
   
   
   
5. You can select the interested connection and view its request and response headers.
   
   
   
   
6. Different from Chrome, Firefox does not natively support viewing the frames of WebSocket connections. Here comes a good reason to switch to Chrome :-)

Identifying possible issues

Firefox's developer tools do not provide a good support to WebSocket debugging. Yet, you are able to identify some connection problems by inspecting the requests sent.

If you see multiple GET requests sending to the same URL without responses, it is possible that the WebSocket connection fails to esatablish.