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.

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-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:

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á `--compressed` em vez de `-H "Accept-Encoding: gzip, deflate"`. Isto significa que a resposta será automaticamente descomprimida.

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.