WebSocket DevTools is an open-source Chrome and Microsoft Edge extension that adds a dedicated "WebSocket DevTools" panel to the browser's developer tools, giving front-end and real-time application developers continuous background capture, inspection, simulation and blocking of WebSocket traffic.

What it is

WebSocket DevTools is a JavaScript browser extension, released under the MIT licence, that installs into Chrome or Microsoft Edge and registers a panel named "WebSocket DevTools" inside the browser's DevTools window opened with F12. It lives in the browser-extension ecosystem rather than inside the page under test, a design that lets it monitor WebSocket connections in the background and keep capturing them even when the DevTools panel is closed. It is distributed through the Chrome Web Store and the Microsoft Edge Add-ons store, with source code on GitHub, a documentation site at websocket-devtools.com and a demo video.

The concrete problem it solves is the timing gap in ordinary WebSocket debugging. A socket opened during page load, before the inspector is opened, is easily missed, and inspection on its own does not let a developer inject traffic or hold messages back. WebSocket DevTools replaces that ad-hoc workflow with background capture, a message history per connection, a JSON viewer for message payloads, a Simulate tab for sending custom messages, and controls for blocking traffic and simulating network issues, all inside the DevTools surface developers already use.

Key capabilities

• Background monitoring that continues to capture WebSocket connections while the DevTools panel is closed, so connections established before the panel opens are not missed.
• Message simulation in both directions, client to server and server to client, driven from a Simulate tab with a JSON editor.
• Traffic control that intercepts and blocks WebSocket messages in real time and simulates network issues for testing.
• Full JSON parsing and formatting in the message detail and JSON viewer, shown alongside message blocking in the project's demo.
• A favorites system that saves, organises and stars frequently used messages for quick access.
• Native DevTools integration, presented as a panel inside the browser's own developer tools rather than a separate window or overlay.
• Iframe support, with full WebSocket proxy support for connections embedded in iframes.

Who uses it and how

• Teams building real-time chat and other WebSocket-backed messaging features, who inspect message history on live connections and re-send saved messages from their favorites.
• Developers working with Socket.IO and comparable real-time libraries, both named among the project's topics, who need to see the frames client and server exchange.
• Browser game developers testing how a client behaves when messages are blocked or network issues are simulated.
• Engineers debugging applications that open sockets inside iframes, which the extension proxies.
• Individual developers and small teams who want a local-only tool: no data collection, local storage only, and minimal permissions.

Getting started

Install from the Chrome Web Store ("Add to Chrome") or the Microsoft Edge Add-ons store ("Get"), then open DevTools with F12 and select the "WebSocket DevTools" tab. Alternatively, download the ZIP from the latest GitHub release, enable Developer mode at chrome://extensions or edge://extensions, and use Load unpacked.

How it compares

No list of paid products it replaces is supplied here, and the facts name no comparable tools. On that basis it stands alone in this registry.

When to use it — and when not to

Nothing server-side has to be operated, because the extension collects no data, keeps everything in browser local storage and contacts no external server. It is the wrong choice for anyone who needs this workflow in a browser other than Chrome or Edge, since only those two installation paths are documented. Manual ZIP installations do not update automatically, so users who install that way must check the Releases page for newer versions themselves.