WebSocket Visualizer

Graphically displays incoming and outgoing WebSocket messages with event type grouping

🔌 WebSocket Visualizer — WebSocket Connection Visualizer for Chrome DevTools WebSocket Visualizer is a powerful developer extension that adds a new tab to Chrome DevTools, displaying all WebSocket messages passing through a page in real time. The extension helps analyze, filter, and understand interactions between the client and server over the WebSocket protocol—without changing application code or using third-party libraries. 🌐 Main Idea Modern applications actively use WebSocket connections for real-time data exchange—chats, exchanges, games, financial panels, IoT devices, and other systems. However, standard browser tools don't provide a convenient way to observe these data streams. WebSocket Visualizer solves this problem: it injects itself into the page context and intercepts native WebSocket events (open, message, close, error, send), visualizing everything in a separate DevTools tab—beautifully, structured, and interactively. ⚙️ Key Features 📡 Intercept All Connections The extension automatically replaces the native WebSocket constructor, tracking all connections opened by a page or libraries (including Socket.io, ws, Primus, etc.) 💬 Message Display Each incoming and outgoing message is displayed as a card with details: Event time (in milliseconds) Direction (⬇️ incoming / ⬆️ outgoing) Event type (type, event, action, cmd — automatically detected) Message content with JSON formatting Connection URL and WebSocket session ID 🧠 Smart Grouping Messages are grouped by event type (e.g., message, update, trade, heartbeat) — allowing you to quickly analyze the protocol structure and the frequency of specific events. 📈 Real-Time Statistics The top panel displays a summary: Active Connections Total Messages Sent and Received All counters are updated in real time without reloading 🔍 Flexible Filtering Quick search by event type or keywords Direction switch: "All / Incoming / Outgoing" Click on an event type in the sidebar to instantly apply a filter ⏸️ Pause and Resume You can pause the event stream for analysis and resume it later without losing context—useful for heavy traffic or historical analysis. 🗑️ Clear and Reset One button clears all messages and statistics, preserving active connections and filters. 🌍 Multilingual Supported interface languages: English 🇬🇧 Russian 🇷🇺 Ukrainian 🇺🇦 The language choice is saved and applied automatically on next launch. 🎨 Modern Design The interface is inspired by Visual Studio Code: Dark theme Soft gradients and highlighting of active elements Smooth message animations Stylized scrollbars and neat typography 🧭 Instructions for use Open DevTools (F12 or Ctrl + Shift + I). Go to the WebSocket tab—this is the extension interface. Load or refresh the page where WebSocket connections are enabled. The extension will automatically intercept and display all events: 🔗 connection — connection created ✅ open — connection opened ⬇️ incoming — incoming message ⬆️ outgoing — outgoing message ❌ close — connection closed ⚠️ error — error or failure Use filters to focus on the events you need. You can pause the stream with the ⏸️ Pause button, examine the data, and then continue with ▶️ Resume. To clear the data, click 🗑️ Clear — the interface will refresh and begin waiting for new connections. All actions are instantly reflected in the UI: animations, counters, and filters are synchronized in real time. Examples of use cases 🔍 Debugging real-time chats and messengers 💸 Analysis of crypto exchange WebSocket APIs 🕹️ Monitoring game servers and network interactions 💬 Testing push notifications and streaming services 🧩 Analysis of non-standard protocols over WS 📊 Educational projects on working with real-time data 🔧 Additional features Automatic JSON formatting with structure highlighting Automatic scrolling to the last message History limitation (up to 1000 messages per list) for performance optimization Security and privacy The extension does not collect, save, or send data from websites. All operations are performed locally within the browser context. Minimal permissions (activeTab, scripting, storage) are used exclusively for data visualization within DevTools. No external requests, trackers, or third-party APIs.