Visualizador WebSocket

🔌 Visualizador de WebSockets — Visualizador de Conexiones WebSocket para Chrome DevTools

El Visualizador de WebSockets es una potente extensión para desarrolladores que añade una nueva pestaña a Chrome DevTools, mostrando todos los mensajes WebSocket que pasan por una página en tiempo real. La extensión ayuda a analizar, filtrar y comprender las interacciones entre el cliente y el servidor a través del protocolo WebSocket, sin modificar el código de la aplicación ni usar bibliotecas de terceros.

🌐 Idea Principal

Las aplicaciones modernas utilizan activamente conexiones WebSockets para el intercambio de datos en tiempo real: chats, intercambios, juegos, paneles financieros, dispositivos IoT y otros sistemas.
Sin embargo, las herramientas estándar de los navegadores no ofrecen una forma cómoda de observar estos flujos de datos. El Visualizador de WebSockets soluciona este problema: se integra en el contexto de la página e intercepta los eventos WebSocket nativos (apertura, mensaje, cierre, error, envío), visualizando todo en una pestaña independiente de DevTools de forma atractiva, estructurada e interactiva.

⚙️ Características principales

📡 Interceptar todas las conexiones

La extensión reemplaza automáticamente el constructor nativo de WebSocket, rastreando todas las conexiones abiertas por una página o bibliotecas (incluyendo Socket.io, ws, Primus, etc.).

💬 Visualización de mensajes

Cada mensaje entrante y saliente se muestra como una tarjeta con detalles:

Hora del evento (en milisegundos)

Dirección (⬇️ entrante / ⬆️ saliente)

Tipo de evento (tipo, evento, acción, comando — detectado automáticamente)

Contenido del mensaje con formato JSON

URL de conexión e ID de sesión de WebSocket

🧠 Agrupación inteligente

Los mensajes se agrupan por tipo de evento (p. ej., mensaje, actualización, intercambio, latido), lo que permite analizar rápidamente la estructura del protocolo y la frecuencia de eventos específicos.

📈 Estadísticas en tiempo real

El panel superior muestra un resumen:

Conexiones activas

Mensajes totales

Enviados y recibidos
Todos los contadores se actualizan en tiempo real sin necesidad de recargar.

🔍 Filtrado flexible

Búsqueda rápida por tipo de evento o palabras clave

Cambio de dirección: "Todos / Entrantes / Salientes"

Haga clic en un tipo de evento en la barra lateral para aplicar un filtro al instante.

⏸️ Pausar y reanudar

Puede pausar el flujo de eventos para analizarlo y reanudarlo más tarde sin perder contexto; útil para tráfico intenso o análisis histórico.

🗑️ Borrar y reiniciar

Un solo botón borra todos los mensajes y estadísticas, conservando las conexiones activas y los filtros.

🌍 Multilingüe

Idiomas de interfaz compatibles:

Inglés 🇬🇧

Ruso 🇷🇺

Ucraniano 🇺🇦

Alemán 🇩🇪

Español 🇪🇸

La selección del idioma se guarda y se aplica automáticamente la próxima vez que se inicia.

🎨 Diseño moderno

La interfaz está inspirada en Visual Studio Code:

Tema oscuro

Degradados suaves y resaltado de elementos activos

Animaciones de mensajes fluidas

Barras de desplazamiento estilizadas y tipografía elegante

🧭 Instrucciones de uso

Abra DevTools (F12 o Ctrl + Mayús + I).

Vaya a la pestaña WebSocket; esta es la interfaz de la extensión.

Cargue o actualice la página donde están habilitadas las conexiones WebSocket.

La extensión interceptará y mostrará automáticamente todos los eventos:

🔗 conexión: conexión creada

✅ abierto: conexión abierta

⬇️ entrante: mensaje entrante

⬆️ saliente: mensaje saliente

❌ cerrado: conexión cerrada

⚠️ error: error o fallo

Usa filtros para centrarte en los eventos que necesitas.

Puedes pausar la transmisión con el botón ⏸️ Pausa, examinar los datos y luego continuar con ▶️ Reanudar.

Para borrar los datos, haz clic en 🗑️ Borrar: la interfaz se actualizará y comenzará a esperar nuevas conexiones.

Todas las acciones se reflejan instantáneamente en la interfaz de usuario: las animaciones, los contadores y los filtros se sincronizan en tiempo real.

Ejemplos de casos de uso

🔍 Depuración de chats y mensajería en tiempo real

💸 Análisis de las API WebSocket de intercambio de criptomonedas

🕹️ Monitoreo de servidores de juegos e interacciones de red

💬 Pruebas de notificaciones push y servicios de streaming

🧩 Análisis de protocolos no estándar en WS

📊 Proyectos educativos sobre el trabajo con datos en tiempo real

🔧 Características adicionales

Formato JSON automático con resaltado de estructura

Desplazamiento automático al último mensaje

Limitación del historial (hasta 1000 mensajes por lista) para optimizar el rendimiento

Seguridad y privacidad

La extensión no recopila, guarda ni envía datos de sitios web.

Todas las operaciones se realizan localmente en el contexto del navegador.

Los permisos mínimos (activeTab, scripting, almacenamiento) se utilizan exclusivamente para la visualización de datos en DevTools.

Sin solicitudes externas, rastreadores ni API de terceros.

🆕 Novedades en la versión 1.3.0

La nueva versión de WebSocket Visualizer 1.3.0 incluye compatibilidad con alemán y español, y el selector de idiomas de la interfaz se ha actualizado para incluir nuevas opciones de localización. Se han mejorado la monitorización de la actividad de conexión y la gestión del estado, y se ha implementado un visor JSON para una visualización detallada de los datos de los mensajes. La interfaz ha recibido mejoras visuales y nuevos elementos estadísticos: ahora se puede monitorizar el número de bytes enviados y recibidos en tiempo real.
Además, se han ampliado las funciones de exportación de mensajes para incluir los formatos JSON, CSV y HAR, y se ha añadido un botón para copiar mensajes individuales. Todas las funciones de exportación y El texto relacionado con las estadísticas ahora está localizado para todos los idiomas compatibles. Estas actualizaciones hacen que el Visualizador de WebSockets sea aún más práctico para analizar el tráfico, probar y depurar conexiones WebSockets directamente en el navegador.

🆕 Novedades de la versión 1.4.0

El Visualizador de WebSockets ahora admite el manejo de datos binarios con un visor hexadecimal integrado para una inspección más profunda del contenido sin procesar de los mensajes. Se ha mejorado la lógica de análisis de mensajes para garantizar una decodificación más precisa de tramas WebSocket complejas. Además, esta actualización introduce traducciones localizadas para todas las nuevas funciones de datos binarios, lo que proporciona una experiencia más fluida para los usuarios en varios idiomas.