skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

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
One-click install
npx skills add https://github.com/Aradotso/devtools-skills --skill websocket-devtools-extension
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
CygnusfearCygnusfear
5

chrome-devtools

Control Chrome DevTools Protocol to automate browser interactions and capture console, network, and screenshots.

Community
Advanced
adriandarianadriandarian

trace-operations

Capture, replay, and export 3Lens traces via CLI for debugging and regression testing.

Community
Intermediate
OpenCovenOpenCoven
20

chrome-devtools

Inspect live pages, network, and performance using Chrome DevTools MCP.

Official
Intermediate
Soul-Brews-StudioSoul-Brews-Studio
116

gemini

Control Gemini browser tabs and chats via MQTT WebSocket commands.

Official
Advanced