WebSocket (WS) is a protocol that HTML5 began to offer for full-duplex communication over a single TCP connection, allowing the server to actively push data to the client. In the WebSocket API, the browser and the server only need to complete a handshake, and the two can directly create a persistent connection and transfer data in both directions. Usually, WebSocket can be used to replace Ajax technology for push, and then achieve lower cost, more real-time communication. Generally, WebSocket is mainly used for applications that need real-time communication. A few days ago, Firefox developers introduced the WebSocket Inspector that they will introduce in Firefox 71.
The new WebSocket Inspector is part of the existing Network panel UI in DevTools, where you can already filter the contents of an open WS connection. The screenshot below shows the running WS filter and the response code indicates that the server is switching to a WS connection.
The new WS Inspector will parse the payload based on these protocols and display it as an extensible tree for easy checking. Of course, you can still view the raw data:
- Binary payload viewer
- Indicating closed connections
- More protocols like SignalR and WAMP (and making it extensible)
- Exporting WS frames (as part of HAR)
- See our backlog for more of what’s coming