Referência de recursos de rede

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 solicitações de rede

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

Parar de gravar solicitações de rede

Para interromper o registro de solicitações:

• Clique em Parar gravação de registro de rede no painel Rede. Ele fica cinza para indicar que o DevTools não está mais registrando as solicitações.
• Pressione Command> + E (Mac) ou Control + E (Windows e Linux) enquanto o painel Rede estiver em foco.

Limpar solicitações

Clique em Limpar no painel Rede para limpar todas as solicitações da tabela Solicitações.

Salvar solicitações nos carregamentos de página

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.

Fazer capturas de tela durante o carregamento da página

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

Para ativar as capturas de tela, abra Configurações no painel Rede e marque a opção Capturar capturas de tela.

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

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

• Passe o cursor sobre uma captura de tela para ver o ponto em que ela foi feita. Uma linha amarela aparece na linha do tempo Visão geral.
• Clique na miniatura de uma captura de tela para filtrar todas as solicitações que ocorreram depois que ela foi capturada.
• Clique duas vezes em uma miniatura para aumentar o zoom.

Repetir a solicitação XHR

Para reproduzir novamente uma solicitação XHR, siga um destes procedimentos na tabela Solicitações:

• Selecione a solicitação e pressione R.
• Clique com o botão direito do mouse na solicitação e selecione Repetir XHR.

Mudar 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 Desativar cache. O DevTools desativa o cache do navegador. Isso emula com mais precisão a experiência de um usuário novo, porque as solicitações são exibidas a partir do cache do navegador em visitas repetidas.

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 NetworkConditions.

1. Clique no ícone para abrir a gaveta Network Conditions.
2. Marque ou desmarque a caixa de seleção Desativar cache.

Limpar manualmente o cache do navegador

Para limpar manualmente o cache do navegador a qualquer momento, clique com o botão direito do mouse em qualquer lugar da tabela Solicitações e selecione Limpar cache do navegador.

Emular off-line

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

Para simular uma experiência de rede completamente off-line, selecione Off-line no menu suspenso Restrição de rede ao lado da caixa de seleção Desativar cache.

O DevTools mostra um ícone de aviso ao lado da guia Network para lembrar que o modo off-line está ativado.

Emular conexões de rede lentas

Para emular o 4G rápido, 4G lento ou 3G, selecione a predefinição correspondente no menu suspenso Limitação da barra de ações na parte superior.

O DevTools mostra um ícone de aviso ao lado do painel Network para lembrar que a limitação está ativa.

Criar perfis de limitação personalizados

Além das predefinições, como 4G lento ou rápido, você também pode adicionar seus próprios perfis de limitação personalizados:

1. Abra o menu Limitação e selecione Personalizado > Adicionar.
2. Configure um novo perfil de limitação conforme descrito em Configurações Configurações > Limitação.

3. No painel Rede, selecione o novo perfil no menu suspenso Limitação.

   

O DevTools mostra um ícone de aviso ao lado do painel Network para lembrar que a limitação está ativa.

Limitar conexões WebSocket

Além das solicitações HTTP, as Ferramentas do desenvolvedor limitam as conexões WebSocket desde a versão 99.

Para observar o estrangulamento do WebSocket:

1. Inicie uma nova conexão, por exemplo, usando uma ferramenta de teste.
2. No painel Rede, selecione Sem limitação e envie uma mensagem pela conexão.
3. Crie um perfil de limitação personalizado muito lento, por exemplo, 10 kbit/s. Um perfil lento vai ajudar você a notar a diferença.
4. No painel Rede, selecione o perfil e envie outra mensagem.
5. Alterne o filtro WS, clique no nome da conexão, abra a guia Mensagens e verifique a diferença de horário entre as mensagens enviadas e ecoadas com e sem limitação. Exemplo:

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 NetworkConditions.

1. Clique no ícone para abrir a gaveta Network Conditions.
2. Selecione uma velocidade de conexão no menu Limitação de rede.

Limpar manualmente os cookies do navegador

Para limpar manualmente os cookies do navegador a qualquer momento, clique com o botão direito em qualquer lugar da tabela Solicitações e selecione Limpar cookies do navegador.

Substituir cabeçalhos de resposta HTTP

Consulte Substituir arquivos e cabeçalhos de resposta HTTP localmente.

Substituir o user agent

Para modificar manualmente o user agent:

1. Clique no ícone para abrir a gaveta Network Conditions.
2. Desmarque a opção Selecionar automaticamente.
3. Escolha uma opção de user agent no menu ou insira uma opção personalizada na caixa.

Solicitações de pesquisa

Para pesquisar em cabeçalhos, payloads e respostas de solicitações:

1. Pressione o seguinte atalho para abrir a guia Pesquisa à direita:

   • No macOS, Command + F.
   • No Windows ou Linux, pressione Control + F.

2. Na guia Pesquisa, digite sua consulta e pressione Enter. Também é possível clicar em match_case ou regular_expression para ativar a diferenciação entre maiúsculas e minúsculas ou as expressões regulares, respectivamente.

3. Clique em um dos resultados da pesquisa. O painel Rede destaca em amarelo a solicitação correspondente. Além disso, o painel também abre a guia Cabeçalhos ou Resposta e destaca a string correspondente, se houver.

Para atualizar os resultados da pesquisa, clique em Atualizar Atualizar. Para limpar os resultados, clique em bloquear Limpar.

Para mais informações sobre todas as maneiras de pesquisar no DevTools, consulte Pesquisa: encontrar texto em todos os recursos carregados.

Filtrar solicitações

Filtrar solicitações por propriedades

Use a caixa Filtro para filtrar as solicitações por propriedades, como o domínio ou o tamanho da solicitação.

Se a caixa não aparecer, é provável que a barra Filtros esteja oculta. Consulte Ocultar a barra de filtros.

Para inverter o filtro, marque a caixa de seleção Inverter ao lado da caixa Filtro.

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 propriedades são equivalentes a operações AND. Não há suporte para operações OR.

Confira a seguir uma lista completa das propriedades compatíveis.

• cookie-domain: mostra os recursos que definem um domínio de cookie específico.
• cookie-name. Mostre os recursos que definem um nome de cookie específico.
• cookie-path: mostra os recursos que definem um caminho de cookie específico.
• cookie-value: mostra os recursos que definem um valor de cookie específico.
• domain. Só exibe recursos do domínio especificado. Você pode usar um caractere curinga (*) para incluir vários domínios. Por exemplo, *.com exibe recursos de todos os nomes de domínio que terminam em .com. O DevTools mostra um preenchimento do menu suspenso de preenchimento automático com todos os domínios encontrados.
• has-overrides: mostra solicitações que substituíram content, headers, qualquer substituição (yes) ou nenhuma substituição (no). É possível adicionar a coluna Tem substituições correspondente à tabela de solicitações.
• has-response-header: mostra 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: mostra recursos maiores do que o tamanho especificado em bytes. Definir um valor de 1000 é equivalente a definir um valor de 1k.
• method: mostra os recursos que foram recuperados por um tipo de método HTTP especificado. O DevTools preenche o menu suspenso de preenchimento automático com todos os métodos HTTP que encontrar.
• mime-type: mostra recursos de um tipo MIME especificado. O DevTools preenche o menu suspenso de preenchimento automático com todos os tipos MIME que encontrar.
• mixed-content: mostra todos os recursos de conteúdo misto (mixed-content:all) ou apenas os que estão em exibição (mixed-content:displayed).
• priority: mostra os recursos cujo nível de prioridade corresponde ao valor especificado.
• resource-type. Mostra recursos de um tipo de recurso, por exemplo, imagem. O DevTools preenche o menu suspenso de preenchimento automático com todos os tipos de recurso que encontrar.
• response-header-set-cookie. Mostrar cabeçalhos Set-Cookie brutos na guia "Problemas". Cookies malformados com cabeçalhos Set-Cookie incorretos serão sinalizados no painel "Rede".
• scheme: mostra recursos recuperados por HTTP desprotegido (scheme:http) ou HTTPS protegido (scheme:https).
• set-cookie-domain: mostra os recursos que têm um cabeçalho Set-Cookie com um atributo Domain que corresponde ao valor especificado. O DevTools preenche o preenchimento automático com todos os domínios de cookies que encontrar.
• set-cookie-name: mostra os recursos que têm um cabeçalho Set-Cookie com um nome correspondente ao valor especificado. O DevTools preenche o preenchimento automático com todos os nomes de cookie que encontrou.
• set-cookie-value: mostra os recursos que têm um cabeçalho Set-Cookie com um valor correspondente ao especificado. O DevTools preenche o preenchimento automático com todos os valores de cookie que encontrou.
• status-code: mostra apenas recursos cujo código de status HTTP corresponde ao código especificado. O DevTools preenche o menu suspenso de preenchimento automático com todos os códigos de status que encontrar.
• url. Mostra os recursos que têm um url correspondente ao valor especificado.

Filtrar solicitações por tipo

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

Se esses botões não forem exibidos, é provável que a barra de ações Filtros esteja oculta. Consulte Ocultar a barra de filtros.

Para mostrar recursos de vários tipos ao mesmo tempo, mantenha pressionado Command (Mac) ou Control (Windows, Linux) e clique em vários tipos de filtros.

Filtrar solicitações por tempo

Arraste para a esquerda ou direita na linha do tempo Visão geral para mostrar apenas as solicitações que estavam ativas durante esse período. O filtro é inclusivo. Qualquer solicitação que estava ativa durante o tempo destacado é exibida.

Ocultar URLs de dados

URLs de dados são pequenos arquivos incorporados em outros documentos. Qualquer solicitação que você encontrar na tabela Solicitações que comece com data: é um URL de dados.

Para ocultar essas solicitações, na barra de ações Filtros, selecione Mais filtros > check_box Ocultar URLs de dados.

A barra de status na parte de baixo mostra o número de solicitações exibidas em relação ao total.

Ocultar URLs de extensão

Para se concentrar no código que você cria, é possível filtrar solicitações irrelevantes enviadas por extensões instaladas no Chrome. As solicitações de extensão têm URLs que começam com chrome-extension://.

Para ocultar as solicitações de extensão, na barra de ações Filtros, selecione Mais filtros > check_box Ocultar URLs de extensão.

A barra de status na parte de baixo mostra o número de solicitações exibidas em relação ao total.

Mostrar apenas as solicitações com cookies de resposta bloqueados

Para filtrar tudo, exceto as solicitações com cookies de resposta bloqueados por qualquer motivo, na barra de ações Filtros, selecione Mais filtros > check_box Cookies de resposta bloqueados. Confira esta página de demonstração.

A barra de status na parte de baixo mostra o número de solicitações exibidas em relação ao total.

Para descobrir por que um cookie de resposta foi bloqueado, selecione a solicitação, abra a guia Cookies e passe o cursor sobre o ícone de informações info.

Além disso, o painel Rede mostra um ícone de aviso ao lado de uma solicitação com cookies bloqueados devido a flags ou configuração do Chrome. Passe o cursor sobre o ícone para ver uma dica e clique nele para acessar o painel Issues e conferir mais informações.

Mostrar apenas solicitações bloqueadas

Para filtrar tudo, exceto solicitações bloqueadas, na barra de ações Filtros, selecione Mais filtros > check_box Solicitações bloqueadas. Para testar isso, use a guia Bloqueio de solicitações de rede na gaveta.

A tabela Solicitações destaca as solicitações bloqueadas em vermelho. A barra de status na parte de baixo mostra o número de solicitações exibidas em relação ao total.

Mostrar apenas solicitações de terceiros

Para filtrar tudo, exceto as solicitações com origem diferente da origem da página, na barra de ações Filtros, selecione Mais filtros > check_box solicitações de terceiros. Confira esta página de demonstração.

A barra de status na parte de baixo mostra o número de solicitações exibidas em relação ao total.

Classificar solicitações

Por padrão, as solicitações na tabela Requests são classificadas por tempo de iniciação, mas é possível ordenar a tabela usando outros critérios.

Classificar por coluna

Clique no cabeçalho de qualquer coluna na tabela Solicitações para organizar as solicitações por essa coluna.

Ordenar por fase de atividade

Para mudar como a Cascata classifica as solicitações, clique com o botão direito do mouse no cabeçalho da tabela "Solicitações", passe o cursor sobre Cascata e selecione uma das seguintes opções:

• Horário de início. A primeira solicitação que foi iniciada fica no topo.
• Tempo de resposta. A primeira solicitação que foi iniciada por download fica no topo.
• Horário de término. A primeira solicitação a ser finalizada fica no topo.
• Duração total. A solicitação com a menor configuração de conexão e solicitação / resposta fica no topo.
• Latência. 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.

Neste exemplo, a cascata é classificada pela duração total. A parte mais clara de cada barra representa o tempo de espera. A parte mais escura representa o tempo gasto no download de bytes.

Analisar solicitações

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

Conferir um registro de solicitações

Use a tabela Requests para ver um 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.

Por padrão, a tabela "Solicitações" exibe as seguintes colunas:

• Nome. É o nome de arquivo ou o identificador do recurso.

• Status. Esta coluna pode mostrar os seguintes valores:

  

  • Código de status HTTP, por exemplo, 200 ou 404.
  • CORS error para solicitações com falha devido ao compartilhamento de recursos entre origens (CORS).
  • (blocked:origin) para solicitações com cabeçalhos configurados incorretamente. Passe o cursor sobre esse valor de status para ver uma dica sobre o que deu errado.
  • (failed) seguido pela mensagem de erro.

• Tipo: O tipo MIME do recurso solicitado.

• Iniciador. Os objetos ou processos a seguir podem iniciar solicitações:

  • Analisador. O analisador HTML do Chrome.
  • Redirecionar. Um redirecionamento HTTP.
  • Script. Uma função JavaScript.
  • Outro. Algum outro processo ou ação, como navegar até uma página usando um link ou digitar um URL na barra de endereço.

• Tamanho. O tamanho combinado dos cabeçalhos de resposta mais o corpo da resposta, conforme fornecido pelo servidor.

• Horário. A duração total, do início da solicitação até o recebimento do byte final na resposta.

• Cascata. Um detalhamento visual de cada atividade da solicitação.

Adicionar ou remover colunas

Clique com o botão direito do mouse no cabeçalho da tabela Solicitações e selecione uma opção para ocultar ou mostrar. As opções exibidas têm marcas de seleção ao lado.

Você pode adicionar ou remover as seguintes colunas extras: Caminho, URL, Método, Protocolo, Esquema, Domínio, Endereço remoto, Espaço de endereço remoto, Espaço de endereço do iniciador, Cookies, Definir cookies, Prioridade, ID da conexão, Tem substituições e Cascata.

Adicionar colunas personalizadas

Para adicionar uma coluna personalizada à tabela Solicitações:

1. Clique com o botão direito do mouse no cabeçalho da tabela Requests e selecione Response Headers > Manage Header Columns.
2. Na janela de diálogo, clique em Adicionar cabeçalho personalizado, insira o nome e clique em Adicionar.

Agrupar solicitações por frames inline

Se os frames inline em uma página iniciarem muitas solicitações, você pode agrupar essas solicitações para facilitar a visualização do registro.

Para agrupar solicitações por iframes, abra Configurações no painel Rede e marque check_box Agrupar por frame.

Para conferir uma solicitação iniciada por um frame inline, abra o registro de solicitações.

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

Use a Cascata para visualizar o tempo das solicitações em relação umas às outras. Por padrão, a cascata é organizada pelo horário de início das solicitações. Assim, as solicitações mais à esquerda começaram antes daquelas que estão mais à direita.

Consulte Classificar por fase de atividade para conferir as diferentes maneiras de classificar a Waterfall.

Analisar as mensagens de uma conexão WebSocket

Para conferir as mensagens de uma conexão WebSocket:

1. Na coluna Nome da tabela Solicitações, clique no URL da conexão WebSocket.
2. Clique na guia Mensagens. A tabela mostra as últimas 100 mensagens.

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

A tabela tem três colunas:

• Data. O payload da mensagem. Se a mensagem for de texto simples, ela vai aparecer aqui. Para códigos de operação binária, esta coluna mostra o nome e o código do código de operação. Os seguintes opcodes são aceitos: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame e Pong Frame.
• Comprimento. A duração do payload da mensagem, em bytes.
• Horário. O horário em que a mensagem foi recebida ou enviada.

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

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

Analisar eventos em um stream

Para visualizar os eventos transmitidos pelos servidores por meio da API Fetch, da API EventSource e do XHR:

1. Registre solicitações de rede em uma página que transmite eventos. Por exemplo, abra esta página de demonstração e clique em qualquer um dos três botões.
2. Em Rede, selecione uma solicitação e abra a guia Fluxo de eventos.

Para filtrar eventos, especifique uma expressão regular na barra de filtro na parte de cima da guia EventStream.

Para limpar a lista de eventos capturados, clique em bloquear Limpar.

Visualizar uma prévia de um corpo de resposta

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

1. Clique no URL da solicitação, na coluna Nome da tabela Solicitações.
2. Clique na guia Visualização.

Essa guia é mais útil para visualizar imagens.

Conferir um corpo de resposta

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

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

Conferir cabeçalhos HTTP

Para conferir os dados do cabeçalho HTTP de uma solicitação:

1. Clique em uma solicitação na tabela Solicitações.
2. Abra a guia Headers e role a tela para baixo até as seções General, Response Headers, Request Headers e, opcionalmente, Early Hints Headers.

Na seção Geral, as Ferramentas do desenvolvedor mostram uma mensagem de status legível por humanos ao lado do código de status HTTP recebido.

Na seção Cabeçalhos de resposta, passe o cursor sobre um valor de cabeçalho e clique no botão edit Edit para substituir o cabeçalho de resposta localmente.

Visualizar a origem do cabeçalho HTTP

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

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

Aviso sobre cabeçalhos provisórios

Às vezes, a guia Cabeçalhos mostra a mensagem de aviso Provisional headers are shown.... Isso pode ser devido aos seguintes motivos:

• A solicitação não foi enviada pela rede, mas foi veiculada de um cache local, que não armazena os cabeçalhos de solicitação originais. Nesse caso, desative o armazenamento em cache para conferir os cabeçalhos completos da solicitação.

• O recurso de rede não é válido. Por exemplo, execute fetch("https://jec.fish.com/unknown-url/") no Console.

O DevTools também pode mostrar apenas cabeçalhos provisórios por motivos de segurança.

Conferir o payload da solicitação

Para conferir o payload da solicitação, ou seja, os parâmetros da string de consulta e os dados do formulário, selecione uma solicitação na tabela Solicitações e abra a guia Payload.

Conferir a origem do payload

Por padrão, o DevTools mostra o payload em um formato legível por humanos.

Para visualizar as origens dos parâmetros de string de consulta e dos dados do formulário, na guia Payload, clique em Exibir código-fonte ao lado das seções Parâmetros de string de consulta ou Dados do formulário.

Mostrar argumentos decodificados por URL dos parâmetros da string de consulta

Para alternar a codificação de URL para argumentos, na guia Payload, clique em view decoded ou view URL-encoded.

Conferir cookies

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

1. Clique no URL da solicitação, na coluna Nome da tabela "Solicitações".
2. Clique na guia Cookies.

Para uma descrição de cada uma das colunas, consulte Campos.

Para modificar cookies, consulte Consultar, editar e excluir cookies.

Conferir o detalhamento de tempo de uma solicitação

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

1. Clique no URL da solicitação, na coluna Nome da tabela Solicitações.
2. Clique na guia Timing.

Consulte Visualizar um detalhamento de tempo para acessar esses dados de maneira mais rápida.

Consulte Explicação das fases do detalhamento de tempo para saber mais sobre cada uma das fases que podem aparecer na guia Timing.

Conferir uma prévia do detalhamento de tempo

Para conferir uma prévia do detalhamento de tempo de uma solicitação, passe o cursor sobre a entrada dela na coluna Waterfall da tabela "Solicitações".

Consulte Visualizar o detalhamento de tempo de uma solicitação para conferir uma forma de acessar esses dados sem precisar passar o cursor.

Explicação das fases de detalhamento de tempo

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

• Fila. O navegador enfileira solicitações antes do início da conexão e quando:
  • Há solicitações de prioridade mais alta.
  • Já existem seis conexões TCP abertas para essa origem, que é o limite. Aplica-se apenas a HTTP/1.0 e HTTP/1.1.
  • O navegador está alocando espaço brevemente no cache do disco.
• Parado. A solicitação pode ficar parada após o início da conexão por qualquer um dos motivos descritos em Enfileiramento.
• Consulta de DNS. O navegador está resolvendo o endereço IP da solicitação.
• Conexão inicial. O navegador está estabelecendo uma conexão, incluindo handshakes ou novas tentativas de TCP e negociando um SSL.
• Negociação de proxy. O navegador está negociando a solicitação com um servidor proxy.
• Pedido enviado. A solicitação está sendo enviada.
• Preparação do ServiceWorker. O navegador está iniciando o service worker.
• Solicitação para o ServiceWorker. A solicitação está sendo enviada ao service worker.
• Aguardando (TTFB). O navegador está esperando pelo primeiro byte de uma resposta. TTFB significa tempo até o primeiro byte. Esse tempo inclui uma viagem de ida e volta de latência e o tempo que o servidor demorou para preparar a resposta.
• Download de conteúdo. O navegador está recebendo a resposta diretamente da rede ou de um service worker. Esse valor é o tempo total gasto lendo o corpo da resposta. Valores maiores do que o esperado podem indicar uma rede lenta ou que o navegador está ocupado realizando outro trabalho, o que atrasa a leitura da resposta.

Conferir iniciadores e dependências

Para conferir os iniciadores e as dependências de uma solicitação, mantenha a tecla Shift pressionada e passe o cursor sobre a solicitação na tabela "Solicitações". O DevTools colore os iniciadores de verde e as dependências de vermelho.

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 acima dela, a maior é o iniciador do iniciador. E assim por diante.

Conferir eventos de carregamento

O DevTools mostra o tempo dos eventos DOMContentLoaded e load em vários lugares no painel Network. O evento DOMContentLoaded é azul, e o evento load é vermelho.

Conferir o número total de solicitações

O número total de solicitações é listado na barra de status na parte de baixo do painel Network.

Conferir o tamanho total dos recursos transferidos e carregados

O DevTools lista o tamanho total dos recursos transferidos e carregados (não compactados) na barra de status na parte de baixo do painel Network.

Consulte Conferir o tamanho não compactado de um recurso para saber o tamanho dos recursos depois que o navegador os descompactar.

Visualizar o stack trace que causou uma solicitação

Quando uma instrução JavaScript faz com que um recurso seja solicitado, passe o cursor sobre a coluna Initiator para conferir o stack trace que leva à solicitação.

Conferir o tamanho não compactado de um recurso

Verifique Configurações > Linhas com solicitações grandes e observe o valor da parte de baixo da coluna Tamanho.

Neste exemplo, o tamanho compactado do documento www.google.com enviado pela rede foi 43.8 KB, enquanto o tamanho descompactado foi 136 KB.

Exportar dados de solicitações

É possível exportar ou copiar a lista de solicitações, com filtros aplicados, de várias maneiras, conforme descrito a seguir.

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

HAR (arquivo HTTP) é um formato de arquivo usado por várias ferramentas de sessão HTTP para exportar os dados capturados. O formato é um objeto JSON com um conjunto específico de campos.

Para reduzir as chances de vazamentos acidentais de informações sensíveis, por padrão, você pode exportar o registro de rede "limpo" no formato HAR, que exclui informações sensíveis, como cabeçalhos Cookie, Set-Cookie e Authorization. Se necessário, você também pode exportar o registro com dados sensíveis.

Para salvar todas as solicitações de rede em um arquivo HAR, escolha uma das duas opções:

• Clique com o botão direito do mouse em qualquer solicitação na tabela Solicitações e selecione Copiar > Salvar tudo [listado] como HAR (sanitizado) ou Salvar tudo [listado] como HAR (com dados confidenciais).

  

• Clique em Fazer o download Exportar HAR (limpa)... na barra de ações na parte de cima do painel Rede.

  Para exportar com dados sensíveis, primeiro ative a opção settings Settings > Preferences > Network > check_box Allow to generate HAR with sensitive data. Em seguida, toque e mantenha pressionado o botão download Export e selecione Export HAR (with sensitive data).

  

Depois de ter um arquivo HAR, você pode importá-lo de volta para o DevTools para análise de duas maneiras:

• Arraste e solte o arquivo HAR na tabela Solicitações.
• Clique em upload Import HAR na barra de ações na parte de cima do painel Rede.

Copiar uma solicitação, um conjunto filtrado de solicitações ou todas elas para a área de transferência

Na 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.

Para copiar uma única solicitação, a resposta dela ou o stack trace:

• Copiar URL. Copie o URL da solicitação para a área de transferência.
• Copiar como cURL. Copia a solicitação como um comando cURL.
• Copiar como PowerShell. Copie a solicitação como um comando do PowerShell.
• Copiar como busca. Copia a solicitação como uma chamada de busca.
• Copiar como busca (Node.js). Copia a solicitação como uma chamada de busca do Node.js.
• Copiar resposta. Copie o corpo da resposta para a área de transferência.
• Copiar stack trace. Copie o stack track da solicitação para a área de transferência.

Para copiar todas as solicitações:

• Copiar todos os URLs. Copia os URLs de todas as solicitações para a área de transferência.
• Copiar tudo como cURL. Copia todas as solicitações como uma cadeia de comandos cURL.
• Copiar tudo como PowerShell. Copia todas as solicitações como uma cadeia de comandos do PowerShell.
• Copiar tudo como busca. Copiar todas as solicitações como uma cadeia de chamadas de busca.
• Copiar tudo como busca (Node.js). Copiar todas as solicitações como uma cadeia de chamadas de busca do Node.js.
• Copiar tudo como HAR (limpa). Copia todas as solicitações como dados HAR sem dados sensíveis, como cabeçalhos Cookie, Set-Cookie e Authorization.
• Copiar tudo como HAR (com dados sensíveis). Copia todas as solicitações como dados HAR com dados sensíveis.

Para copiar um conjunto filtrado de solicitações, aplique um filtro ao registro de rede, clique com o botão direito do mouse em uma solicitação e selecione:

• Copiar todos os URLs listados. Copie os URLs de todas as solicitações filtradas para a área de transferência.
• Copie todos os itens listados como cURL. Copia todas as solicitações filtradas como uma cadeia de comandos cURL.
• Copie todos os itens listados como PowerShell. Copia todas as solicitações filtradas como uma cadeia de comandos do PowerShell.
• Copie tudo o que está listado como busca. Copia todas as solicitações filtradas como uma cadeia de chamadas de busca.
• Copiar todos os listados como busca (Node.js). Copie todas as solicitações filtradas como uma cadeia de chamadas de busca do Node.js.
• Copiar tudo listado como HAR (limpa). Copia todas as solicitações filtradas como dados HAR sem dados sensíveis, como cabeçalhos Cookie, Set-Cookie e Authorization.
• Copiar todas as solicitações listadas como HAR (com dados sensíveis). Copiar todas as solicitações filtradas como dados HAR com dados confidenciais.

Mudar o layout do painel "Network"

Expanda ou recolha seções da interface do painel Rede para se concentrar no que é importante para você.

Ocultar a barra de ação "Filtros"

Por padrão, o DevTools mostra a barra de filtros na parte de cima do painel Network. Clique em filter_alt Filtro para ocultá-lo.

Usar linhas de solicitação grandes

Use linhas grandes quando você quiser mais espaço em branco na tabela de solicitações de rede. Algumas colunas também apresentam um pouco mais de informações ao usar linhas grandes. Por exemplo, o valor na parte inferior da coluna Tamanho é o tamanho não compactado de uma solicitação, e a coluna Prioridade mostra a prioridade de busca inicial (valor inferior) e final (valor superior).

Abra Configurações e clique em Linhas com solicitações grandes para exibir as linhas grandes.

Ocultar a faixa "Visão geral"

Por padrão, o DevTools mostra a faixa Visão geral. Abra Configurações e desmarque a caixa de seleção Mostrar visão geral para ocultar.