Depurando o WebSocket no Google Chrome


213

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.

Respostas:


250

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 .


1
Você saberia usar o Wireshark para fazer isso? Eu realmente nunca o usei, e parece mostrar todo o tráfego de rede e mostra pacotes brutos.
precisa saber é o seguinte

2
Você pode restringir a captura a uma única porta usando filtros de captura . Como alternativa, depois de obter uma captura, você poderá clicar com o botão direito do mouse em qualquer quadro capturado que faça parte da sessão e selecionar a opção para mostrar apenas essa sessão.
Kanaka

1
Infelizmente, o uso do WireShark usando o host local no Windows exige que você salte para fazer funcionar. Veja wiki.wireshark.org/CaptureSetup/Loopback
Greg Woods

2
Eu escrevi recentemente um artigo sobre o CodeProject, que mostra como depurar / inspecionar o tráfego do WebSocket com o Fiddler. codeproject.com/Articles/718660/…
engineforce

1
@NiCkNewman sim, é um campo de 7 bits que indica o comprimento de bytes da carga útil. No entanto, se o valor do campo for 126 ou 127, os próximos 16 ou 64 bits, respectivamente, serão o comprimento da carga útil em bytes. Veja a descrição do campo length na especificação: tools.ietf.org/html/rfc6455#section-5.2 (é muito fácil de entender). É um pouco estranho, mas torna as mensagens curtas muito eficientes (apenas um cabeçalho de 2 bytes).
Kanaka

72

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.


3
Tenha cuidado ao postar copiar e colar respostas padrão / textuais para várias perguntas, pois elas tendem a ser sinalizadas como "spam" pela comunidade. Se você estiver fazendo isso, geralmente significa que as perguntas são duplicadas; portanto, sinalize-as como tal.
Kev

2
Obrigado pelo passo 6! Eu sabia sobre o filtro WebSockets na guia Rede, mas estava frustrado por parecer apenas capturar minhas primeiras mensagens. Você sabe se existe uma maneira de torná-lo ciente de uma conexão de websocket que estava aberta antes de você abrir a guia?
Bryan Chefe

Bryan - Não acredito que você possa hoje.
Peter Moskovits

@PeterMoskovits Você conhece uma maneira de inspecionar o conteúdo de quadros binários no Chrome? Atualmente eu só posso ver o seu comprimento!
Howie

@ Howie Você não pode fazer isso com o Chrome. Você pode usar o WireShark para isso. Nosso novo livro, The Definitive Guide to HTML5 WebSocket, também fornece uma introdução rápida ao WireShark. amazon.com/Definitive-Guide-HTML5-WebSocket-Apress/dp/...
Peter Moskovits

52

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.

insira a descrição da imagem aqui


Eu não gosto de como esse JSON é formatado lá feio. Sem formatação, basicamente.
Ss

1
@ses esse é o protocolo signalR. Tome-o com Microsoft 😜
Simon_Weaver 7/17/17

1
contente de ver, pelo menos, essa resposta ainda é bom, quatro anos depois: p
Stu Thompson

1
@StuThompson yes - meus upvotes continuam se acumulando :-)
Simon_Weaver

41

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.


Obrigado! Além disso: a página que você abre deve ter a mesma origem que o seu websocket. Se você tentar abrir as ferramentas de desenvolvimento do Chrome em uma origem diferente (ou até mesmo a nova página da guia) e conectar-se ao seu soquete da Web, receberá um erro de autorização.
Dan Esparza

Existe uma maneira de corrigir isso?
not2qubit

37

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

10

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.Inspecionar o tráfego do WebSocket

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


5

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:

insira a descrição da imagem aqui


4

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

1
Parece que isso funciona, exceto que é irritante que ele pare de funcionar se você se desconectar e reconectar ao URL do websocket (por exemplo, em websocket.org/echo.html ); nesse caso, você deverá atualizar a página! :(
matanster

3

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.


2

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.


2

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.