Firefox’s New WebSocket Inspector

The Firefox DevTools team and our contributors were hard at work over the summer, getting Firefox 70 jam-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. The WebSocket inspector will be released in Firefox 71, but is ready for you to use in Firefox Developer Edition now.

To use the inspector now, download Firefox Developer Edition, open DevTools’ Network panel to find the Messages tab. Then, keep reading to learn more about WebSockets and the tricks that the new panel has up its sleeve.

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

A Primer on WebSockets

We use the WebSocket (WS) API 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, but more support is in the works.

Want to learn more about how to set up WebSocket for your client applications? Head over to MDN’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 existing Network panel 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 101 request (WebSocket Protocol Handshake) is visible. The response code indicates that the server is switching to WS connection.

A screenshot of the Network Monitor panel showing the WS inspection feature

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

The WS inspector in the Network Panel, showing messages

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.

A screenshot showing a test of the 101 response in the Messages panel

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

Screenshot showing Messages filtering options in Firefox Dev Tools panel

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

Screenshot of Message showing plain text data sent over WebSocket connection

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

    • Plain JSON
    • Socket.IO
    • SockJS
    • Coming soon
      • SignalR
      • WAMP

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.

Screenshot showing Messages sent via JSON and Socket.IO

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.

Screenshot of network monitor showing the pause/resume button for WS inspection

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
  • 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

We would love your feedback on the new WebSocket Inspector, which is available now in Firefox Developer Edition 70. It will be released in Firefox 71, to include some of your feedback and bugfixes. If you haven’t had a chance yet, install and open Developer Edition, then follow along with this post to master WebSocket debugging.

About Jan Honza Odvarko

Honza is working on Firefox Developer Tools

More articles by Jan Honza Odvarko…

About Harald Kirschner (digitarald)

Harald "digitarald" Kirschner is a Product Manager for Firefox's Developer Experience and Tools – striving to empower creators to code, design & maintain a web that is open and accessible to all. During his 8 years at Mozilla, he has grown his skill set amidst performance, web APIs, mobile, installable web apps, data visualization, and developer outreach projects.

More articles by Harald Kirschner (digitarald)…


11 comments

  1. Camden Narzt

    You say “We would love your feedback on the new WebSocket Inspector”, so please add a link to where you would like that feedback sent such that it will actually be seen.

    October 15th, 2019 at 09:23

    Reply

    1. Harald Kirschner (digitarald)

      Good catch. I added a link to our discourse. Filing bugs works as well and we monitor comments on this post. So basically anywhere

      October 15th, 2019 at 10:52

      Reply

  2. yeah

    Will it be possible to extend the inspector with our own protocols?

    October 15th, 2019 at 10:20

    Reply

    1. Harald Kirschner (digitarald)

      Nothing on file yet, but if it is generic enough you can describe it in a bug and file it here: https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&blocked=885508&product=DevTools&component=Netmonitor

      October 15th, 2019 at 10:53

      Reply

  3. Mahmoud mortada

    Can i use it with signalr? I know it’s not in the list but if any hack can help

    October 15th, 2019 at 13:39

    Reply

    1. Jan Honza Odvarko

      SignalR isn’t supported at this moment, but you can file a bug and perhaps someone can help with the implementation. https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&blocked=885508&product=DevTools&component=Netmonitor

      October 16th, 2019 at 02:23

      Reply

    2. Harald Kirschner (digitarald)

      Tracked here: https://bugzilla.mozilla.org/show_bug.cgi?id=1589068

      October 16th, 2019 at 12:25

      Reply

  4. G

    So you’re expecting us to ignore the fact that you copied this fully from Chrome and didn’t even mention it? Just fork DevTools already. It’s better anyway.

    October 16th, 2019 at 10:05

    Reply

    1. Harald Kirschner (digitarald)

      Actually, I would hope people notice, as they don’t have to learn another UI. I agree that we should have called out the influences and give credit. I will do better next time.

      But let me explain more, as I care about this: As we mentioned in the post, Honza worked on Firefox’s websocket inspection before, as extension. We could have re-created this more complex experience in its own top-level panel. One of our design principles is not to diverge from existing UIs without good reason. More top-level tabs wouldn’t be great as well. So building it based on prior art makes it easy for us to build but especially easier for users to use.

      October 16th, 2019 at 12:46

      Reply

  5. chris

    OH please Oh please. I would love to add MQTT over WS as something that can be decoded. Where is this code ?

    October 16th, 2019 at 14:09

    Reply

    1. Jan Honza Odvarko

      https://bugzilla.mozilla.org/show_bug.cgi?id=1566756
      Contribution appreciated!

      October 17th, 2019 at 06:15

      Reply

Post Your Comment