Debug di WebSocket in Google Chrome

C'è un modo, o un'estensione, che mi permette di guardare il "traffico" che passa attraverso un WebSocket? Ai fini del debug, vorrei vedere le richieste / risposte del client e del server.

Gli strumenti per sviluppatori di Chrome ora hanno la possibilità di elencare i frame WebSocket e anche di ispezionare i dati se i frame non sono binari.

Processi:

1. Avvia gli strumenti per sviluppatori Chrome
2. Carica la tua pagina e avvia le connessioni WebSocket
3. Fai clic sulla scheda Rete .
4. Seleziona la connessione WebSocket dall'elenco a sinistra (avrà lo stato di "101 Protocolli di commutazione".
5. Fai clic sulla sottoscheda Messaggi . I frame binari verranno visualizzati con una lunghezza e un timestamp e indicheranno se sono mascherati. Le cornici di testo mostreranno anche il contenuto del payload.

Se la tua connessione WebSocket utilizza frame binari, probabilmente vorrai comunque utilizzare Wireshark per eseguire il debug della connessione. Wireshark 1.8.0 ha aggiunto il supporto per dissettori e filtri per WebSocket. Un'alternativa può essere trovata in questa altra risposta .

Chrome Canary e Chromium ora dispongono della funzione di ispezione della cornice dei messaggi WebSocket. Ecco i passaggi per testarlo rapidamente:

1. Passare alla demo di WebSocket Echo , ospitata sul sito websocket.org .
2. Attiva gli Strumenti per sviluppatori di Chrome.
3. Fare clic su Rete e per filtrare il traffico mostrato da Dev Tools, fare clic su WebSocket .
4. Nella demo di Echo, fai clic su Connetti . Nella scheda Intestazioni di Google Dev Tool puoi controllare l'handshake di WebSocket.
5. Fai clic sul pulsante Invia nella demo di Echo.
6. QUESTO PASSAGGIO È IMPORTANTE : per visualizzare i frame WebSocket negli Strumenti per sviluppatori di Chrome, sotto Nome / Percorso, fai clic sulla voce echo.websocket.org, che rappresenta la tua connessione WebSocket. Questo aggiorna il pannello principale sulla destra e fa apparire la scheda Cornici WebSocket con il contenuto effettivo del messaggio WebSocket.

Nota : ogni volta che invii o ricevi nuovi messaggi, devi aggiornare il pannello principale facendo clic sulla voce echo.websocket.org a sinistra.

Ho anche pubblicato i passaggi con schermate e video .

Il mio libro recentemente pubblicato, The Definitive Guide to HTML5 WebSocket , ha anche un'appendice dedicata che copre i vari strumenti di ispezione, inclusi Chrome Dev Tools, Chrome net-internals e Wire Shark.

Sembrano cambiare continuamente roba in Chrome, ma ecco cosa funziona adesso :-)

• Per prima cosa devi fare clic sul pulsante rosso di registrazione o non otterrai nulla.

• Non ho mai notato WSprima, ma filtra le connessioni socket web.

• Selezionalo e poi puoi vedere i frame che ti mostreranno messaggi di errore ecc.

Se non hai una pagina che accede al WebSocket, puoi aprire la console di Chrome e digitare il tuo JavaScript in:

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

Questo aprirà il socket Web in modo da poterlo vedere nella scheda di rete e nella console.

Le altre risposte riguardano lo scenario più comune: guardare il contenuto dei frame (Strumenti per sviluppatori -> scheda Rete -> Fare clic con il tasto destro del mouse sul collegamento websocket -> frame).

Se vuoi sapere qualche informazione in più, come quali socket sono attualmente aperti / inattivi o essere in grado di chiuderli, troverai questo URL utile

chrome://net-internals/#sockets

Sono disponibili 3 opzioni: Chrome (tramite Strumenti per sviluppatori -> scheda Rete), Wireshark e Fiddler (tramite la scheda Registro), tuttavia sono tutti molto semplici. Se hai un volume di traffico molto elevato o ogni frame è molto grande, diventa molto difficile usarli per il debug.

È possibile tuttavia utilizzare Fiddler con FiddlerScript per ispezionare il traffico WebSocket nello stesso modo in cui si immette il traffico HTTP. Pochi vantaggi di questa soluzione sono che puoi sfruttare molte altre funzionalità di Fiddler, come ispettori multipli (HexView, JSON, SyntaxView), confrontare i pacchetti e trovare pacchetti, ecc.

Si prega di fare riferimento al mio articolo recentemente scritto su CodeProject, che mostra come eseguire il debug / ispezionare il traffico WebSocket con Fiddler (con FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Sto pubblicando questo dato che Chrome cambia molto, e nessuna delle risposte era abbastanza aggiornata.

1. Apri gli strumenti di sviluppo
2. AGGIORNA LA TUA PAGINA (in modo che la connessione WS venga acquisita dalla scheda di rete)
3. Fai clic sulla tua richiesta
4. Fai clic sulla sottoscheda "Cornici"
5. Dovresti vedere qualcosa del genere:

Risposta breve per Chrome versione 29 e successive:

1. Apri il debugger, vai alla scheda "Rete"
2. Carica pagina con websocket
3. Fare clic sulla richiesta del websocket con la risposta di aggiornamento dal server
4. Seleziona la scheda "Cornici" per vedere i frame dei websocket
5. Fare di nuovo clic sulla richiesta del websocket per aggiornare i frame

Gli strumenti di sviluppo di Chrome consentono di visualizzare la richiesta di stretta di mano che rimane in sospeso durante la connessione aperta, ma non riesco a vedere il traffico per quanto ne so. Tuttavia puoi annusarlo per esempio.

Ho usato l'estensione di Chrome chiamata Simple WebSocket Client v0.1.3 pubblicata dall'utente hakobera. È molto semplice nel suo utilizzo in cui consente l'apertura di socket Web su un determinato URL, l'invio di messaggi e la chiusura della connessione socket. È molto minimalista.

Per quanto riguarda uno strumento che ho iniziato a utilizzare, suggerisco firecamp È come Postman, ma supporta anche websocket e socket.io.