WebRTC Inspector

WebRTC Inspector is a free, open-source Chrome DevTools panel for inspecting and testing WebRTC peer connections, data channels, and WebSockets on any web page — live, with no app changes, no SDK integration, and no backend. If you build, test, or support real-time video calling, voice calling, live streaming, or WebRTC-based data apps, this is the tool that shows you what your RTCPeerConnection is actually doing right now, and lets you break it on purpose to prove your reconnect logic actually works. WHY INSTALL THIS Chrome's built-in chrome://webrtc-internals gives you a wall of raw stats and no way to act on them. WebRTC Inspector instead gives you a readable, live DevTools panel plus a full set of fault-injection tools — kill a connection, simulate a signaling outage, corrupt a fake mic feed, intercept a data-channel message — so you can reproduce "the call dropped" or "reconnect never happens" bugs on demand instead of waiting for them to occur in the wild. It's framework- and SDK-agnostic: it patches the standard browser WebRTC/WebSocket APIs directly, so it works identically whether your app is built on plain WebRTC, a commercial SDK, an open-source client, or a custom SFU/MCU integration. WHO THIS IS FOR • WebRTC / real-time engineers debugging peer connections, ICE negotiation, SDP, and data channels during development • QA engineers who need to reliably reproduce degraded-network, packet-loss, and reconnect scenarios instead of relying on flaky real-world conditions • Support and on-call engineers triaging "the call dropped," "video froze," or "audio cut out" reports and needing to correlate a lifecycle event with what was on screen • Teams building or maintaining WHIP/WHEP ingest, SFU/MCU-based conferencing, live streaming, telehealth, IoT device calling, or any product with an embedded video/voice/data channel • Anyone who currently pastes debug code into the console or reads through chrome://webrtc-internals stats dumps by hand WHAT YOU SEE IN THE PANEL • Live RTCPeerConnection state for every connection on the page: connection/ICE state, local and remote tracks, transceivers, data channels, SDP summaries (m-lines, codecs), and local/remote ICE candidate types • WebSocket traffic — signaling, WHIP/WHEP, or any app-level socket — with sent/received counts and recent message previews • Per-connection sparklines for bitrate, RTT, jitter, and packet loss, refreshed every second from live stats • A visual timeline of open/close/error lifecycle events per connection and per channel • A filterable, searchable event log (free text, or type:/conn:/dir: tokens) of the last 20 lifecycle events • One-click copy buttons on SDP, data-channel/WebSocket messages, and log entries — paste straight into a bug report • Automatic dark/light theme sync with DevTools • "Preserve log" across page reloads/navigations, buffered across multiple page loads • Bad-state-first sorting, so a failed or disconnected connection always surfaces to the top of the list • Optional automatic screenshot capture on connection-created, track-added, or reconnect events — visually ties a WebRTC state change to exactly what the user saw • A right-click "Test this stream" overlay on any <video>/<audio> element showing live kind, status, and quality WHAT YOU CAN DO — REAL FAULT INJECTION, NOT MOCKS Every action below calls the real, standard browser WebRTC/WebSocket API on the page you're inspecting — this isn't a simulated preview, it's the same API your app already uses, driven from DevTools instead of your own code: • Inject synthetic audio into a fake microphone track, so the app receives it as genuine mic input • Swap in a generated test-pattern camera feed (configurable size and label text) in place of the real camera • Replace an outgoing audio or video track mid-call • Send a message on an existing data channel as if the app itself sent it, or inject one as if it arrived from the remote peer • Install a data-channel or WebSocket interceptor that rewrites or blocks messages by direction — outgoing, incoming, or both • Kill a connection outright (a real pc.close()) to test cold-reconnect recovery • Simulate a signaling/data-channel network outage for a set duration, to test heartbeat and backoff logic • Restart ICE in place to test renegotiate-without-teardown recovery paths BUILT ON A FRAMEWORK-AGNOSTIC OPEN-SOURCE CORE The panel is powered by an MIT-licensed npm package (@zoharbabin/webrtc-inspector) that patches RTCPeerConnection, RTCDataChannel.send, RTCRtpSender/Receiver, MediaStreamTrack.stop, WebSocket, fetch/XMLHttpRequest (for HTTP-based signaling like WHIP/WHEP), and getUserMedia/getDisplayMedia. Because it patches the standard browser globals rather than any particular SDK, it works on any WebRTC app regardless of which library or vendor it's built on. Beyond the Chrome extension, the same core ships as: • A Playwright test helper — drop it into addInitScript() for scripted, repeatable WebRTC test suites • An MCP (Model Context Protocol) server — lets AI coding agents like Claude Code inspect and fault-inject live WebRTC sessions directly, with a bundled skill covering reconnect testing, quality-regression triage, and signaling-outage recipes • A plain console-paste script for one-off manual inspection with no install at all That means the same debugging vocabulary — kill this connection, simulate this outage, inject this message — works whether a human is doing it from DevTools or an automated test/agent is doing it from code. WHERE THIS FITS: INDUSTRIES AND SCENARIOS WebRTC now sits underneath far more than video calling. WebRTC Inspector is used the same way regardless of what's built on top of it: • Video conferencing and webinar platforms — diagnosing negotiation failures, frozen video, or one-way audio in production support tickets • Live streaming and WHIP/WHEP ingest — inspecting HTTP-based signaling alongside media negotiation in one panel • Telehealth and remote consultation apps — prov…