MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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

At the bottom of the window a row of buttons enables you to filter requests by the content type of the response:

At the far right of this row is a button labeled "Clear": as you might guess, this enables you to clear the network request list.

Context-clicking on a row in the list displays a context menu with the following options:

  • Open in New Tab
  • Copy URL
  • Copy as cURL (only from Firefox 31 onwards)
  • Copy Image as Data URI (only for images)
  • Edit and Resend
  • Start Performance Analysis for the page

Edit and Resend

This option opens an editor enabling you to edit the request's method, URL, parameters, and headers, and resend the request.

Copy as cURL

This feature is new in Firefox 31.

This option copies the network request to the clipboard as a cURL command, so you can execute it from a command line. The command may include the following options:

-X [METHOD] If the method is not GET or POST
--data For URL encoded request parameters
--data-binary For multipart request parameters
--http/VERSION If the HTTP version is not 1.1
-I If the method is HEAD
-H

One for each request header.

From Firefox 34, if the "Accept-Encoding" header is present, the cURL command will include --compressed instead of -H "Accept-Encoding: gzip, deflate". This means that the response will be automatically decompressed.

Detalhes de Requisições de Rede

Clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed information about the request.

The tabs at the top of this pane enable you to switch between five different pages:

  • Headers
  • Cookies
  • Params
  • Response
  • Timings

From Firefox 30 onwards, there's a sixth page that appears only if the content type is HTML, the Preview page.

Clicking the icon to the left of the tabs closes the pane and returns you to the list view.

Cabeçalhos

This tab lists basic information about the request including URL and status code, as well as the HTTP request and response headers that were sent:

You can filter the headers that are displayed:

Cookies

This tab lists full details of any cookies sent with the request or response:

As with headers, you can filter the list of cookies displayed.

Parâmetros

This tab displays the GET parameters and POST data of a request:

Resposta

The complete content of the response. If the response is HTML, JS, or CSS, it will be shown as text:

If the response is JSON, it will be shown as an inspectable object:

If the response is an image, the tab displays a preview:

Tempos

The Timings tab has a more detailed, annotated, view of the timeline bar for that request showing how the total wait time is split into the various stages:

Visualização

This feature is new in Firefox 30.

From Firefox 30 onwards, if the file type is HTML a sixth tab appears labeled "Preview". This renders just that HTML:

Análise de Performance

The performance analysis tool is new in Firefox 29.

From Firefox 29 onwards, the Network Monitor includes a performance analysis tool, to help show you how long the browser takes to download the different parts of your site.

To run the performance analysis tool click the stopwatch icon in the toolbar at the bottom of the Network Monitor:

(Alternatively, if you have only just opened the Network Monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.)

The Network Monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. This simulates the first time a user visits your site, and subsequent visits. It displays the results for each run side by side, or vertically if the browser window is narrow:

The results for each run are summarised in a table and a pie chart. The tables group resources by type, and show the total size of each resource and the total time it took to load them. The accompanying pie chart shows the relative size of each resource type.

To get back to the Network Monitor's list of network requests click the "Back" button on the left.

Clicking on a slice of the pie takes you to the Network Monitor for that run, with a filter automatically applied to see only that resource type.

Etiquetas do documento e colaboradores

 Colaboradores desta página: fabianosantos.net, lisaldofjf, cleverson, Lokojbkf
 Última atualização por: fabianosantos.net,