O Inspetor de WebSocket captura todas as frames WebSocket — enviadas e recebidas — em todas as ligações da página. Mostra o ciclo de vida da ligação (connecting/open/closed com códigos de fecho), direção por frame, tamanho, indicador binário e pré-visualização, com payloads JSON formatados. Preenche uma lacuna real do DevTools para depuração de protocolos em tempo real.
Os WebSockets alimentam aplicações de chat, dashboards em direto, subscrições GraphQL, jogos multijogador e editores colaborativos — mas depurá-los é penoso. O Chrome DevTools mostra frames WebSocket, mas a sua interface é pouco prática e a filtragem é limitada. O Inspetor de WebSocket oferece uma vista mais limpa e orientada ao propósito. A ferramenta instala um wrapper em torno do construtor WebSocket nativo no contexto da página, pelo que cada new WebSocket() é intercetado. Cada ligação aparece numa lista com o seu URL, estado (connecting → open → closed), duração e código de fecho quando desligado. Cada frame — enviada e recebida — é capturada com timestamp, direção, tamanho, indicador binário e pré-visualização. Clique em qualquer frame para ver o seu payload completo, formatado automaticamente em JSON se aplicável. Filtre por direção (enviado / recebido), apenas binário, ou por ligação específica. Como o wrapper é instalado quando a ferramenta é ativada, deverá recarregar a página para capturar ligações existentes — as novas ligações são capturadas a partir do momento em que abre a ferramenta.
Mostra cada WebSocket com o estado (connecting/open/closed), URL, duração, código de fecho e qualquer motivo de fecho.
Frames enviadas (↑) e recebidas (↓) mostradas com timestamp, tamanho, indicador binário e pré-visualização em linha.
Clique numa frame para ver o payload completo. As strings JSON são formatadas automaticamente com indentação de 2 espaços para inspeção legível.
Filtre as frames para apenas enviadas, apenas recebidas ou apenas binárias — foque-se no que está a depurar.
Clique numa ligação para filtrar as frames apenas para essa — útil quando vários WebSockets estão ativos (ex.: chat + presença).
Qualquer WebSocket aberto após a ativação da ferramenta é capturado imediatamente. Recarregue apenas para capturar os já existentes.
Veja exatamente que mensagens são enviadas e recebidas entre o cliente e o servidor — identifique onde a entrega está a falhar.
Inspecione operações de subscrição e notificações de dados recebidas para depurar payloads incompatíveis ou erros de encerramento de subscrição.
Compreenda como uma API em tempo real de terceiros funciona, observando a sua estrutura de mensagens e temporização.
Verifique se as frames de keep-alive estão a ser enviadas no intervalo esperado — um ping em falta pode explicar desconexões inesperadas.
Observe o evento de fecho (com código e motivo) e as subsequentes tentativas de nova ligação para depurar erros de retry/reconnect.
Clique no ícone WebSocket no painel do DevSuite Pro. A ferramenta ativa-se e abre um painel mostrando ligações e frames.
Os WebSockets abertos ANTES da ativação da ferramenta não serão capturados. Recarregue para os recriar e intercetá-los desde o início.
À medida que a página abre WebSockets, estes aparecem na lista de Ligações com atualizações de estado em direto.
Cada frame é registada em tempo real. Filtre por direção ou clique numa ligação para restringir a lista.
Clique em qualquer frame para ver o seu payload completo (JSON formatado se aplicável) juntamente com o timestamp, tamanho e indicador binário.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 64 ferramentas de desenvolvedor para seu navegador.
