WebTransport Inspector
A browser extension for Chrome and Firefox that gives you full visibility into MoQT connections running over WebTransport.
WebTransport Inspector adds a panel to your browser’s DevTools that decodes MoQT traffic in real time. No proxies, no extra setup — open DevTools and start inspecting.
Features
Section titled “Features”Connection monitoring
Section titled “Connection monitoring”See every WebTransport connection on the page — including connections inside iframes — with live status updates and real-time per-connection bitrate. When you open DevTools mid-session, the extension detects active connections and picks up where you left off. Page reloads cleanly close open sessions.
Control message decoding
Section titled “Control message decoding”All MoQT control messages are decoded and displayed with expand/collapse for message fields. Setup handshakes, subscriptions, publishes, fetches, goaways — every control message is parsed and presented in a readable format. A reassembly buffer handles messages that span chunk boundaries, and multiple messages arriving in a single chunk are all decoded correctly.
The bidirectional MoQT control stream is correctly identified and labeled “MoQT Control” rather than inheriting a track name.
Track subscription tracking
Section titled “Track subscription tracking”The dedicated Tracks tab shows every MoQT track subscription with per-track timing, status, and direction. Features include:
- Namespace grouping — collapsible namespace groups with per-status counts (active, pending, error, done)
- Filter toolbar — filter by active/pending only, TX/RX direction, or group by namespace
- Color-coded tracks — visual distinction across subscriptions
- Per-track stats — bitrate and byte aggregation per track
- Filter state persists across tab switches and sessions
Stream and datagram inspector
Section titled “Stream and datagram inspector”View the full list of QUIC streams with live byte counts in a virtual-scrolled list that stays fast regardless of stream count. Features include:
- Text filter — search streams by track name or namespace (substring match)
- Footer stats bar — stream count and transfer totals (TX/RX bytes), with separate filtered vs. total stats when a filter is active
- Recording toggle — pause stream data capture while keeping control messages and track lifecycle intact
- Clear button — wipe all stream data and free memory/IDB storage
- Datagram support — WebTransport datagrams are intercepted, decoded, and grouped by track alias and group ID
Payload inspection
Section titled “Payload inspection”The extension auto-detects content types and renders payloads accordingly:
- JSON — interactive JSON viewer with syntax highlighting
- CBOR — decoded and displayed with structured fields
- MessagePack — decoded and displayed with structured fields
- ISO BMFF — proper box parser that classifies payloads as CMAF, LOC, or fMP4 based on box types and brand codes. The streams list shows the variant and box count (e.g.,
CMAF(3)) with box names in a tooltip. - Binary — hex viewer with MoQT header fields highlighted in distinct colors
The hex viewer renders inline boundary banners between objects with content description and offset indicator. For streams with multiple objects, a sticky navigation bar (‹ 1/5 ›) lets you jump between objects.
Content detection retries on subsequent chunks when the first chunk arrives before enough data is available for identification.
Trace export and import
Section titled “Trace export and import”Export the current session as a .moqtrace file for offline analysis in the moqtap desktop app. Import previously saved traces back into the extension for review. Traces include control messages, streams, stream data, object headers, and datagram payloads. See .moqtrace File Format for format details.
Persistent preferences
Section titled “Persistent preferences”View settings (sidebar state, viewer mode, filter state, track grouping) are saved across sessions so you don’t have to reconfigure the panel each time you open DevTools.
Installation
Section titled “Installation”Install from the Chrome Web Store or Firefox Add-ons, or load the unpacked extension from source for development.
- Open DevTools (F12 or Cmd+Opt+I)
- Navigate to the WebTransport Inspector panel
- Load or reload a page that uses WebTransport with MoQT
- Connections appear automatically with live message decoding
- Use the Tracks tab to monitor subscription lifecycle, the Streams tab to inspect data streams and datagrams, and the Messages tab for the control message log
The extension works with any WebTransport-based MoQT implementation — it inspects the wire protocol directly, regardless of which client library or relay you’re using.