O Monitor de Rede captura e exibe cada pedido de rede feito pela página atual — chamadas de API XHR/Fetch, carregamentos de scripts, obtenção de folhas de estilo, downloads de imagens, ficheiros de fontes e muito mais. Veja URLs, métodos HTTP, códigos de estado, tamanhos de resposta e tempo — tudo num painel flutuante com atualização ao vivo sem abrir as DevTools do navegador.
O separador Network das DevTools do Chrome é poderoso mas pesado — ocupa um espaço significativo no ecrã, reinicia quando navega e exige que se afaste do conteúdo da página. O Monitor de Rede fornece as funcionalidades essenciais de monitorização de rede num painel flutuante leve que fica sobre a página. Intercepta pedidos XHR e Fetch e monitoriza o carregamento de recursos através da Performance API, mostrando cada pedido de rede à medida que acontece. Cada pedido mostra o URL, método HTTP (GET, POST, PUT, DELETE), código de estado (codificado por cores: verde para 2xx, amarelo para 3xx, vermelho para 4xx/5xx), tamanho da resposta em bytes e duração em milissegundos. Clique em qualquer pedido para expandir os seus detalhes: cabeçalhos de pedido, cabeçalhos de resposta, payload de pedido (para POST/PUT), pré-visualização do corpo da resposta e uma análise do tempo. Filtre por tipo (XHR/Fetch, JS, CSS, Imagens, Fontes) para se focar em tráfego específico.
Cada pedido de rede aparece no painel à medida que acontece — carregamentos de página, chamadas de API, recursos carregados tardiamente e obtenções em segundo plano. O feed atualiza-se em tempo real sem necessidade de atualização manual.
Clique em qualquer pedido para ver os detalhes completos: URL do pedido, método, cabeçalhos, payload (para POST/PUT), cabeçalhos de resposta, pré-visualização do corpo da resposta (JSON formatado automaticamente), código de estado, tamanho e análise do tempo.
Filtre pedidos por tipo: XHR/Fetch (chamadas de API), JS (scripts), CSS (folhas de estilo), IMG (imagens), Font (fontes web) ou Tudo. Isole o tráfego de API do carregamento de recursos para se focar no que importa.
Os códigos de estado são codificados por cores para reconhecimento instantâneo: verde para 2xx (sucesso), amarelo para 3xx (redirecionamentos), vermelho para 4xx (erros do cliente) e 5xx (erros do servidor). Pedidos falhados são imediatamente visíveis.
Cada pedido mostra o tamanho da resposta (em KB) e a duração total (em milissegundos). Identifique chamadas de API lentas, recursos sobredimensionados e pedidos desnecessários que impactam a performance da página.
Uma barra de resumo mostra a contagem total de pedidos e o tamanho combinado para todos os pedidos capturados. Filtre o resumo para ver totais por tipo — quanta largura de banda é gasta em scripts vs imagens vs chamadas de API.
Observe os pedidos XHR/Fetch para verificar se o seu frontend está a chamar os endpoints de API corretos com os parâmetros certos. Clique para inspecionar payloads de pedido e corpos de resposta — detete formatos de dados desajustados instantaneamente.
Entradas vermelhas 404 e 500 destacam imediatamente recursos quebrados ou chamadas de API falhadas. Veja quais os URLs que estão a falhar, quando falham e que resposta de erro o servidor devolve.
Ordene por duração para encontrar os pedidos mais lentos. Ordene por tamanho para encontrar os recursos maiores. Os totais do resumo mostram a imagem completa da largura de banda — a página está a fazer demasiados pedidos ou a descarregar demasiados dados?
Veja que pedidos de rede a página faz em segundo plano — pings de análise, chamadas de batimento cardíaco, pedidos de polling, recursos carregados tardiamente. Compreenda toda a atividade de rede para além do que é visível para o utilizador.
Filtre pedidos e verifique quais os domínios que estão a ser contactados. Identifique scripts de terceiros que fazem chamadas de rede inesperadas — pixels de rastreio, recolha de dados ou chamadas de API externas que não conhecia.
Abra a doca flutuante do DevSuite Pro e clique no ícone Monitor de Rede. Um painel abre-se e começa a capturar pedidos de rede imediatamente.
Utilize a página normalmente. Cada pedido de rede aparece no feed à medida que é feito — chamadas de API, carregamentos de recursos e obtenções em segundo plano são todos capturados.
Clique nos filtros de tipo (XHR, JS, CSS, IMG, Font) para restringir a vista. Mostre apenas chamadas de API para depurar a obtenção de dados, ou apenas imagens para verificar o carregamento de ativos.
Clique em qualquer linha de pedido para expandir os seus detalhes: URL, cabeçalhos, payload, corpo da resposta, código de estado, tamanho e tempo.
Códigos de estado vermelhos (404, 500) indicam pedidos falhados. Durações lentas assinalam estrangulamentos de performance. Tamanhos grandes sugerem recursos que precisam de otimização.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
