The new WebSocket Inspector will be released in Firefox 71

3 min read

On Tuesday, Firefox DevTools team announced that the new WebSocket (WS) inspector will be available in Firefox 71. It is currently ready for developers to use in Firefox Developer Edition.

The WebSocket API is used to 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 supports Socket.IO and SockJS, and more support is still a work in progress.

Key features included in Firefox WebSocket Inspector

The WebSocket Inspector is part of the existing Network panel UI in DevTools. It was possible to filter the content for opened WS connections in the panel, but now you can see the actual data transferred through WS frames.
The WS UI now offers a fresh new Messages panel that can be used to inspect WS frames sent and received through the selected WS connection.
There are Data and Time columns visible by default, and you can customize the interface to see more columns by right-clicking on the header.
The WS inspector currently supports the following WS protocols:

- Plain JSON
- Socket.IO
- SockJS
- SignalR and WAMP will be supported soon

5. You can use the pause/resume button in the Network panel toolbar to stop intercepting WS traffic.

Firefox team is still working on a few things for this release for example, binary payload viewer, indicating closed connections, more protocols like SignalR and WAMP and exporting WS frames and more.

For developers, this is a major improvement and the community is really happy with this news. One of them comments on Reddit, “Finally! Have been stuck rolling with Chrome whenever I’m debugging websocket issues until now, because it’s just so damn useful to see the exact messages sent and received.”

Another user commented, “This came at the most perfect time… trying to interface with a Socket.IO server from a Flutter app is difficult without tools to really look at the internals and see what’s going on”

Some of them also feel that with such improvements in Firefox it will soon replace the current Chromium dominance. The comment reads, “I hope that in improving its dev tooling with things like WS inspection, Firefox starts to turn the tide from the Chromium’s current dominance.

Pleasing webdevs seems to be the key to winning browser wars. The general pattern is, the devs switch to their preferred browser. When building sites, they do all their build testing against their favourite browser, and only make sure it functions on other browsers (however poorly) as an afterthought. Then everyone else switches to suit, because it’s a better experience.

It happened when IE was dominant (partly becuse of dodgy business practices, but also partly because ActiveX was more powerful than early JS). But then Firefox was faster and had [better] devtools and add-ons, so the devs switched to Firefox and everyone followed suit. Then Chrome came onto the scene as a faster browser with even better devtools, and now Chromium+Forks is over three quarters of the browser market share. A browser monopoly is bad for the web ecosystem, no matter what browser happens to be dominant.”

To know more about this news, check out the official announcement on the Firefox blog.