online - Depuración de WebSocket en Google Chrome

websocket monitor chrome

Question

¿Hay alguna manera, o una extensión, que me permita ver el "tráfico" pasando por un WebSocket? Para fines de depuración, me gustaría ver las solicitudes / respuestas del cliente y del servidor.

Answer 1

Chrome Canary y Chromium ahora tienen la función de inspección de marcos de mensajes WebSocket. Estos son los pasos para probarlo rápidamente:

1. Navegue hasta la demo de WebSocket Echo , alojada en el sitio websocket.org .
2. Encienda las herramientas para desarrolladores de Chrome.
3. Haga clic en Red , y para filtrar el tráfico que se muestra en Dev Tools, haga clic en WebSockets .
4. En la demostración de Echo, haga clic en Conectar . En la pestaña Encabezados de la Herramienta de desarrollo de Google puede inspeccionar el intercambio de información de WebSocket.
5. Haga clic en el botón Enviar en la demostración de Echo.
6. ESTE PASO ES IMPORTANTE : para ver los marcos de WebSocket en Herramientas de desarrollo de Chrome, en Nombre / Ruta, haga clic en la entrada echo.websocket.org, que representa su conexión WebSocket. Esto actualiza el panel principal a la derecha y hace que la pestaña Marcos de WebSocket aparezca con el contenido real del mensaje WebSocket.

Nota : Cada vez que envíe o reciba mensajes nuevos, debe actualizar el panel principal haciendo clic en la entrada echo.websocket.org a la izquierda.

También publiqué los pasos con capturas de pantalla y video .

Mi libro recientemente publicado, The Definitive Guide to HTML5 WebSocket , también tiene un apéndice dedicado que cubre varias herramientas de inspección, incluidas las herramientas Chrome Dev, las redes internas de Chrome y Wire Shark.

Answer 2

He usado la extensión de Chrome llamada Simple WebSocket Client v0.1.3 publicada por el usuario hakobera. Es muy simple en su uso, ya que permite abrir websockets en una URL determinada, enviar mensajes y cerrar la conexión de socket. Es muy minimalista

Answer 3

Las herramientas de desarrollador de Chrome permiten ver la solicitud de saludo, que permanece pendiente durante la conexión abierta, pero no se puede ver el tráfico por lo que yo sé. Sin embargo, puedes olerlo, por ejemplo.

Answer 4

Las herramientas de desarrollo de Chrome ahora tienen la capacidad de mostrar marcos de WebSocket y también inspeccionar los datos si los marcos no son binarios.

Proceso:

1. Lanzar herramientas de desarrollador de Chrome
2. Cargue su página e inicie las conexiones WebSocket
3. Haga clic en la pestaña de red .
4. Seleccione la conexión WebSocket de la lista a la izquierda (tendrá el estado de "101 Protocolos de conmutación".
5. Haga clic en la pestaña secundaria Marcos . Los marcos binarios se mostrarán con una longitud y una marca de tiempo e indicarán si están enmascarados. Los marcos de texto mostrarán también incluir el contenido de la carga.

Si su conexión WebSocket utiliza tramas binarias, probablemente aún desee utilizar Wireshark para depurar la conexión. Wireshark 1.8.0 añadió disector y soporte de filtrado para WebSockets. Una alternativa se puede encontrar en esta otra respuesta .

Answer 5

Las otras respuestas cubren el escenario más común: mire el contenido de los marcos (Herramientas del desarrollador -> pestaña Red -> haga clic con el botón derecho en la conexión del conector web -> marcos).

Si desea obtener más información, como qué sockets están actualmente abiertos / inactivos o si puede cerrarlos, encontrará esta url útil.

chrome://net-internals/#sockets

Answer 6

Parece que continuamente cambian cosas en Chrome, pero esto es lo que funciona en este momento :-)

• Primero debe hacer clic en el botón de grabación rojo o no obtendrá nada.

• Nunca me di cuenta de WS pero filtra las conexiones de socket web.

• Selecciónelo y luego podrá ver los marcos que le mostrarán los mensajes de error, etc.

Answer 7

Respuesta corta para Chrome versión 29 y superior:

1. Abra el depurador, vaya a la pestaña "Red"
2. Cargar página con websocket
3. Haga clic en la solicitud de websocket con la respuesta de actualización del servidor
4. Seleccione la pestaña "Marcos" para ver los marcos de websocket
5. Haga clic en la solicitud de websocket nuevamente para actualizar los marcos

Answer 8

Si no tiene una página que está accediendo al websocket, puede abrir la consola de Chrome y escribir su JavaScript en:

var webSocket = new WebSocket(''ws://address:port'');
webSocket.onmessage = function(data) { console.log(data); }

Esto abrirá el socket web para que pueda verlo en la pestaña de red y en la consola.

Answer 9

Tienes 3 opciones: Chrome (a través de Herramientas de desarrollador -> pestaña Red), Wireshark y Fiddler (a través de la pestaña Registro), sin embargo, todas son muy básicas. Si tiene un volumen de tráfico muy alto o cada cuadro es muy grande, se vuelve muy difícil usarlos para la depuración.

Sin embargo, puede utilizar Fiddler con FiddlerScript para inspeccionar el tráfico de WebSocket de la misma manera que lo hace con el tráfico HTTP. Pocas ventajas de esta solución son que puede aprovechar muchas otras funcionalidades en Fiddler, como inspectores múltiples (HexView, JSON, SyntaxView), comparar paquetes y encontrar paquetes, etc.

Consulte mi artículo recientemente escrito sobre CodeProject, que le muestra cómo depurar / inspeccionar el tráfico de WebSocket con Fiddler (con FiddlerScript). codeproject.com/Articles/718660/…