websocket-devtools-extension

Monitor, simulate, and block WebSocket traffic within Chrome/Edge DevTools.

4|Updated May 16, 2026

Search Tags:#debugging #websocket #replay testing #browser devtools #message simulation #traffic blocking #connection monitoring

Ready to run

npx skills add https://github.com/Aradotso/devtools-skills --skill websocket-devtools-extension

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: websocket-devtools-extension
Source: https://github.com/Aradotso/devtools-skills/tree/main/skills/websocket-devtools-extension
Command: npx skills add https://github.com/Aradotso/devtools-skills --skill websocket-devtools-extension

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the frustration of debugging WebSocket failures by letting you observe, reproduce, and test message behavior directly inside the browser DevTools.

Core Features & Use Cases

Real-time WebSocket monitoring: Captures WebSocket connections and all sent/received messages with timestamps, sizes, and state changes so you never miss activity.
Message simulation: Sends custom client→server or server→client messages to test your handlers without modifying application code.
Traffic blocking: Intercepts and blocks messages (including pattern-based rules) to validate reconnection logic, timeouts, retries, and error handling.
Favorites for repeatable tests: Saves common messages and scenarios so teams can quickly replay complex debugging flows.

Quick Start

Install the extension, open a page that uses WebSockets, then use the WebSocket DevTools panel to monitor traffic and send a simulated message to reproduce the bug.

Frequently Asked Questions about websocket-devtools-extension

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I debug WebSocket messages directly in Chrome or Edge DevTools?▼

Simulate WebSocket messages bidirectionally to test client and server handlers by injecting custom payloads directly through the DevTools panel. This allows you to reproduce specific message scenarios and validate handler logic without modifying your application code.

Can I block WebSocket traffic to test reconnection logic and error handling?▼

Yes, you can block WebSocket traffic using configurable pattern-based rules to intercept messages. This validates reconnection logic, timeouts, retries, and error handling by simulating network failures or dropped messages within the browser.

What is the best way to reproduce a WebSocket bug without changing frontend code?▼

Reproduce WebSocket bugs by monitoring live traffic and replaying saved favorite message scenarios. This allows teams to quickly replicate complex debugging flows and test client/server behaviors reliably without modifying application code.

Does this WebSocket debugging approach work for both client-to-server and server-to-client simulation?▼

Yes, this approach supports bidirectional WebSocket message simulation for both client-to-server and server-to-client traffic. You can inject custom payloads in either direction to test handlers and reproduce specific message behaviors.