Chrome Web Inspector Web Socket Debugging

Question

Puedo usar la pestaña Red en Google Chrome Web Inspector para depurar el tráfico de la red (solicitudes AJAX, etc.). Puedo verificar qué datos se transfieren fácilmente. Pero WebSocket conexiones sólo muestran como

Request URL:ws://localhost/... 
Request Method:GET 
Status Code:101 Switching Protocols 
... 

y no puedo ver los datos transferidos. ¿Hay alguna función incorporada en Google Chrome para inspeccionar los datos transferidos? ¿O necesito usar Wireshark?

PD: Estoy usando la última versión estable (16.0.912.75). Si una versión más nueva (beta/dev) tiene estas características, sería bueno.

Answer 1

Chrome y Chromium ahora tienen inspección de marco de mensajes WebSocket. Estos son los pasos para probar rápidamente:

1. Vaya a la WebSocket Echo demo, alojados en el sitio websocket.org.
2. Encienda las herramientas para desarrolladores de Chrome.
3. Haga clic Red, permiten filtro (tercera icono de la izquierda en la parte superior de Herramientas de desarrollo) para filtrar el tráfico mostrado por las herramientas de desarrollo, y haga clic 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. Para ver los marcos de WebSocket en Herramientas del desarrollador de Chrome, en Nombre, haga clic en la entrada 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.

También publiqué el steps with screen shots and video.

Answer 2

Después de un poco más de investigación, he encontrado una pregunta duplicado aquí: Debugging WebSocket in Google Chrome

Chrome does't apoyo de ver el tráfico en la versión estable actual. Necesito usar Wireshark.