Der WebSocket-Inspektor erfasst jeden WebSocket-Frame — gesendet und empfangen — über alle Verbindungen auf der Seite. Er zeigt den Verbindungszyklus (verbindend/offen/geschlossen mit Status-Codes), die Richtung pro Frame, Größe, Binär-Flag und eine Vorschau mit formatierten JSON-Payloads. Schließt eine echte Lücke in den DevTools für das Debugging von Echtzeitprotokollen.
WebSockets treiben Chat-Apps, Live-Dashboards, GraphQL-Subscriptions, Multiplayer-Spiele und kollaborative Editoren an — aber das Debuggen ist mühsam. Die Chrome DevTools zeigen zwar WebSocket-Frames, aber die Benutzeroberfläche ist schwerfällig und die Filterung eingeschränkt. Der WebSocket-Inspektor bietet eine sauberere, zweckgebundene Ansicht. Das Tool installiert einen Wrapper um den nativen WebSocket-Konstruktor im Seitenkontext, sodass jedes neue WebSocket() abgefangen wird. Jede Verbindung erscheint in einer Liste mit URL, Status (verbindend → offen → geschlossen), Dauer und dem Close-Code bei Trennung. Jeder Frame — gesendet und empfangen — wird mit Zeitstempel, Richtung, Größe, Binär-Flag und Vorschau erfasst. Klicken Sie auf einen Frame, um die vollständige Payload zu sehen, die bei JSON automatisch formatiert wird. Filtern Sie nach Richtung (gesendet / empfangen), nur binär oder nach einer bestimmten Verbindung. Da der Wrapper bei Aktivierung des Tools installiert wird, sollten Sie die Seite neu laden, um bestehende Verbindungen zu erfassen — neue Verbindungen werden ab dem Moment abgefangen, an dem Sie das Tool öffnen.
Zeigt jedes WebSocket mit Status (verbindend/offen/geschlossen), URL, Dauer, Close-Code und eventuellem Grund für die Schließung an.
Sowohl gesendete (↑) als auch empfangene (↓) Frames werden mit Zeitstempel, Größe, Binär-Flag und Inline-Vorschau angezeigt.
Klicken Sie auf einen Frame, um die vollständige Payload zu sehen. JSON-Strings werden automatisch mit 2er-Einrückung für eine lesbare Inspektion formatiert.
Filtern Sie Frames nach nur gesendet, nur empfangen oder nur binär — konzentrieren Sie sich auf das, was Sie gerade debuggen.
Klicken Sie auf eine Verbindung, um die Frames nur für diese anzuzeigen — nützlich, wenn mehrere WebSockets aktiv sind (z. B. Chat + Präsenzanzeige).
Jeder nach Aktivierung des Tools geöffnete WebSocket wird sofort erfasst. Neu laden ist nur nötig, um bereits bestehende Verbindungen abzufangen.
Sehen Sie genau, welche Nachrichten zwischen Client und Server gesendet und empfangen werden — identifizieren Sie, wo die Zustellung scheitert.
Untersuchen Sie Subscription-Operationen und eingehende Daten-Pushes, um fehlerhafte Payloads oder Bugs beim Beenden von Subscriptions zu finden.
Verstehen Sie, wie eine Drittanbieter-Echtzeit-API funktioniert, indem Sie deren Nachrichtenstruktur und Timing beobachten.
Überprüfen Sie, ob Keep-Alive-Frames im erwarteten Intervall gesendet werden — ein verpasster Ping kann unerwartete Trennungen erklären.
Beobachten Sie das Close-Event (mit Code und Grund) und die anschließenden neuen Verbindungsversuche, um Retry/Reconnect-Bugs zu beheben.
Klicken Sie auf das WebSocket-Symbol im DevSuite Pro Dock. Das Tool wird aktiviert und ein Panel mit Verbindungen und Frames öffnet sich.
WebSockets, die VOR der Aktivierung des Tools geöffnet wurden, werden nicht erfasst. Neu laden, um sie neu zu erstellen und von Anfang an abzufangen.
Sobald die Seite WebSockets öffnet, erscheinen diese in der Verbindungsliste mit Live-Status-Updates.
Jeder Frame wird in Echtzeit protokolliert. Filtern Sie nach Richtung oder klicken Sie auf eine Verbindung, um die Liste einzugrenzen.
Klicken Sie auf einen Frame, um die vollständige Payload (formatiertes JSON, falls zutreffend) zusammen mit Zeitstempel, Größe und Binär-Flag zu sehen.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 64+ Entwickler-Tools für Ihren Browser frei.
