Debuggen von WebSocket in Google Chrome

213

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.

Mellowsoon
quelle

Antworten:

250

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 .

Kanaka
quelle
1
Würdest du wissen, wie man Wireshark benutzt, um dies zu tun? Ich habe es nie wirklich benutzt, und es scheint den gesamten Netzwerkverkehr und Rohpakete anzuzeigen.
Mellowsoon
2
Sie können die Erfassung mithilfe von Erfassungsfiltern auf einen einzelnen Port beschränken . Nachdem Sie eine Aufnahme erhalten haben, sollten Sie alternativ in der Lage sein, mit der rechten Maustaste auf einen erfassten Frame zu klicken, der Teil der Sitzung ist, und die Option auszuwählen, um nur diese Sitzung anzuzeigen.
Kanaka
1
Leider erfordert die Verwendung von WireShark mit localhost unter Windows das Springen durch die Rahmen, damit es funktioniert. Siehe wiki.wireshark.org/CaptureSetup/Loopback
Greg Woods
2
Ich habe kürzlich einen Artikel über CodeProject geschrieben, der Ihnen zeigt, wie Sie den WebSocket-Verkehr mit Fiddler debuggen / untersuchen. codeproject.com/Articles/718660/…
engineforce
1
@NiCkNewman Ja, es ist ein 7-Bit-Feld, das die Bytelänge der Nutzdaten angibt. Wenn der Wert des Feldes jedoch 126 oder 127 ist, sind die nächsten 16 bzw. 64 Bits die Länge der Nutzlast in Bytes. Siehe die Beschreibung des Längenfeldes in der Spezifikation: tools.ietf.org/html/rfc6455#section-5.2 (es ist ziemlich einfach zu groken). Es ist ein bisschen seltsam, aber es macht Kurznachrichten sehr effizient (nur ein 2-Byte-Header).
Kanaka
72

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.

Peter Moskovits
quelle
3
Seien Sie vorsichtig, wenn Sie Antworten auf mehrere Fragen kopieren und einfügen. Diese werden von der Community in der Regel als "Spam" gekennzeichnet. Wenn Sie dies tun, bedeutet dies normalerweise, dass die Fragen doppelt vorhanden sind. Kennzeichnen Sie sie stattdessen als solche.
Kev
2
Vielen Dank für Schritt 6! Ich hatte von dem WebSockets-Filter auf der Registerkarte "Netzwerk" gewusst, war jedoch frustriert, dass er nur meine ersten Nachrichten abzufangen schien. Wissen Sie, ob es eine Möglichkeit gibt, auf eine Websocket-Verbindung aufmerksam zu machen, die geöffnet war, bevor Sie die Registerkarte geöffnet haben?
Bryan Head
Bryan - Ich glaube nicht, dass du es heute kannst.
Peter Moskovits
@PeterMoskovits Kennen Sie möglicherweise eine Möglichkeit, den Inhalt von Binärframes in Chrome zu überprüfen? Derzeit kann ich nur seine Länge sehen!
Howie
@ Howie Mit Chrome geht das nicht. Sie können WireShark dafür verwenden. Unser neues Buch, The Definitive Guide to HTML5 WebSocket, bietet Ihnen auch eine kurze Einführung in WireShark. amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/…
Peter Moskovits
52

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.

Geben Sie hier die Bildbeschreibung ein

Simon_Weaver
quelle
Mir gefällt nicht, wie dieser JSON dort hässlich formatiert ist. Grundsätzlich keine Formatierung.
ses
1
@ses das ist signalR Protokoll. Nehmen Sie es mit Microsoft 😜
Simon_Weaver
1
Ich bin froh zu sehen, dass diese Antwort auch vier Jahre später noch gut ist: p
Stu Thompson
1
@StuThompson ja - meine Upvotes häufen sich immer wieder :-)
Simon_Weaver
41

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.

Dylan
quelle
Vielen Dank! Außerdem: Die von Ihnen geöffnete Seite muss denselben Ursprung haben wie Ihr Websocket. Wenn Sie versuchen, Chrome-Entwicklungstools auf einem anderen Ursprung (oder sogar auf der neuen Registerkarte) zu öffnen und dann eine Verbindung zu Ihrem Websocket herzustellen, wird ein Autorisierungsfehler angezeigt.
Dan Esparza
Gibt es eine Möglichkeit, dies zu beheben?
not2qubit
37

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
Riccardo Galli
quelle
10

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.Überprüfen Sie den WebSocket-Verkehr

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

Motorkraft
quelle
5

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:

Geben Sie hier die Bildbeschreibung ein

iuliu.net
quelle
4

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
Reifen
quelle
1
Es scheint, dass dies funktioniert, außer dass es ärgerlich ist, dass es nicht mehr funktioniert, wenn Sie die Websocket-URL trennen und erneut verbinden (z. B. auf websocket.org/echo.html ). In diesem Fall müssen Sie die Seite aktualisieren! :(
Matanster
3

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 .

yojimbo87
quelle
2

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.

DPancs
quelle
2

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

InsOp
quelle