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.
Lista de Requisições de Rede
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.
Campos solicitados
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-typeda 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:
Linha de Tempo
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.
Filtrando pelo Tipo de Conteúdo
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.
Menu de Contexto
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
Isto é novo no Firefox 31.
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:
-X [METHOD] |
Se o método não for GET ou POST |
--data |
Para parâmetros da requisição codificados para URL |
--data-binary |
Para parâmetros de requisição multipart |
--http/VERSION |
Se a versão HTTP não for 1.1 |
-I |
Se o método for HEAD |
-H |
Um para cada cabeçalho de requisição. Desde o Firefox 34, se o cabeçalho "Accept-Encoding" está presente, o comando cURL incluirá |
Detalhes de Requisições de Rede
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.
Headers
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:
Cookies
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.
Params
Esta aba exibe os parâmetros de GET e os dados de POST de uma requisição:
Response
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:
Timings
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:
Preview
Este recurso é novo no Firefox 30.
Do Firefox 30 em diante, se o tipo de arquivo é HTML uma sexta aba aparece, rotulada de "Preview". Ela renderiza o HTML:
Análise de Desempenho
A ferramenta de análise de desempenho é nova no Firefox 29.
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.