WebSocket Inspector captura cada trama de WebSocket — enviada i rebuda — en totes les connexions de la pàgina. Mostra el cicle de vida de la connexió (connecting/open/closed amb els codis de tancament), la direcció, mida, indicador binari i vista prèvia de cada trama, amb payloads JSON formatats. Cobreix una mancança real de les DevTools per a la depuració de protocols en temps real.
Els WebSockets fan funcionar aplicacions de xat, taulers en directe, subscripcions GraphQL, jocs multijugador i editors col·laboratius — però depurar-los és dolorós. Chrome DevTools mostra les trames de WebSocket, però la seva interfície és feixuga i el filtratge és limitat. WebSocket Inspector et dona una vista més neta i dissenyada expressament per a això. L'eina instal·la un embolcall al voltant del constructor natiu de WebSocket en el context de la pàgina, de manera que cada nou new WebSocket() queda interceptat. Cada connexió apareix en una llista amb la seva URL, estat (connecting → open → closed), durada i codi de tancament quan es desconnecta. Cada trama — enviada i rebuda — es captura amb marca horària, direcció, mida, indicador binari i vista prèvia. Fes clic a qualsevol trama per veure el seu payload complet, formatat automàticament si és JSON. Filtra per direcció (enviada / rebuda), només binàries, o per una connexió específica. Com que l'embolcall s'instal·la quan l'eina s'activa, hauràs de recarregar la pàgina per capturar les connexions existents — les connexions noves es capturen des del moment en què obres l'eina.
Mostra cada WebSocket amb el seu estat (connecting/open/closed), URL, durada, codi de tancament i qualsevol motiu de tancament.
Es mostren les trames enviades (↑) i rebudes (↓) amb marca horària, mida, indicador binari i vista prèvia en línia.
Fes clic a una trama per veure el payload complet. Les cadenes JSON es formaten automàticament amb sagnat de 2 espais per a una inspecció llegible.
Filtra les trames per mostrar només les enviades, només les rebudes, o només les binàries — centra't en allò que estàs depurant.
Fes clic a una connexió per filtrar les trames a només aquesta — útil quan hi ha múltiples WebSockets actius (p. ex. xat + presència).
Qualsevol WebSocket obert després que l'eina s'activi es captura immediatament. Recarrega només per capturar les que ja existien.
Veu exactament quins missatges s'envien i es reben entre el client i el servidor — identifica on falla el lliurament.
Inspecciona les operacions de subscripció i les dades entrants per depurar payloads no coincidents o errors en el tancament de la subscripció.
Entén com funciona una API de tercers en temps real observant l'estructura i el moment dels seus missatges.
Verifica que les trames de keep-alive s'envien a l'interval esperat — un ping perdut pot explicar desconnexions inesperades.
Observa l'esdeveniment de tancament (amb codi i motiu) i els intents de nova connexió posteriors per depurar errors de retry/reconnexió.
Fes clic a la icona WebSocket al dock de DevSuite Pro. L'eina s'activa i s'obre un panell que mostra connexions i trames.
Els WebSockets oberts ABANS que l'eina s'activés no es capturaran. Recarrega per tornar-los a crear i interceptar-los des de l'inici.
A mesura que la pàgina obre WebSockets, apareixen a la llista de Connections amb actualitzacions d'estat en directe.
Cada trama es registra en temps real. Filtra per direcció o fes clic a una connexió per reduir la llista.
Fes clic a qualsevol trama per veure el seu payload complet (JSON formatat si escau) juntament amb la marca horària, mida i indicador binari.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 64 eines de desenvolupador per al teu navegador.
