Depuración de WebSocket en Google Chrome

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

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

Proceso:

1. Inicie las herramientas para desarrolladores de Chrome
2. Cargue su página e inicie las conexiones WebSocket
3. Haga clic en la pestaña Red .
4. Seleccione la conexión WebSocket de la lista de la izquierda (tendrá el estado de "101 Protocolos de conmutación".
5. Haga clic en la subpestaña Mensajes . Los cuadros binarios se mostrarán con una marca de tiempo y marca de tiempo e indicarán si están enmascarados. Los marcos de texto mostrarán también incluyen el contenido de la carga útil.

Si su conexión WebSocket usa tramas binarias, entonces probablemente quiera usar Wireshark para depurar la conexión. Wireshark 1.8.0 agregó disector y soporte de filtrado para WebSockets. Se puede encontrar una alternativa en esta otra respuesta .

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. Vaya a la demostración de WebSocket Echo , alojada en el sitio websocket.org .
2. Activa las Herramientas para desarrolladores de Chrome.
3. Haga clic en Red y, para filtrar el tráfico que muestran las Herramientas de desarrollo, haga clic en WebSockets .
4. En la demostración de Echo, haga clic en Conectar . En la pestaña Encabezados en Google Dev Tool, puede inspeccionar el apretón de manos 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 las Herramientas para desarrolladores 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 se muestre con el contenido real del mensaje de WebSocket.

Nota : Cada vez que envía o recibe 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 las diversas herramientas de inspección, incluidas Chrome Dev Tools, Chrome net-internals y Wire Shark.

Parecen cambiar continuamente las cosas en Chrome, pero esto es lo que funciona ahora :-)

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

• Nunca me di cuenta de lo WSanterior, pero filtra las conexiones de socket web.

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

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.

Las otras respuestas cubren el escenario más común: ver el contenido de los marcos (Herramientas para desarrolladores -> pestaña Red -> Haga clic derecho en la conexión websocket -> marcos).

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

chrome://net-internals/#sockets

Tiene 3 opciones: Chrome (a través de Herramientas para desarrolladores -> 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 trama es muy grande, se vuelve muy difícil usarlos para la depuración.

Sin embargo, puede usar Fiddler con FiddlerScript para inspeccionar el tráfico de WebSocket de la misma manera que inspecciona 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). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Solo estoy publicando esto ya que Chrome cambia mucho, y ninguna de las respuestas estaba bastante actualizada.

1. Abrir herramientas de desarrollo
2. ACTUALIZA TU PÁGINA (para que la pestaña WS capture la conexión WS)
3. Haga clic en su solicitud
4. Haga clic en la subpestaña "Marcos"
5. Deberías ver algo como esto:

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 websocket con la respuesta de actualización del servidor
4. Seleccione la pestaña "Marcos" para ver los marcos websocket
5. Haga clic en la solicitud websocket nuevamente para actualizar los marcos

Las herramientas de desarrollador de Chrome permiten ver la solicitud de protocolo de enlace que permanece pendiente durante la conexión abierta, pero no puedo ver el tráfico hasta donde yo sé. Sin embargo, puedes olerlo, por ejemplo.

He usado la extensión de Chrome llamada Simple WebSocket Client v0.1.3 que ha publicado 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 del socket. Es muy minimalista.

En cuanto a una herramienta que comencé a usar, sugiero firecamp Es como Postman, pero también es compatible con websockets y socket.io.