WebSocket Inspector capturează fiecare frame WebSocket — trimis și primit — pe toate conexiunile din pagină. Afișează ciclul de viață al conexiunii (connecting/open/closed cu coduri de închidere), direcția fiecărui frame, dimensiunea, flag-ul binar și previzualizarea, cu payload-uri JSON formatate frumos. Acoperă o lipsă reală din DevTools pentru depanarea protocoalelor în timp real.
WebSocket-urile alimentează aplicații de chat, dashboard-uri live, subscripții GraphQL, jocuri multiplayer și editoare colaborative — dar depanarea lor este dureroasă. Chrome DevTools afișează frame-urile WebSocket, dar interfața este greoaie, iar filtrarea limitată. WebSocket Inspector vă oferă o vizualizare mai curată, dedicată exact acestui scop. Instrumentul instalează un wrapper în jurul constructorului nativ WebSocket, în contextul paginii, astfel încât fiecare new WebSocket() este interceptat. Fiecare conexiune apare într-o listă, cu URL-ul, statusul (connecting → open → closed), durata și codul de închidere, dacă s-a deconectat. Fiecare frame — trimis sau primit — este capturat cu marcaj de timp, direcție, dimensiune, flag binar și previzualizare. Faceți clic pe orice frame pentru a-i vedea payload-ul complet, formatat automat dacă este JSON. Filtrați după direcție (trimis / primit), doar binar sau după o anumită conexiune. Deoarece wrapper-ul se instalează atunci când instrumentul se activează, va trebui să reîncărcați pagina pentru a capta conexiunile deja existente — conexiunile noi sunt capturate din momentul în care deschideți instrumentul.
Afișează fiecare WebSocket cu status (connecting/open/closed), URL, durată, cod de închidere și orice motiv de închidere.
Frame-urile trimise (↑) și primite (↓) sunt afișate cu marcaj de timp, dimensiune, flag binar și previzualizare inline.
Faceți clic pe un frame pentru a vedea payload-ul complet. Șirurile JSON se formatează automat cu indentare de 2 spații, pentru o inspecție lizibilă.
Filtrați frame-urile doar cele trimise, doar cele primite sau doar cele binare — concentrați-vă pe ce depanați.
Faceți clic pe o conexiune pentru a filtra frame-urile doar la aceasta — util atunci când sunt active mai multe WebSocket-uri (de ex. chat + presence).
Orice WebSocket deschis după activarea instrumentului este capturat imediat. Reîncărcați pagina doar pentru a capta conexiunile preexistente.
Vedeți exact ce mesaje sunt trimise și primite între client și server — identificați unde eșuează livrarea.
Inspectați operațiile de subscripție și datele primite pentru a depana payload-uri nepotrivite sau erori de închidere a subscripției.
Înțelegeți cum funcționează un API realtime terț, observându-i structura mesajelor și sincronizarea.
Verificați că frame-urile de keep-alive sunt trimise la intervalul așteptat — un ping ratat poate explica deconectări neașteptate.
Urmăriți evenimentul de închidere (cu cod și motiv) și încercările ulterioare de reconectare pentru a depana bug-uri de retry/reconectare.
Faceți clic pe pictograma WebSocket din dock-ul DevSuite Pro. Instrumentul se activează și se deschide un panou cu conexiuni și frame-uri.
WebSocket-urile deschise ÎNAINTE de activarea instrumentului nu vor fi capturate. Reîncărcați pentru a le recrea și a le intercepta chiar de la început.
Pe măsură ce pagina deschide WebSocket-uri, acestea apar în lista de conexiuni cu actualizări de status în timp real.
Fiecare frame este înregistrat în timp real. Filtrați după direcție sau faceți clic pe o conexiune pentru a restrânge lista.
Faceți clic pe orice frame pentru a-i vedea payload-ul complet (formatat frumos dacă este JSON), împreună cu marcajul de timp, dimensiunea și flag-ul binar.
Instalează DevSuite Pro gratuit și deblochează peste 64 de instrumente pentru dezvoltatori în browserul tău.
