Monitor de Rede

O Monitor de Rede mostra todas as solicitações realizadas por uma página, o quanto a solicitação demorou, entre outros detalhes. Ao ir no menu "Ferramentas do Desenvolvedor Web" e clicar em "Rede" o monitor irá aparecer na parte de baixo da janela.

O Monitor de Rede irá mostrar as solicitações em uma tabela ao carregar uma página, cada requisição aparece em uma linha diferente:

A cada atualização, o monitor é limpo antes de mostrar as novas solicitções. Para modificar essa opção marque "Ativar logs persistentes" na Caixxa de Ferramentas.

Cada linha mostra:

• √: o status retornado pelo HTTP. A identificação é feita através de diferentes cores: verde para sucesso (2XX codes), laranja para redirecionamento (3XX), ou vermelho para errors (4XX and 5XX). A partir do Firefox 30, o código correspondente é mostrado logo após.
• Método: método de requisição HTTP
• Arquivo: nome do arquivo solicitado.
• Servidor: dominio do arquivo solicitado.
• Tipo: Content-type da resposta;
• Tamanho: tamanho da resposta, depois de descomprimida.

Ao clicar no nome de uma das colunas, as requisições são organizadas pela coluna selecionada.

A partir do Firefox 30, se o arquivo for uma imagem, a linha mostrá uma miniatura da imagem, e ao por o apontador sobre o nome poderá visualizá-la um pouco maior:

 A lista de requisição também mostra a linha de tempo para diferentes partes de cada requisição. Cada linha de tempo é dada pela posição horizontal em cada linha relativa a outra requisição de rede, entaão você pode ver o tempo total levado para carregar a página. Para mais detalhes sobre a cor do código usado aqui, veja a sessão Tempos.

Na parte inferior da janela uma linha de botões lhe abilita a filtrar requisições pelo tipo de conteúdo da resposta:

Na extrema direita há um botão chamado "Limpar": como você pode imaginar, ele permite limpar a lista de requisições de rede.

Clique-direito em uma linha da lista exibe um menu de contexto com as seguintes opções:

• Abrir em nova aba
• Copiar URL
• Copiar como cURL (só do Firefox 31 em diante)
• Copiar imagem como URI de dados (só para imagens)
• Editar e reenviar
• Iniciar Análise de Performance para a página

Editar e Reenviar

Esta opção abre um editor e lhe abilita a editar o método, a URL e os parametros da requisição, editar os cabeçalhos, e reenviar a requisição.

Copiar como cURL

Esta opção copia a requisição de rede para a área de transferência como um comando cURL, de modo a você poder executá-lo em uma linha de comando. O comando pode incluir as seguintes opções:

O clique em uma linha exibe um novo painel à direita do monitor de rede, que dá informações mais detalhadas sobre a requisição.

As abas no topo deste painel lhe permitem alternar entre cinco páginas diferentes:

• Headers
• Cookies
• Params
• Response
• Timings

Do Firefox 30 em diante, há uma sexta página que aparece se o tipo de conteúdo é HTML, a página Preview.

Um clique no ícone à esquerda das abas fecha o painel e retorna à visão de lista.

Esta aba lista informações básicas sobre a requisição incluindo URL e código de status, e também os cabeçalhos HTTP de requisição e resposta que foram enviados:

Você pode filtrar os cabeçalhos que são exibidos:

Esta aba lista detalhes completos de qualquer cookie enviado com a requisição ou a resposta:

Asim como os Headers, você pode filtrar a lista de cookies exibidos.

Esta aba exibe os parâmetros de GET e os dados de POST de uma requisição:

O conteúdo completo da resposta. Se a resposta é HTML, JS, ou CSS, ela será mostrada como texto:

Se a resposta for JSON, será exibida como um objeto inspecionável:

Se a resposta é uma imagem, a aba exibe uma amostra:

A aba Timings tem uma visão mais detalhada, anotada, da barra da linha do tempo para a requisição, mostrando a divisão do tempo total entre os vários estágios:

Do Firefox 30 em diante, se o tipo de arquivo é HTML uma sexta aba aparece, rotulada de "Preview". Ela renderiza o HTML:

Do Firefox 29 em diante, o Monitor de Rede inclui uma ferramenta de análise de desempenho, para ajudar a lhe mostrar quanto tempo o navegador levou para descarregar as diferentes partes de seu sítio.

Para executar a ferramenta de análise de desempenho clique no ícone de cronômetro na barra de ferramentas, no rodapé do Monitor de Rede:

(Alternativamente, se você acabou de abrir o Monitor de Rede e ele ainda não está populado com a lista de requisições, você terá o ícone de cronômetro na janela principal.)

O Monitor de Rede, então, carrega o sítio duas vezes: uma com o cache do navegador vazio e outra com o cache já preparado. Isto simula a primeira visita de um usuário ao seu sítio, e as visitas subsequentes. Ele exibe os resultados de cada execução lado a lado ou verticalmente, se a janela for estreita:

Os resultados de cada execução são sumarizados em uma tabela e em um gráfico de pizza. A tabela agrupa os recursos por tipo, e mostra o tamanho total de cada recurso e o tempo total que ele levou para carregá-los. O gráfico de pizza mostra o tamanho relativo de cada tipo de recurso.

Para voltar à lista de requisições de rede do Monitor de Rede clique no botão "Back" à esquerda.

Clicar em uma fatia da pizza leva você ao Monitor de Rede daquela execução, com um filtro automaticamente aplicado para ver só aquele tipo de recurso.