Debuggen von WebSocket in Google Chrome

Gibt es eine Möglichkeit oder eine Erweiterung, mit der ich den "Datenverkehr" über ein WebSocket beobachten kann? Zum Debuggen möchte ich die Client / Server-Anforderungen / Antworten sehen.

Chrome-Entwicklertools können jetzt WebSocket-Frames auflisten und die Daten auch dann überprüfen, wenn die Frames nicht binär sind.

Prozess:

1. Starten Sie die Chrome Developer-Tools
2. Laden Sie Ihre Seite und initiieren Sie die WebSocket-Verbindungen
3. Klicken Sie auf die Registerkarte Netzwerk .
4. Wählen Sie die WebSocket-Verbindung aus der Liste links aus (sie hat den Status "101 Switching Protocols").
5. Klicken Sie auf die Unterregisterkarte Nachrichten . Binäre Frames werden mit einem Längen- und Zeitstempel angezeigt und geben an, ob sie maskiert sind. Textrahmen zeigen auch den Nutzlastinhalt.

Wenn Ihre WebSocket-Verbindung Binärframes verwendet, möchten Sie wahrscheinlich weiterhin Wireshark zum Debuggen der Verbindung verwenden. Wireshark 1.8.0 hat Dissektor- und Filterunterstützung für WebSockets hinzugefügt. Eine Alternative finden Sie in dieser anderen Antwort .

Chrome Canary und Chromium verfügen jetzt über die WebSocket-Funktion zur Überprüfung von Nachrichtenrahmen. Hier sind die Schritte, um es schnell zu testen:

1. Navigieren Sie zur WebSocket Echo-Demo , die auf der Website websocket.org gehostet wird .
2. Aktivieren Sie die Chrome Developer Tools.
3. Klicken Sie auf Netzwerk , und um den von den Entwicklertools angezeigten Datenverkehr zu filtern, klicken Sie auf WebSockets .
4. Klicken Sie in der Echo-Demo auf Verbinden . Auf der Registerkarte Header im Google Dev Tool können Sie den WebSocket-Handshake überprüfen.
5. Klicken Sie in der Echo-Demo auf die Schaltfläche Senden.
6. DIESER SCHRITT IST WICHTIG : Um die WebSocket-Frames in den Chrome Developer Tools unter Name / Pfad anzuzeigen, klicken Sie auf den Eintrag echo.websocket.org, der Ihre WebSocket-Verbindung darstellt. Dadurch wird das Hauptfenster auf der rechten Seite aktualisiert und die Registerkarte "WebSocket-Frames" wird mit dem tatsächlichen Inhalt der WebSocket-Nachricht angezeigt.

Hinweis : Jedes Mal, wenn Sie neue Nachrichten senden oder empfangen, müssen Sie das Hauptfenster aktualisieren, indem Sie links auf den Eintrag echo.websocket.org klicken.

Ich habe die Schritte auch mit Screenshots und Videos gepostet .

Mein kürzlich veröffentlichtes Buch, The Definitive Guide to HTML5 WebSocket , enthält auch einen speziellen Anhang zu den verschiedenen Inspektionstools, einschließlich Chrome Dev Tools, Chrome Net-Internals und Wire Shark.

Sie scheinen ständig Dinge in Chrome zu ändern, aber hier ist, was gerade funktioniert :-)

• Zuerst müssen Sie auf die rote Aufnahmetaste klicken, sonst erhalten Sie nichts.

• Ich habe das noch nie bemerkt, WSaber es filtert die Web-Socket-Verbindungen heraus.

• Wählen Sie es aus und Sie können die Frames sehen, die Ihnen Fehlermeldungen usw. anzeigen.

Wenn Sie keine Seite haben, die auf den Websocket zugreift, können Sie die Chrome-Konsole öffnen und Ihr JavaScript eingeben:

var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }

Dadurch wird der Web-Socket geöffnet, sodass Sie ihn auf der Registerkarte "Netzwerk" und in der Konsole sehen können.

Die anderen Antworten beziehen sich auf das häufigste Szenario: Beobachten Sie den Inhalt der Frames (Entwicklertools -> Registerkarte Netzwerk -> Klicken Sie mit der rechten Maustaste auf die Websocket-Verbindung -> Frames).

Wenn Sie weitere Informationen benötigen, z. B. welche Sockets derzeit geöffnet / inaktiv sind oder diese schließen können, ist diese URL hilfreich

chrome://net-internals/#sockets

Sie haben drei Möglichkeiten: Chrome (über die Entwicklertools -> Registerkarte "Netzwerk"), Wireshark und Fiddler (über die Registerkarte "Protokoll"), die jedoch alle sehr einfach sind. Wenn Sie ein sehr hohes Verkehrsaufkommen haben oder jeder Frame sehr groß ist, wird es sehr schwierig, sie zum Debuggen zu verwenden.

Sie können jedoch Fiddler mit FiddlerScript verwenden, um den WebSocket-Verkehr auf dieselbe Weise zu untersuchen, wie Sie den HTTP-Verkehr erwarten. Einige Vorteile dieser Lösung bestehen darin, dass Sie viele andere Funktionen in Fiddler nutzen können, z. B. mehrere Inspektoren (HexView, JSON, SyntaxView), Pakete vergleichen und Pakete suchen usw.

Weitere Informationen finden Sie in meinem kürzlich verfassten Artikel zu CodeProject, in dem gezeigt wird, wie Sie den WebSocket-Verkehr mit Fiddler (mit FiddlerScript) debuggen / überprüfen. http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Ich poste dies nur, da Chrome viele Änderungen vornimmt und keine der Antworten auf dem neuesten Stand war.

1. Öffnen DevTools
2. ERNEUERN SIE IHRE SEITE (damit die WS-Verbindung von der Registerkarte "Netzwerk" erfasst wird)
3. Klicken Sie auf Ihre Anfrage
4. Klicken Sie auf die Unterregisterkarte "Frames"
5. Sie sollten so etwas sehen:

Kurze Antwort für Chrome Version 29 und höher:

1. Öffnen Sie den Debugger und gehen Sie zur Registerkarte "Netzwerk".
2. Seite mit Websocket laden
3. Klicken Sie auf die Websocket-Anforderung mit der Upgrade-Antwort vom Server
4. Wählen Sie die Registerkarte "Frames", um Websocket-Frames anzuzeigen
5. Klicken Sie erneut auf die Websocket-Anforderung, um die Frames zu aktualisieren

Mit den Chrome-Entwicklertools können Sie Handshake-Anforderungen anzeigen, die während der geöffneten Verbindung noch ausstehen. Soweit ich weiß, können Sie jedoch keinen Datenverkehr sehen. Sie können es jedoch zum Beispiel schnüffeln .

Ich habe die Chrome-Erweiterung Simple WebSocket Client v0.1.3 verwendet , die vom Benutzer hakobera veröffentlicht wird. Es ist sehr einfach zu verwenden, da es das Öffnen von Websockets unter einer bestimmten URL, das Senden von Nachrichten und das Schließen der Socket-Verbindung ermöglicht. Es ist sehr minimalistisch.

Für ein Tool, das ich verwendet habe, schlage ich Firecamp vor. Es ist wie Postman, unterstützt aber auch Websockets und socket.io.