Accessing the inspector
When you are inspecting a web app that utilizes a web socket connection, the web socket requests are listed in the list of requests in the Network Monitor along with all other requests.
You can use the WS button to filter the list for just web socket connections. Only requests with the 101 status code (WebSocket Protocol Handshake) are visible, which indicates that the server is switching to a web socket connection.
Clicking on a web socket request opens the usual sidebar to reveal additional details, with the addition of a new Messages panel, which can be used to inspect web socket frames sent and received through the selected connection.
The live-updated table shows data for sent (green arrow) and received (red arrow) frames. Each frame expands on click, so you can inspect the formatted data.
Pausing web socket traffic
You can use the pause/resume button in the Network Monitor toolbar to stop intercepting web socket traffic. This allows you to capture only the frames that you are interested in.
Filtering web socket frames
To focus on specific messages, frames can be filtered using the filter at the top of the Messages panel.
Columns in the Messages panel
In the Messages panel, you can choose to show the following information about each frame:
the Data and Time columns are visible by default, but you can customize the interface to see more columns by choosing which ones to show from the Messages panel context menu.
Expanding each frame
Selecting a frame in the list shows a preview of the data being sent in that frame at the bottom of the Messages panel.
Supported WS protocols
The inspector currently supports the following web socket protocols:
- Plain JSON
We also have the following coming soon:
The payload based on those protocols is parsed and displayed as an expandable tree for easy inspection, although you can of course still see the raw data (as sent over the wire) as well.