Firefox’s New WebSocket Inspector – Mozilla Hacks – the Web developer blog, Hacker News

TheFirefox DevTools teamand our contributors were hard at work over the summer, gettingFirefox 70jam-packed with improvements. We are especially excited about our new WebSocket inspection feature, because you told us in feedback how important it would be for your daily work.

To use the inspector now, downloadFirefox Developer Edition, open DevTools’Networkpanel to find theMessagestab. Then, keep reading to learn more about WebSockets and the tricks that the new panel has up its sleeve.

But first, big thanks toHeng Yeow Tan, theGoogle Summer of Code (GSoC) )student who’s responsible for the implementation.

A Primer on WebSockets

We use theWebSocket (WS) APIto create a persistent connection between a client and server. Because the API sends and receives data at any time, it is used mainly in applications requiring real-time communication.

Although it is possible to work directly with the WS API, some existing libraries come in handy and help save time. These libraries can help with connection failures, proxies, authentication and authorization, scalability, and much more. The WS inspector in Firefox DevTools currently supportsSocket.IOandSockJS, but more support is in the works.

Want to learn more about how to set up WebSocket for your client applications? Head over toMDN’s guides. In the meantime, let’s dive into the new feature.

Getting started with the WebSocket Inspector

The WebSocket Inspector is part of the existingNetworkpanel UI in DevTools. It’s already possible to filter the content for opened WS connections in this panel, but till now there was no chance to see the actual data transferred through WS frames.

The following screenshot shows the WS filter in action. Only the(request)WebSocket Protocol Handshake) is visible. The response code indicates that the server is switching to WS connection.

Clicking on the 101 request opens the familiar sidebar, showing details about the selected HTTP request. In addition, the UI now offers a fresh newMessagespanel that can be used to inspect WS frames sent and received through the selected WS connection.

The live-updated table shows data for sent (green arrow) and received (red arrow) WS frames. Each frame expands on click, so you can inspect the formatted data.

To focus on specific messages, frames can be filtered free text.

TheDataandTimecolumns are visible by default, but you can customize the interface to see more columns by right-clicking on the header.

Selecting a frame in the list shows a preview at the bottom of theMessagespanel.

The inspector currently supports the following WS protocols – and we have more planned:

(Plain JSON)
• Socket.IO
• SockJS

Payload based on those protocols is parsed and displayed as an expandable tree for easy inspection. Of course, you can still see the raw data (as sent over the wire) as well.

Use the pause / resume button in the Network panel toolbar to stop intercepting WS traffic. This allows you to capture only the frames that you are interested in.

What’s next for the WebSockets inspector

We wanted to release this initial feature set quickly to let you use it. We have a few things that we are still working on for upcoming releases:

• Binary payload viewer
• Indicating closed connections
• Exporting WS frames (as part ofHAR)
• See ourbacklogfor more of what’s coming

We would love yourfeedbackon the new WebSocket Inspector, which is available now inFirefox Developer Edition 70. If you haven’t had a chance yet, install and open Developer Edition, then follow along with this post to master WebSocket debugging.

Read More