Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Referência de análise do Network

Conheça novas maneiras de analisar como sua página é carregada neste guia abrangente sobre os recursos de análise de rede do Chrome DevTools.

Registrar as solicitações de rede

Por padrão, o DevTools registra todas as solicitações de rede no painel "Network", desde que o DevTools esteja aberto.

O painel
Imagem 1. O painel "Network"

Suspender o registro das solicitações de rede

Para interromper o registro de solicitações:

  • Clique em Stop recording network log Stop recording network
 log no painel "Network". Ele fica cinza para indicar que o DevTools não está mais registrando as solicitações.
  • Pressione Command+E (Mac) ou Control+E (Windows, Linux) enquanto o painel Network estiver em foco.

Apagar as solicitações

Clique em Clear Clear no painel "Network" para apagar todas as solicitações na tabela Requests.

O botão
Imagem 2. Botão "Clear" destacado em azul

Salvar as solicitações nos carregamentos de páginas

Para salvar solicitações nos carregamentos de página, marque a caixa de seleção Preserve log no painel "Network". O DevTools salva todas as solicitações até você desativar o Preserve log.

A caixa de seleção
Imagem 3. A caixa de seleção "Preserve Log” destacada em azul

Fazer capturas de tela durante o carregamento da página

Faça capturas de tela para analisar o que os usuários visualizam enquanto esperam o carregamento da página.

Para ativar as capturas de tela, clique em Capture screenshots Capture
screenshots no painel "Network". Ele fica azul quando ativado.

Atualize a página enquanto o painel "Network" está em foco para fazer as capturas de tela.

Após as imagens serem capturadas, você pode interagir com elas das seguintes formas:

  • Passe o cursor sobre a captura de tela para visualizar o ponto em que a imagem foi capturada. Uma linha amarela aparece no painel "Overview".
  • Clique na miniatura de uma captura de tela para filtrar qualquer solicitação que tenha sido feita depois que a imagem foi capturada.
  • Clique duas vezes em uma miniatura para aumentar o zoom.
Passando o cursor sobre uma captura de tela.
Imagem 4. Passando o cursor sobre uma captura de tela. A linha vertical amarela no painel "Overview" e a cascata representam o momento em que a captura de tela foi feita.

Repetir a reprodução de uma solicitação XHR

Para reproduzir novamente uma solicitação XHR, clique com o botão direito na solicitação na tabela "Requests" e selecione Replay XHR.

Seleção de
Imagem 5. Seleção de "Replay XHR"

Alterar o comportamento de carregamento

Emular um visitante novo ao desabilitar o cache do navegador

Para emular a experiência de um usuário que visita seu site pela primeira vez, marque a caixa de seleção Disable cache. O DevTools desativa o cache do navegador. Isso faz com que a emulação dessa experiência seja mais precisa porque as solicitações são disponibilizadas por meio do cache do navegador em visitadas repetidas.

A caixa de seleção
Imagem 6. A caixa de seleção "Disable Cache" destacada em azul

Desativar o cache do navegador na gaveta "Network Conditions"

Se você quiser desativar o cache enquanto trabalha em outros painéis do DevTools, use a gaveta "Network Conditions".

  1. Abra a gaveta Network Conditions.
  2. Marque ou desmarque a caixa de seleção Disable Cache.

Apagar manualmente o cache do navegador

Para apagar manualmente o cache do navegador a qualquer momento, clique com o botão direito em qualquer lugar na tabela "Requests" e selecione Clear Navegador Cache.

Seleção de
Imagem 7. Seleção de "Clear Browser Cache"

Emular off-line

Existe uma nova classe de aplicativos da Web, chamados Progressive Web Apps, que podem funcionar off-line com a ajuda de service workers. Ao criar esse tipo de aplicativo, é útil poder simular rapidamente um dispositivo que não tem conexão de dados.

Marque a caixa de seleção Offline para simular uma experiência de rede completamente off-line.

A caixa de seleção
Imagem 8. A caixa de seleção "Offline" destacada em azul

Emular conexões de rede lentas

Emule 2G, 3G e outras velocidades de conexão no menu Network Throttling.

O menu
Imagem 9. O menu "Network Throttling" destacado em azul

Você pode selecionar entre uma variedade de predefinições, como "Regular" ou "Good 2G". Você também pode adicionar sua própria predefinição personalizada. Abra o menu "Network Throttling" e selecione Custom > Add.

O DevTools mostra um ícone de aviso próximo à guia Network para lembrar você que a limitação está ativa.

Emular conexões de rede lentas na gaveta "Network Conditions"

Se você quiser limitar a conexão de rede enquanto trabalha em outros painéis do DevTools, use a gaveta "Network Conditions".

  1. Abra a gaveta Network Conditions.
  2. Selecione a velocidade de conexão desejada no menu Network Throttling.

Apagar manualmente os cookies do navegador

Para apagar manualmente os cookies do navegador a qualquer momento, clique com o botão direito em qualquer lugar da tabela "Requests" e selecione Clear Browser Cookies.

Seleção de
Imagem 10. Seleção de "Clear Browser Cookies"

Modificar o user agent

Para modificar manualmente o user agent:

  1. Abra a gaveta Network Conditions.
  2. Desmarque Select automatically.
  3. Selecione uma opção de user agent no menu ou insira uma opção personalizada na caixa de texto.

Filtrar solicitações

Filtrar solicitações por property

Usar a caixa de texto Filter para filtrar as solicitações por property, como domínio ou tamanho da solicitação.

Se a caixa de texto não for exibida, é provável que o painel "Filters" esteja oculto. Veja Ocultar o painel "Filters".

A caixa de texto
Imagem 11. A caixa de texto "Filters" destacada em azul

Você pode usar várias properties ao mesmo tempo separando cada uma delas com um espaço. Por exemplo, mime-type:image/gif larger-than:1K exibe todos os GIFs com mais de um kilobyte. Esses filtros de várias properties são equivalentes a operações AND. Atualmente, não há suporte para as operações OR .

Veja abaixo uma lista completa das properties compatíveis.

  • domain. Só exibe recursos do domínio especificado. Você pode usar um caractere curinga (*) para incluir diversos domínios. Por exemplo, *.com exibe recursos de todos os nomes de domínio que acabam com .com. O DevTools preenche o menu suspenso de preenchimento automático com todos os domínios que encontrar.
  • has-response-header. Exibe os recursos que contêm o cabeçalho de resposta HTTP especificado. O DevTools preenche o menu suspenso de preenchimento automático com todos os cabeçalhos de resposta que encontrar.
  • is. Use is:running para encontrar recursos WebSocket.
  • larger-than. Exibe recursos maiores do que o tamanho especificado, em bytes. Definir um valor de 1000 é equivalente a aplicar o valor 1k.
  • method. Exibe recursos que foram recuperados por um tipo de método HTTP especificado. O DevTools preenche o menu suspenso com todos os métodos HTTP que encontrar.
  • mime-type. Exibe recursos de um tipo MIME específico. O DevTools preenche o menu suspenso com todos os tipos MIME que encontrar.
  • mixed-content. Mostra todos os recursos de conteúdo misto (mixed-content:all) ou somente os que estão em exibição no momento (mixed-content:displayed).
  • scheme. Exibe recursos recuperados por HTTP desprotegido (scheme:http) ou HTTPS protegido (scheme:https).
  • set-cookie-domain. Exibe os recursos que têm um cabeçalho Set-Cookie com um atributo Domain correspondente ao valor especificado. O DevTools preenche automaticamente com todos os domínios de cookies que encontrar.
  • set-cookie-name. Exibe os recursos que têm um cabeçalho Set-Cookie com um nome correspondente ao valor especificado. O DevTools preenche automaticamente com todos os nomes de cookie que encontrar.
  • set-cookie-value. Exibe os recursos que têm um cabeçalho Set-Cookie com um valor correspondente ao especificado. O DevTools preenche automaticamente com todos os valores de cookie que encontrar.
  • status-code. Exibe somente recursos com códigos de status HTTP que correspondem ao código especificado. O DevTools preenche o menu suspenso de preenchimento automático com todos os códigos de status que encontrar.

Filtrar solicitações por tipo

Para filtrar solicitações por tipo, clique nos botões XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Manifest ou Other (qualquer outro tipo não listado aqui) no painel "Network".

Se esses botões não forem exibidos, é provável que o painel "Filters" esteja oculto. Veja Ocultar o painel "Filters".

Para ativar vários tipos de filtro ao mesmo tempo, mantenha pressionado Command (Mac) ou Control (Windows, Linux) e então clique.

Usando os filtros de tipo para exibir os recursos JS, CSS e
            Doc[ument].
Imagem 12. Usando os filtros de tipo para exibir os recursos JS, CSS e Doc[ument].

Filtrar solicitações por tempo

Clique e arraste para a esquerda ou para a direita a fim de exibir somente solicitações que estavam ativas durante aquele período de tempo. O filtro é inclusivo. Qualquer solicitação que estava ativa durante o tempo destacado é exibida.

Filtrando qualquer solicitação que não estava ativa por volta dos 2500 ms.
Imagem 13. Filtrando qualquer solicitação que não estava ativa por volta dos 2.500 ms

Ocultar URLs de dados

URLs de dados são pequenos arquivos incorporados em outros documentos. Qualquer solicitação que você veja na tabela "Requests" e comece com data: é um URL de dados.

Marque a caixa de seleção Hide data URLs para ocultar essas solicitações.

A caixa de seleção
Imagem 14. A caixa de seleção "Hide Data URLs"

Classificar solicitações

Por padrão, as solicitações na tabela "Requests" são classificadas por tempo de iniciação, mas você pode classificá-las usando outros critérios.

Classificar por coluna

Clique no cabeçalho de qualquer coluna nas solicitações para classificá-las por essa coluna.

Classificar por fase de atividade

Para alterar como a cascata classifica as solicitações, clique com o botão direito no cabeçalho da tabela "Requests", passe o cursor sobre Waterfall e selecione uma das seguintes opções:

  • Start Time. A primeira solicitação que foi iniciada fica no topo.
  • Response Time. A primeira solicitação que teve o download iniciado fica no topo.
  • End Time. A primeira solicitação a ser finalizada fica no topo.
  • Total Duration. A solicitação com menor configuração de conexão e solicitação/resposta fica no topo.
  • Latency. A solicitação que esperou o menor tempo por uma resposta fica no topo.

Essas descrições presumem que cada opção está classificada da menor para a maior. Ao clicar no cabeçalho da coluna Waterfall, a ordem é revertida.

Classificação de
Imagem 15. Classificação de "Waterfall" pela duração total. A parte mais clara de cada barra representa o tempo de espera. A parte mais escura representa o download de bytes.

Analisar solicitações

Se o DevTools estiver aberto, ele registrará todas as solicitações no painel "Network". Use o painel "Network" para analisar as solicitações.

Visualizar um registro de solicitações

Use a tabela "Requests" para visualizar o registro de todas as solicitações feitas enquanto o DevTools estava aberto. Ao clicar ou passar o cursor sobre as solicitações, mais informações sobre elas são reveladas.

A tabela
Imagem 16. A tabela "Requests" destacada em azul

Por padrão, a tabela "Requests" exibe as seguintes colunas:

  • Name. É o nome de arquivo ou o identificador do recurso.
  • Status. É o código de status HTTP.
  • Type. É o tipo MIME do recurso solicitado.
  • Initiator. Os seguintes objetos ou processos podem iniciar solicitações:
    • Parser. O analisador HTML do Chrome.
    • Redirect. Um redirecionamento HTTP.
    • Script. Uma função JavaScript.
    • Other. Algum outro processo ou ação, como navegar até uma página por meio de um link ou digitar um URL na barra de endereço.
  • Size. O tamanho combinado dos cabeçalhos de resposta mais o corpo da resposta, conforme fornecido pelo servidor.
  • Time. É a duração total, desde o início da solicitação até o recebimento do byte final na resposta.
  • Waterfall. Um detalhamento visual de cada atividade da solicitação.

Adicionar ou remover colunas

Clique com o botão direito no cabeçalho da tabela "Requests" e selecione uma opção para ocultar ou exibir. Atualmente, as opções exibidas têm marcas de seleção ao lado.

Adição de uma coluna à tabela
Imagem 17. Adição de uma coluna à tabela "Requests".

Adicionar colunas personalizadas

Para adicionar uma coluna personalizada à tabela "Requests", clique com o botão direito no cabeçalho da tabela e selecione Response Headers > Manage Header Columns.

Adição de uma coluna personalizada à tabela
Imagem 18. Adição de uma coluna personalizada à tabela "Requests".

Visualizar o tempo das solicitações em relação às outras

Use "Waterfall" para visualizar o tempo de uma solicitação em relação a outra. Por padrão, a organização de "Waterfall" é feita pelo horário de início das solicitações. Assim, as solicitações mais à esquerda começaram antes daquelas que estão mais à direita.

Veja Classificar por fase de atividade para ver as diferentes formas de classificação de "Waterfall".

A coluna
Imagem 19. A coluna "Waterfall" do painel "Requests".

Analisar os frames de uma conexão WebSocket

Para visualizar os frames de uma conexão WebSocket:

  1. Clique no URL da conexão WebSocket, abaixo da colunaName da tabela "Requests".
  2. Clique na guia Frames. A tabela exibe os últimos 100 frames.

Para atualizar a tabela, clique novamente no nome da conexão WebSocket abaixo da coluna Name na tabela "Requests".

A guia
Imagem 20. A guia "Frames" destacada em azul

A tabela tem três colunas:

  • Data. É o payload da mensagem. Se a mensagem for de texto simples, será exibida aqui. Para códigos de operação binária, este campo exibe o nome e o código da operação. Os seguintes códigos de operação são aceitos: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame e Pong Frame.
  • Length. A duração do payload da mensagem, em bytes.
  • Time. O horário em que a mensagem foi recebida ou enviada.

As mensagens são codificadas por cor de acordo com o tipo:

  • As mensagens de texto enviadas têm cor verde-claro.
  • As mensagens de texto recebidas têm cor branca.
  • Os códigos de operação WebSocket têm cor amarelo-claro.
  • Os erros têm cor vermelho-claro.

Visualizar uma prévia de um corpo de resposta

Para visualizar uma prévia de um corpo de resposta:

  1. Clique no URL da solicitação, abaixo da coluna Name da tabela "Requests".
  2. Clique na guia Preview.

Essa guia é mais útil para visualizar imagens.

A guia
Imagem 21. A guia "Preview" destacada em azul

Visualizar um corpo de resposta

Para visualizar o corpo de resposta de uma solicitação:

  1. Clique no URL da solicitação, abaixo da coluna Name da tabela "Requests".
  2. Clique na guia Response.
A guia
Imagem 22. A guia "Response" destacada em azul

Visualizar cabeçalhos HTTP

Para visualizar dados de cabeçalho HTTP sobre uma solicitação:

  1. Clique no URL da solicitação, abaixo da coluna Name da tabela "Requests".
  2. Clique na guia Headers.
A guia
Imagem 23. A guia "Headers" destacada em azul

Visualizar a origem do cabeçalho HTTP

Por padrão, a guia "Headers" exibe os nomes dos cabeçalhos em ordem alfabética. Para visualizar os nomes dos cabeçalhos HTTP na ordem em que foram recebidos:

  1. Abra a guia Headers para a solicitação de seu interesse. Veja Visualizar cabeçalhos HTTP.
  2. Clique em view source, ao lado da seção Request Header ou Response Header.

Visualizar parâmetros da string de consulta

Para visualizar os parâmetros da string de consulta de um URL em um formato legível:

  1. Abra a guia Headers para a solicitação de seu interesse. Veja Visualizar cabeçalhos HTTP.
  2. Acesse a seção Query String Parameters.
A seção
Imagem 24. A seção "Query String Parameters" destacada em azul

Visualizar a origem dos parâmetros da string de consulta

Para visualizar a origem dos parâmetros da string de consulta de uma solicitação:

  1. Acesse a seção "Query String Parameters". Veja Visualizar parâmetros da string de consulta.
  2. Clique em view source.

Visualizar parâmetros da string de consulta codificada em URL

Para visualizar os parâmetros da string de consulta em formato legível, porém preservando as codificações:

  1. Acesse a seção "Query String Parameters". Veja Visualizar parâmetros da string de consulta.
  2. Clique em view URL encoded.

Ver cookies

Para visualizar os cookies enviados no cabeçalho HTTP de uma solicitação:

  1. Clique no URL da solicitação, abaixo da coluna Name da tabela "Requests".
  2. Clique na guiaCookies.

Consulte Campos para ver uma descrição de cada uma das colunas.

A guia
Imagem 25. A guia "Cookies" destacada em azul

Visualizar o detalhamento de tempo de uma solicitação

Para visualizar o detalhamento de tempo de uma solicitação:

  1. Clique no URL da solicitação, abaixo da coluna Name da tabela "Requests".
  2. Clique na guia Timing.

Consulte Visualizar detalhamento de tempo para ver um modo mais rápido de acessar esses dados.

Consulte Explicação das fases do detalhamento de tempo para saber mais informações sobre cada uma das fases que você pode ver na guia "Timing".

A guia
Imagem 26. A guia "Timing" destacada em azul

Veja mais informações sobre cada uma das fases.

Consulte Visualizar detalhamento de tempo para ver outras maneiras de acessar essa visualização.

Ver uma prévia do detalhamento de tempo

Para ver uma prévia do detalhamento de tempo de uma solicitação, passe o cursor sobre a entrada da solicitação na coluna Waterfall da tabela "Requests".

Consulte Visualizar o detalhamento de tempo de uma solicitação para ver uma forma de acessar esses dados sem ter que passar o cursor.

Visualização prévia do detalhamento de tempo de uma solicitação.
Imagem 27. Visualização prévia do detalhamento de tempo de uma solicitação

Explicação das fases de detalhamento de tempo

Veja mais informações sobre cada uma das fases que podem aparecer na guia "Timing" :

  • Queueing. O navegador enfileira solicitações quando:
    • existem solicitações de prioridade mais alta;
    • já existem seis conexões TCP abertas para essa origem. Esse é o limite. Aplica-se somente a HTTP/1.0 e HTTP/1.1;
    • o navegador aloca brevemente espaço no cache do disco
  • Stalled. A solicitação pode ficar parada por qualquer um dos motivos descritos em Queueing.
  • DNS Lookup. O navegador está resolvendo o endereço IP da solicitação.
  • Proxy negotiation. O navegador está negociando a solicitação com um servidor proxy.
  • Request sent. A solicitação está sendo enviada.
  • ServiceWorker Preparation. O navegador está iniciando o service worker.
  • Request to ServiceWorker. A solicitação está sendo enviada ao service worker.
  • Waiting (TTFB). O navegador está esperando pelo primeiro byte de uma resposta. TTFB significa tempo até o primeiro byte (Time To First Byte). Esse tempo inclui uma viagem de ida e volta de latência e o tempo que o servidor demorou para preparar a resposta.
  • Content Download. O navegador está recebendo a resposta.
  • Receiving Push. O navegador está recebendo os dados para essa resposta por meio do envio push do servidor HTTP/2.
  • Reading Push. O navegador está lendo os dados locais recebidos anteriormente.

Visualizar iniciadores e dependências

Para visualizar os iniciadores e as dependências de uma solicitação, mantenha pressionado Shift e passe o cursor sobre a solicitação na tabela "Requests". O DevTools colore os iniciadores de verde e as dependências, de vermelho.

Visualização de iniciadores e dependências de uma solicitação.
Imagem 28. Visualização de iniciadores e dependências de uma solicitação

Quando a tabela "Requests" é ordenada cronologicamente, a primeira solicitação em verde, acima da que você está passando o cursor, é o iniciador da dependência. Se houver outra solicitação em verde sobre essa, a maior é o iniciador do iniciador. E assim por diante.

Visualizar eventos de carregamento

O DevTools exibe o tempo dos eventos DOMContentLoaded e load em vários locais, no painel "Network". O evento DOMContentLoaded tem a cor azul, e o load tem a cor vermelha.

As localizações dos eventos DOMContentLoaded e load no painel
Imagem 29. As localizações dos eventos DOMContentLoaded e load no painel "Network"

Visualizar o número total de solicitações

O número total de solicitações é listado no painel "Summary", na parte inferior do painel "Network".

Atenção: esse número só rastreia as solicitações que foram registradas desde que o DevTools foi aberto. Outras solicitações que ocorreram antes de o DevTools ser aberto não serão contabilizadas.

O número total de solicitações desde que o DevTools foi aberto
Imagem 30. O número total de solicitações desde que o DevTools foi aberto

Visualizar o tamanho total do download

O tamanho total do download das solicitações é listado no painel "Summary", na parte inferior do painel "Network".

Atenção: esse número só rastreia as solicitações que foram registradas desde que o DevTools foi aberto. Outras solicitações que ocorreram antes de o DevTools ser aberto não serão contabilizadas.

O tamanho total do download das solicitações
Imagem 31. O tamanho total do download das solicitações

Consulte Visualizar o tamanho não compactado de um recurso para ver qual é o tamanho dos recursos após o navegador realizar a descompactação deles.

Visualizar o rastreamento de pilha que gerou uma solicitação

Quando uma instrução JavaScript fizer com que um recurso seja solicitado, passe o cursor sobre a coluna Initiator para visualizar o rastreamento de pilha que leva à solicitação.

O rastreamento de pilha que leva à solicitação do recurso
Imagem 32. O rastreamento de pilha que leva à solicitação do recurso

Visualizar o tamanho não compactado de um recurso

Clique em Use Large Request Rows Use Large Request
Rows e olhe o valor na parte inferior da coluna Size.

Exemplo de recursos não compactados.
Imagem 33. O tamanho compactado do arquivo jquery-bundle.js enviado pela rede era de 30.9 KB, enquanto o arquivo não compactado tinha um tamanho de 86.3 KB

Exportar dados de solicitações

Salvar todas as solicitações de rede em um arquivo HAR

Para salvar todas as solicitações de rede em um arquivo HAR:

  1. Clique com o botão direito em qualquer solicitação da tabela "Requests".
  2. Selecione Save as HAR with Content. O DevTools salva todas as solicitações que ocorreram desde que foi aberto em um arquivo HAR. Não há como filtrar solicitações nem salvar apenas uma solicitação.

Assim que tiver um arquivo HAR, você poderá importá-lo de volta para o DevTools e analisá-lo. Basta arrastar e soltar o arquivo HAR na tabela "Requests". Veja também Analisador HAR.

Seleção de
Imagem 34. Seleção de Save as HAR with Content

Copiar uma ou mais solicitações na área de transferência

Abaixo da coluna Name da tabela "Requests", clique com o botão direito em uma solicitação, passe o cursor sobre Copy e selecione uma das seguintes opções:

  • Copy Link Address. Copia o URL da solicitação para a área de transferência.
  • Copy Response. Copia o corpo da resposta para a área de transferência.
  • Copy as cURL. Copia a solicitação como um comando cURL.
  • Copy All as cURL. Copia todas as solicitações como uma cadeia de comandos cURL.
  • Copy All as HAR. Copia todas as solicitações como dados HAR.
Seleção de
Imagem 35. Seleção de "Copy Response"

Alterar o layout do painel "Network"

Você pode expandir ou recolher seções da IU do painel "Network" para se concentrar no que considera importante.

Ocultar o painel "Filters"

Por padrão, o DevTools exibe o painel Filters. Clique em Filter Filter para ocultá-lo.

O botão
Imagem 36. "Hide Filters" destacado em azul

Usar linhas de solicitação grandes

Use linhas grandes quando você quiser mais espaço em branco na sua tabela de solicitações de rede. Algumas colunas também apresentam algumas informações a mais quando linhas grandes são utilizadas. Por exemplo, o valor na parte inferior da coluna Size é o tamanho não compactado de uma solicitação.

Exemplo de linhas de solicitação grandes no painel
Imagem 37. Exemplo de linhas de solicitação grandes no painel "Requests"

Clique em Use large request rows Use large request
rows para ativar linhas grandes.

O botão
Imagem 38. "Large Request Rows" destacado em azul

Ocultar o painel "Overview"

Por padrão, o DevTools exibe o painel Overview. Clique em Hide overview Hide overview para ocultá-lo.

O botão
Imagem 39. "Hide Overview" destacado em azul

Feedback

Was this page helpful?