Visualizador WebSocket

Muestra gráficamente los mensajes WebSocket entrantes y salientes con agrupación por tipo de evento

🔌 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.