What problem does it solve? Debugging WebSocket traffic in the browser is difficult because native DevTools offers limited visibility into frames, no way to simulate server or client messages, and no ability to block traffic for testing error handling. This Skill guides you through using the WebSocket DevTools extension to monitor, simulate, and block WebSocket messages directly inside Chrome or Edge DevTools. ## Core Features & Use Cases - Real-Time Monitoring: Automatically captures all WebSocket connections and messages in the background, even when DevTools is closed, with JSON pretty-printing and filtering. - Bidirectional Message Simulation: Send custom messages as if they came from the client or the server to test handlers without modifying application code. - Traffic Blocking: Intercept and block messages by content, type, or URL pattern to test reconnection logic, retry mechanisms, and error handling. - Use Case: You are testing a trading dashboard's reconnection logic. Block all incoming price_update messages to simulate a network failure, verify the exponential backoff reconnection behavior, then remove the block and confirm recovery. ## Quick Start Install the WebSocket DevTools extension from the Chrome Web Store, open DevTools on a page with WebSocket connections, and use the WebSocket DevTools tab to monitor and simulate messages.
