Depurando o WebSocket no Google Chrome

Existe uma maneira, ou uma extensão, que me permita assistir o "tráfego" passando por um WebSocket? Para fins de depuração, gostaria de ver as solicitações / respostas do cliente e do servidor.

As ferramentas de desenvolvedor do Chrome agora podem listar quadros do WebSocket e também inspecionar os dados se os quadros não forem binários.

Processo:

1. Inicie as ferramentas do desenvolvedor do Chrome
2. Carregue sua página e inicie as conexões WebSocket
3. Clique na guia rede .
4. Selecione a conexão WebSocket na lista à esquerda (ele terá o status "101 Switching Protocols".
5. Clique na subguia Mensagens . Os quadros binários aparecerão com uma duração e um carimbo de data e hora e indicarão se estão mascarados. Os quadros de texto mostrarão também o conteúdo da carga útil.

Se sua conexão WebSocket usa quadros binários, provavelmente você ainda desejará usar o Wireshark para depurar a conexão. O Wireshark 1.8.0 adicionou suporte de dissecador e filtragem para WebSockets. Uma alternativa pode ser encontrada nesta outra resposta .

O Chrome Canary e o Chromium agora têm o recurso de inspeção de quadros de mensagens WebSocket. Aqui estão as etapas para testá-lo rapidamente:

1. Navegue até a demonstração do WebSocket Echo , hospedada no site websocket.org .
2. Ative as Ferramentas do desenvolvedor do Chrome.
3. Clique em Rede e, para filtrar o tráfego mostrado pelas Ferramentas de Desenvolvimento, clique em WebSockets .
4. Na demonstração do eco, clique em Conectar . Na guia Cabeçalhos do Google Dev Tool, você pode inspecionar o handshake do WebSocket.
5. Clique no botão Enviar na demonstração Echo.
6. ESTA ETAPA É IMPORTANTE : Para ver os quadros do WebSocket nas Ferramentas do desenvolvedor do Chrome, em Nome / Caminho, clique na entrada echo.websocket.org, representando sua conexão com o WebSocket. Isso atualiza o painel principal à direita e faz com que a guia WebSocket Frames seja exibida com o conteúdo real da mensagem do WebSocket.

Nota : Toda vez que você envia ou recebe novas mensagens, é necessário atualizar o painel principal clicando na entrada echo.websocket.org à esquerda.

Também publiquei as etapas com capturas de tela e vídeo .

Meu livro recentemente publicado, The Definitive Guide to HTML5 WebSocket , também possui um apêndice dedicado que cobre as várias ferramentas de inspeção, incluindo Chrome Dev Tools, Chrome net-internals e Wire Shark.

Eles parecem mudar continuamente as coisas no Chrome, mas eis o que funciona agora :-)

• Primeiro você deve clicar no botão vermelho de gravação ou não receberá nada.

• Eu nunca notei o WSantes, mas filtra as conexões de soquete da web.

• Selecione e, em seguida, você poderá ver os quadros que mostrarão mensagens de erro etc.

Se você não tiver uma página que esteja acessando o soquete da web, poderá abrir o console do Chrome e digitar seu JavaScript em:

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

Isso abrirá o soquete da web para que você possa vê-lo na guia rede e no console.

As outras respostas abrangem o cenário mais comum: observe o conteúdo dos quadros (Ferramentas do desenvolvedor -> guia Rede -> clique com o botão direito do mouse na conexão do websocket -> quadros).

Se você quiser saber mais informações, como quais soquetes estão atualmente abertos / ociosos ou poderá fechá-los, você encontrará este URL útil

chrome://net-internals/#sockets

Você tem três opções: Chrome (via Ferramentas do desenvolvedor -> guia Rede), Wireshark e Fiddler (via guia Log), no entanto, todas são muito básicas. Se você tem um volume muito alto de tráfego ou cada quadro é muito grande, fica muito difícil usá-los para depuração.

No entanto, você pode usar o Fiddler com o FiddlerScript para inspecionar o tráfego do WebSocket da mesma maneira que inspeciona o tráfego HTTP. Poucas vantagens dessa solução são que você pode aproveitar muitas outras funcionalidades do Fiddler, como vários inspetores (HexView, JSON, SyntaxView), comparar pacotes e encontrar pacotes etc.

Consulte o meu artigo escrito recentemente sobre o CodeProject, que mostra como depurar / inspecionar o tráfego do WebSocket com o Fiddler (com o FiddlerScript). http://www.codeproject.com/Articles/718660/Debug-Inspect-WebSocket-traffic-with-Fiddler

Estou postando isso desde que o Chrome muda bastante e nenhuma das respostas foi atualizada.

1. Ferramentas de desenvolvimento abertas
2. ATUALIZE SUA PÁGINA (para que a conexão WS seja capturada pela guia rede)
3. Clique no seu pedido
4. Clique na subguia "Quadros"
5. Você deve ver algo assim:

Resposta curta para a versão 29 e superior do Chrome:

1. Abra o depurador, vá para a guia "Rede"
2. Carregar página com websocket
3. Clique na solicitação websocket com resposta de atualização do servidor
4. Selecione a aba "Frames" para ver os frames do websocket
5. Clique na solicitação do websocket novamente para atualizar os quadros

As ferramentas de desenvolvedor do Chrome permitem ver a solicitação de handshake que permanece pendente durante a conexão aberta, mas você não pode ver o tráfego até onde eu sei. No entanto, você pode farejá-lo, por exemplo.

Eu usei a extensão do Chrome chamada Simple WebSocket Client v0.1.3, publicada pelo usuário hakobera. É muito simples em seu uso, onde permite abrir websockets em um determinado URL, enviar mensagens e fechar a conexão do soquete. É muito minimalista.

Quanto a uma ferramenta que comecei a usar, sugiro firecamp É como o Postman, mas também suporta websockets e socket.io.