WebSocket Visualisierer

🔌 WebSocket Visualizer – WebSocket-Verbindungsvisualisierer für Chrome DevTools

WebSocket Visualizer ist eine leistungsstarke Entwicklererweiterung, die Chrome DevTools um einen neuen Tab erweitert und alle WebSocket-Nachrichten, die eine Seite durchlaufen, in Echtzeit anzeigt. Die Erweiterung hilft, Interaktionen zwischen Client und Server über das WebSocket-Protokoll zu analysieren, zu filtern und zu verstehen – ohne Anwendungscode zu ändern oder Bibliotheken von Drittanbietern zu verwenden.

🌐 Grundidee

Moderne Anwendungen nutzen WebSocket-Verbindungen aktiv für den Echtzeit-Datenaustausch – Chats, Exchanges, Spiele, Finanzpanels, IoT-Geräte und andere Systeme.
Standard-Browser-Tools bieten jedoch keine komfortable Möglichkeit, diese Datenströme zu beobachten. WebSocket Visualizer löst dieses Problem: Er fügt sich in den Seitenkontext ein und fängt native WebSocket-Ereignisse (Öffnen, Nachricht, Schließen, Fehler, Senden) ab. Die Visualisierung erfolgt in einem separaten DevTools-Tab – ansprechend, strukturiert und interaktiv.

⚙️ Hauptfunktionen

📡 Alle Verbindungen abfangen

Die Erweiterung ersetzt automatisch den nativen WebSocket-Konstruktor und verfolgt alle Verbindungen, die von einer Seite oder Bibliothek (einschließlich Socket.io, ws, Primus usw.) geöffnet werden.

💬 Nachrichtenanzeige

Jede eingehende und ausgehende Nachricht wird als Karte mit Details angezeigt:

Ereigniszeit (in Millisekunden)

Richtung (⬇️ eingehend / ⬆️ ausgehend)

Ereignistyp (Typ, Ereignis, Aktion, Befehl – ​​automatisch erkannt)

Nachrichteninhalt mit JSON-Formatierung

Verbindungs-URL und WebSocket-Sitzungs-ID

🧠 Intelligente Gruppierung

Nachrichten werden nach Ereignistyp (z. B. Nachricht, Update, Handel, Heartbeat) gruppiert – so können Sie die Protokollstruktur und die Häufigkeit bestimmter Ereignisse schnell analysieren.

📈 Echtzeitstatistiken

Im oberen Bereich wird eine Übersicht angezeigt:

Aktive Verbindungen

Gesamtzahl der Nachrichten

Gesendet und empfangen
Alle Zähler werden in Echtzeit aktualisiert, ohne dass sie neu geladen werden müssen.

🔍 Flexible Filterung

Schnellsuche nach Ereignistyp oder Schlüsselwörtern

Richtungsschalter: „Alle / Eingehend / Ausgehend“

Klicken Sie in der Seitenleiste auf einen Ereignistyp, um sofort einen Filter anzuwenden.

⏸️ Pausieren und Fortsetzen

Sie können den Ereignisstrom zur Analyse pausieren und später fortsetzen, ohne den Kontext zu verlieren – nützlich bei hohem Datenverkehr oder historischen Analysen.

🗑️ Löschen und Zurücksetzen

Mit einem Klick werden alle Nachrichten und Statistiken gelöscht, wobei aktive Verbindungen und Filter erhalten bleiben.

🌍 Mehrsprachig

Unterstützte Sprachen für die Benutzeroberfläche:

Englisch 🇬🇧

Russisch 🇷🇺

Ukrainisch 🇺🇦

Deutsch 🇩🇪

Spanisch 🇪🇸

Die Sprachauswahl wird gespeichert und beim nächsten Start automatisch angewendet.

🎨 Modernes Design

Die Benutzeroberfläche ist von Visual Studio Code inspiriert:

Dunkles Design

Weiche Farbverläufe und Hervorhebung aktiver Elemente

Reibungslose Nachrichtenanimationen

Stilisierte Bildlaufleisten und ansprechende Typografie

🧭 Gebrauchsanweisung

Öffnen Sie die DevTools (F12 oder Strg + Umschalt + I).

Gehen Sie zum Reiter „WebSocket“ – dies ist die Benutzeroberfläche der Erweiterung.

Laden oder aktualisieren Sie die Seite, auf der WebSocket-Verbindungen aktiviert sind.

Die Erweiterung erfasst und zeigt alle Ereignisse automatisch an:

🔗 Verbindung – Verbindung hergestellt

✅ Öffnen – Verbindung geöffnet

⬇️ Eingehend – Eingehende Nachricht

⬆️ Ausgehend – Ausgehende Nachricht

❌ Schließen – Verbindung geschlossen

⚠️ Fehler – Fehler oder Störung

Nutzen Sie Filter, um sich auf die gewünschten Ereignisse zu konzentrieren.

Sie können den Stream mit ⏸️ Pause pausieren, die Daten prüfen und dann mit ▶️ Fortsetzen fortfahren.

Um die Daten zu löschen, klicken Sie auf 🗑️ Löschen – die Oberfläche wird aktualisiert und wartet auf neue Verbindungen.

Alle Aktionen werden sofort in der Benutzeroberfläche angezeigt: Animationen, Zähler und Filter werden in Echtzeit synchronisiert.

Anwendungsbeispiele

🔍 Debuggen von Echtzeit-Chats und Messengern

💸 Analyse von WebSocket-APIs für Kryptobörsen

🕹️ Überwachung von Spieleservern und Netzwerkinteraktionen

💬 Testen von Push-Benachrichtigungen und Streaming-Diensten

🧩 Analyse nicht standardisierter Protokolle über WS

📊 Bildungsprojekte zum Umgang mit Echtzeitdaten

🔧 Zusätzliche Funktionen

Automatische JSON-Formatierung mit Strukturhervorhebung

Automatisches Scrollen zur letzten Nachricht

Verlaufsbegrenzung (bis zu 1000 Nachrichten pro Liste) zur Leistungsoptimierung

Sicherheit und Datenschutz

Die Erweiterung sammelt, speichert oder sendet keine Daten von Websites.

Alle Vorgänge werden lokal im Browserkontext ausgeführt.

Minimale Berechtigungen (ActiveTab, Skripting, Speicher) werden ausschließlich für die Datenvisualisierung in DevTools verwendet.

Keine externen Anfragen, Tracker oder APIs von Drittanbietern.

🆕 Neu in 1.3.0

Die neue Version des WebSocket Visualizers 1.3.0 unterstützt jetzt Deutsch und Spanisch. Der Sprachumschalter der Benutzeroberfläche wurde aktualisiert und bietet nun neue Lokalisierungsoptionen. Die Überwachung der Verbindungsaktivität und die Statusverwaltung wurden verbessert. Ein JSON-Viewer ermöglicht die detaillierte Anzeige von Nachrichtendaten. Die Benutzeroberfläche wurde optisch verbessert und um neue Statistikelemente erweitert: Sie können nun die Anzahl der gesendeten und empfangenen Bytes in Echtzeit überwachen.

Darüber hinaus wurden die Nachrichtenexportfunktionen um die Formate JSON, CSV und HAR erweitert. Außerdem wurde eine Schaltfläche zum Kopieren einzelner Nachrichten hinzugefügt. Alle Export- und Statistikbezogener Text ist jetzt für alle unterstützten Sprachen lokalisiert. Diese Updates machen WebSocket Visualizer noch komfortabler für die Analyse des Datenverkehrs sowie das Testen und Debuggen von WebSocket-Verbindungen direkt im Browser.

🆕 Neu in 1.4.0

WebSocket Visualizer unterstützt jetzt die Verarbeitung binärer Daten mit einem integrierten Hex-Viewer für eine genauere Analyse des Nachrichteninhalts. Die Nachrichtenanalyselogik wurde verbessert, um eine genauere Dekodierung komplexer WebSocket-Frames zu gewährleisten. Darüber hinaus bietet dieses Update lokalisierte Übersetzungen für alle neuen Binärdatenfunktionen und sorgt so für ein reibungsloseres Erlebnis für Nutzer in mehreren Sprachen.