El Inspector de WebSocket captura cada trama de WebSocket — enviada y recibida — en todas las conexiones de la página. Muestra el ciclo de vida de la conexión (conectando/abierta/cerrada con códigos de cierre), dirección por trama, tamaño, flag binario y vista previa, con cargas útiles JSON formateadas. Llena un vacío real en DevTools para la depuración de protocolos en tiempo real.
Los WebSockets impulsan aplicaciones de chat, tableros en vivo, suscripciones GraphQL, juegos multijugador y editores colaborativos — pero depurarlos es doloroso. Chrome DevTools muestra las tramas de WebSocket, pero su interfaz es tosca y el filtrado es limitado. El Inspector de WebSocket te ofrece una vista más limpia y diseñada específicamente. La herramienta instala un envoltorio alrededor del constructor nativo de WebSocket en el contexto de la página, por lo que cada `new WebSocket()` es interceptado. Cada conexión aparece en una lista con su URL, estado (conectando → abierta → cerrada), duración y código de cierre al desconectarse. Cada trama — enviada y recibida — se captura con marca de tiempo, dirección, tamaño, flag binario y vista previa. Haz clic en cualquier trama para ver su carga útil completa, formateada automáticamente si es JSON. Filtra por dirección (enviada / recibida), solo binaria o por una conexión específica. Debido a que el envoltorio se instala cuando la herramienta se activa, querrás recargar la página para capturar las conexiones existentes; las nuevas conexiones se capturan desde el momento en que abres la herramienta.
Muestra cada WebSocket con su estado (conectando/abierto/cerrado), URL, duración, código de cierre y cualquier motivo de cierre.
Se muestran tanto las tramas enviadas (↑) como las recibidas (↓) con marca de tiempo, tamaño, flag binario y vista previa en línea.
Haz clic en una trama para ver la carga útil completa. Las cadenas JSON se formatean automáticamente para una inspección legible.
Filtra las tramas para ver solo las enviadas, solo las recibidas o solo las binarias — concéntrate en lo que estás depurando.
Haz clic en una conexión para filtrar las tramas solo para esa — útil cuando hay múltiples WebSockets activos (ej. chat + presencia).
Cualquier WebSocket abierto después de que la herramienta se active se captura de inmediato. Recarga solo para capturar los preexistentes.
Mira exactamente qué mensajes se envían y reciben entre el cliente y el servidor — identifica dónde está fallando la entrega.
Inspecciona las operaciones de suscripción y los envíos de datos entrantes para depurar cargas útiles desajustadas o errores en la finalización de suscripciones.
Comprende cómo funciona una API en tiempo real de terceros observando su estructura de mensajes y tiempos.
Verifica que las tramas keep-alive se estén enviando en el intervalo esperado — un ping omitido puede explicar desconexiones inesperadas.
Observa el evento de cierre (con código y motivo) y los intentos de nueva conexión posteriores para depurar errores de reintento/reconexión.
Haz clic en el ícono de WebSocket en el dock de DevSuite Pro. La herramienta se activa y se abre un panel que muestra las conexiones y tramas.
Los WebSockets abiertos ANTES de que la herramienta se activara no serán capturados. Recarga para volver a crearlos e interceptarlos desde el inicio.
A medida que la página abre WebSockets, estos aparecen en la lista de Conexiones con actualizaciones de estado en vivo.
Cada trama se registra en tiempo real. Filtra por dirección o haz clic en una conexión para reducir la lista.
Haz clic en cualquier trama para ver su carga útil completa (JSON formateado si aplica) junto con la marca de tiempo, tamaño y flag binario.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
