Repolode
Submit
law-chain-hot

law-chain-hot/websocket-devtools

A Chrome and Edge DevTools extension for monitoring, simulating, and blocking WebSocket traffic in the browser.

View on GitHubWebsite
Stars
1,198
Forks
59
Open issues
19
Last commit
23 days ago

What is it?

WebSocket DevTools is a browser extension that adds a WebSocket panel to Chrome and Edge DevTools. It captures WebSocket connections and their message history, including connections opened before the panel was launched, so developers can inspect real-time traffic in the page they are debugging.

Beyond passive inspection, the extension lets you send custom messages in both directions between client and server, with a JSON editor and formatting support. It can also block specific messages and simulate network problems, which helps when testing how an application behaves under failure conditions. Frequently used messages can be saved as favorites for reuse.

The extension includes proxy support for WebSocket connections inside iframes. Data is stored locally in the browser, and the project is MIT-licensed open source.

Key features

  • 01Captures WebSocket connections in the background, even before the DevTools panel is opened.
  • 02Sends custom messages in both directions between client and server.
  • 03Blocks specific messages and simulates network issues for testing.
  • 04Formats and inspects message payloads with a JSON viewer.
  • 05Saves frequently used messages as favorites.
  • 06Proxies WebSocket connections inside iframes.

Use cases

  • Debugging real-time chat or multiplayer game messages in the browser.
  • Testing how a front-end handles dropped or malformed WebSocket messages.
  • Replaying or injecting server messages to reproduce a bug without a live backend.

Quick start

  1. 1

    Install from the Chrome Web Store

  2. 2

    Or install from the Microsoft Edge Add-ons store

  3. 3

    Open DevTools (F12) and select the WebSocket DevTools tab

Things to know

  • Manual installations from GitHub do not update automatically.
  • Works only in Chrome and Edge.

Topics

#websocket#devtools#chrome-extension#debugging#real-time#network#chrome-extensions#real-time-chat#real-time-monitoring#socket-io

FAQ

What is websocket-devtools?
A Chrome and Edge DevTools extension for monitoring, simulating, and blocking WebSocket traffic in the browser. WebSocket DevTools is a browser extension that adds a WebSocket panel to Chrome and Edge DevTools. It captures WebSocket connections and their message history, including connections opened before the panel was launched, so developers can inspect real-time traffic in the page they are debugging.
Is websocket-devtools free to use? What license does it have?
websocket-devtools is open source under the MIT license. Check the license terms before using it in commercial products.
Is websocket-devtools still maintained?
Actively maintained. The last commit to websocket-devtools was on Sep 28, 2026.
What can I use websocket-devtools for?
Debugging real-time chat or multiplayer game messages in the browser. Testing how a front-end handles dropped or malformed WebSocket messages. Replaying or injecting server messages to reproduce a bug without a live backend.
How do I install websocket-devtools?
Install from the Chrome Web Store Or install from the Microsoft Edge Add-ons store Open DevTools (F12) and select the WebSocket DevTools tab
Where can I get websocket-devtools?
The source code and installation instructions are on GitHub: https://github.com/law-chain-hot/websocket-devtools

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects