- Published:April 11th, 2016
- Comments:No Comment
- Category:Developer Tools, Planet Mozilla, WebSockets
WebSocket monitor is an extension to Firefox developer tools that can be used to monitor WebSocket connections in Firefox. It allows inspecting all data sent and received.
It's been a while since we published first version of our add-on for inspecting WebSocket traffic and it's good time to summarize all new features and show how it's integrated with Firefox Developer tools.
Download signed version of this add-on from AMO. The source code with further documentation is available on github.
Update 2019/10/21: New WebSocket inspector has been released in Firefox 71
WebSocket Monitor can be used to track any WS connection, but following protocols have an extra support: Socket.IO, SockJS, Plain JSON, WAMP, MQTT.
(click to enlarge)
Introduction
After the add-on is installed, open Firefox Developer Tools (F12 on Win or ⌥⌘I on OSX) and switch into a new Web Sockets panel. The panel displays list of frames sent/received by all WebSockets connections on the current page as well as Connect and Disconnect events.
The screenshot above shows one Connect event, one Sent frame and one Received frame. There is also a summary at the bottom of the list showing number of frames in the list, total size of transferred payload and total time since the first frame.
The screenshot below shows content of the side panel that displays all details of the selected packet.
Filtering
The extension allows simple filtering of the frame list. It's possible to filter using a keyword where only frames with the keyword in the payload are displayed. Or you might pick a connection ID and see only frames sent/received through that connection.
Protocols
WebSocket Monitor allows inspecting any WS connection, but there is an extra support for the following protocols:
These protocols introduce an extra side bar with parsed payload. See the next screenshot that shows parsed SocketIO frame payload as an expandable tree allowing quick inspection.
Table and Chat Perspectives
There are two ways how to visualize frames. Apart from the Tabular View (see the screenshot above) there is also a Chat View that uses well know 'user-chat' approach (used in various messengers).
Inline Data Preview
Both perspectives offers also an inline data preview. You don't have to always select the frame and go to the side bar, just open the data directly in the frame.
There are more small and nifty features so, don't forget to checkout our wiki if you are interested!
No comments yet
No comments yet.