1. Visit Chrome Web Store
2. Click "Add to Chrome" and confirm installation
3. Open DevTools (F12) → "WebSocket DevTools" tab

1. Visit Microsoft Edge Add-ons
2. Click "Get" and confirm installation
3. Open DevTools (F12) → "WebSocket DevTools" tab

• 🌐 WebSocket DevTools - Official website with documentation and demos
• 📺 YouTube Video - Demo video

Star History Chart

• 🔄 Background Monitoring - Continuously monitor connections even when DevTools panel is closed
• 🎮 Message Simulation - Send custom messages in both directions (Client ↔ Server)
• 🚧 Traffic Control - Block messages and simulate network issues for testing
• 💾 Favorites System - Save and organize frequently used messages
• 🎨 DevTools Integration - Native Chrome DevTools panel experience
• 🖼️ Iframe Support - Full WebSocket proxy support for iframe embedded connections

Message Monitoring

Message Monitoring

Key Features Demonstrated:

• Message Blocking: Intercept and block WebSocket messages in real-time
• Message Simulation: Send custom messages to test different scenarios
• Traffic Control: Manage WebSocket traffic flow for debugging
• JSON Support: Full JSON parsing and formatting capabilities

1. Install Extension - Add to Chrome and enable background monitoring
2. Open DevTools (F12) → Find "WebSocket DevTools" tab
3. View Captured Data - All WebSocket connections are automatically captured in background
4. Inspect Messages - Click connections to view message history
5. Simulate Messages - Use Simulate tab with JSON editor
6. Save Favorites - Star frequently used messages for quick access

💡 Pro Tip: The extension monitors WebSocket connections in the background, so you won't miss any connections even if you open DevTools after the WebSocket is established!

• ✅ No data collection - Everything stays in your browser
• ✅ Local storage only - No external servers or tracking
• ✅ Open source - Fully transparent and auditable code
• ✅ Minimal permissions - Only what's needed for functionality

Main Interface