WebSocket Inspector cattura ogni frame WebSocket — inviato e ricevuto — in tutte le connessioni della pagina. Mostra il ciclo di vita della connessione (connessione in corso/aperta/chiusa con codici di chiusura), direzione per singolo frame, dimensione, flag binario e anteprima, con payload JSON formattati. Colma una vera lacuna dei DevTools per il debugging dei protocolli in tempo reale.
I WebSocket alimentano app di chat, dashboard live, abbonamenti GraphQL, giochi multiplayer ed editor collaborativi, ma il loro debugging è faticoso. I DevTools di Chrome mostrano i frame WebSocket, ma la loro interfaccia è macchinosa e il filtraggio è limitato. WebSocket Inspector offre una vista più pulita e specifica. Lo strumento installa un wrapper attorno al costruttore WebSocket nativo nel contesto della pagina, così ogni nuovo WebSocket() viene intercettato. Ogni connessione appare in un elenco con il suo URL, stato (in connessione → aperto → chiuso), durata e codice di chiusura al momento della disconnessione. Ogni frame — inviato e ricevuto — viene catturato con timestamp, direzione, dimensione, flag binario e anteprima. Clicca su qualsiasi frame per vederne il payload completo, formattato automaticamente se in formato JSON. Filtra per direzione (inviato/ricevuto), solo binario o per connessione specifica. Poiché il wrapper viene installato all'attivazione dello strumento, dovrai ricaricare la pagina per catturare le connessioni esistenti; le nuove connessioni vengono catturate dal momento in cui apri lo strumento.
Mostra ogni WebSocket con lo stato (in connessione/aperto/chiuso), URL, durata, codice di chiusura ed eventuale motivo della chiusura.
Vengono mostrati sia i frame inviati (↑) che quelli ricevuti (↓) con timestamp, dimensione, flag binario e anteprima in linea.
Clicca su un frame per vedere il payload completo. Le stringhe JSON vengono formattate automaticamente con un rientro di 2 spazi per un'ispezione leggibile.
Filtra i frame solo per inviati, solo ricevuti o solo binari: concentrati su ciò che stai analizzando.
Clicca su una connessione per filtrare i frame solo per quella: utile quando sono attivi più WebSocket (es. chat + presenza).
Ogni WebSocket aperto dopo l'attivazione dello strumento viene catturato immediatamente. Ricarica solo per intercettare quelli preesistenti.
Vedi esattamente quali messaggi vengono inviati e ricevuti tra client e server: individua dove la consegna fallisce.
Ispeziona le operazioni di abbonamento e i push di dati in arrivo per eseguire il debug di payload non corrispondenti o bug di interruzione dell'abbonamento.
Comprendi come funziona un'API in tempo reale di terze parti osservandone la struttura dei messaggi e la tempistica.
Verifica che i frame keep-alive vengano inviati all'intervallo previsto: un ping mancato può spiegare disconnessioni impreviste.
Osserva l'evento di chiusura (con codice e motivo) e i successivi tentativi di nuova connessione per eseguire il debug di bug di riprovo/riconnessione.
Clicca sull'icona WebSocket nel dock di DevSuite Pro. Lo strumento si attiva e si apre un pannello che mostra connessioni e frame.
I WebSocket aperti PRIMA dell'attivazione dello strumento non verranno catturati. Ricarica per ricrearli e intercettarli dall'inizio.
Man mano che la pagina apre i WebSocket, questi appaiono nell'elenco delle Connessioni con aggiornamenti di stato in tempo reale.
Ogni frame viene registrato in tempo reale. Filtra per direzione o clicca su una connessione per restringere l'elenco.
Clicca su qualsiasi frame per vederne il payload completo (JSON formattato se applicabile) insieme a timestamp, dimensione e flag binario.
Installa DevSuite Pro gratuitamente e sblocca più di 64 strumenti per sviluppatori per il tuo browser.
