Depuración de WebSocket en Google Chrome


213

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

Respuestas:


250

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 .


1
¿Sabrías cómo usar Wireshark para hacer esto? Realmente nunca lo he usado, y parece mostrar todo el tráfico de red, y muestra paquetes sin procesar.
mellowsoon

2
Puede restringir la captura a un solo puerto utilizando filtros de captura . Alternativamente, después de obtener una captura, debe poder hacer clic con el botón derecho en cualquier fotograma capturado que sea parte de la sesión y seleccionar la opción para mostrar solo esa sesión.
kanaka

1
Desafortunadamente, usar WireShark usando localhost en Windows requiere saltar a través de aros para que funcione. Ver wiki.wireshark.org/CaptureSetup/Loopback
Greg Woods

2
Recientemente escribí un artículo sobre CodeProject, que muestra cómo depurar / inspeccionar el tráfico de WebSocket con Fiddler. codeproject.com/Articles/718660/…
engineforce

1
@NiCkNewman sí, es un campo de 7 bits que indica la longitud de bytes de la carga útil. Sin embargo, si el valor del campo es 126 o 127, los siguientes 16 o 64 bits respectivamente son la longitud de la carga útil en bytes. Consulte la descripción del campo de longitud en la especificación: tools.ietf.org/html/rfc6455#section-5.2 (es bastante fácil de asimilar). Es un poco extraño, pero hace que los mensajes cortos sean muy eficientes (solo un encabezado de 2 bytes).
kanaka

72

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.


3
Tenga cuidado al publicar copiar y pegar respuestas repetitivas / textuales a múltiples preguntas, la comunidad suele marcarlas como "spam". Si está haciendo esto, generalmente significa que las preguntas son duplicadas, así que márquelas como tales.
Kev

2
¡Gracias por el paso 6! Conocía el filtro de WebSockets en la pestaña Red, pero estaba frustrado porque parecía captar solo mis primeros mensajes. ¿Sabes si hay una manera de informarle de una conexión websocket que estaba abierta antes de abrir la pestaña?
Bryan Head

Bryan: no creo que puedas hoy.
Peter Moskovits

@PeterMoskovits ¿Sabe, por casualidad, una forma de inspeccionar el contenido de los marcos binarios en Chrome? ¡Actualmente solo puedo ver su longitud!
Howie

@Howie No puedes hacerlo con Chrome. Puede usar WireShark para ello. Nuestro nuevo libro, The Definitive Guide to HTML5 WebSocket también le ofrece una introducción rápida a WireShark.amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/…
Peter Moskovits

52

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.

ingrese la descripción de la imagen aquí


No me gusta cómo ese JSON está formateado allí feo. Sin formateo básicamente.
ses

1
@ses ese es el protocolo signalR. Tómelo con Microsoft 😜
Simon_Weaver

1
Me alegra ver que al menos esta respuesta sigue siendo buena cuatro años después: p
Stu Thompson

1
@StuThompson sí, mis votos positivos se siguen acumulando :-)
Simon_Weaver

41

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.


¡Gracias! Además: la página que abra debe estar en el mismo origen que su websocket. Si intenta abrir las herramientas de desarrollo de Chrome en un origen diferente (o incluso en la nueva página de pestaña) y luego conectarse a su websocket, obtendrá un error de autorización.
Dan Esparza

¿Hay alguna manera de arreglar esto?
not2qubit

37

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

10

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.Inspeccionar el tráfico de WebSocket

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


5

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:

ingrese la descripción de la imagen aquí


4

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

1
Parece que esto funciona, excepto que es molesto que deje de funcionar si desconecta y vuelve a conectarse a la url websocket (por ejemplo, en websocket.org/echo.html ), en cuyo caso debe actualizar la página. :(
matanster

3

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.


2

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.


2

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.