Referência de recursos de rede

Kayce Basques

Sofia Emelianova

Descubra novas maneiras de analisar como sua página é carregada nesta referência abrangente do Chrome DevTools recursos de análise de rede.

Registrar solicitações de rede

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

Parar de gravar solicitações de rede

Para interromper o registro de solicitações, faça o seguinte:

• Clique em Parar de gravar o 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 Preservar registro no painel Rede. O DevTools salva todas as solicitações até você desativar a opçã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 Rede estiver em foco para fazer capturas de tela.

Depois de fazer as capturas, é possível interagir com elas das seguintes maneiras:

• Passe o cursor sobre uma captura de tela para ver o ponto em que ela foi feita. Uma linha amarela aparecerá no painel "Visão geral".
• Clique na miniatura de uma captura de tela para filtrar as solicitações que ocorreram depois que ela foi capturado.
• Clique duas vezes em uma miniatura para aumentar o zoom.

Repetir solicitação XHR

Para reproduzir uma solicitação XHR, siga um destes procedimentos na tabela Requests:

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

Alterar o comportamento de carregamento

Emular um visitante novo desativando o cache do navegador

Para emular a experiência de um usuário que acessa 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 novo usuário, porque as solicitações são veiculadas a partir do cache do navegador em visitas repetidas.

Desativar o cache do navegador na gaveta "Condições de rede"

Se você quiser desativar o cache enquanto trabalha em outros painéis do DevTools, use as Condições de rede gaveta.

1. Clique no ícone para abrir a gaveta Condições de rede.
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 na tabela Requests e Selecione Limpar o cache do navegador.

Emular off-line

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

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

O DevTools mostra um ícone de aviso ao lado da guia Rede 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 de aviso ao lado do painel Network para lembrar que a limitação está ativada.

Criar perfis de limitação personalizados

Além das predefinições, como 4G lento ou rápido, você também pode adicionar suas próprias 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á ativada.

Limitar conexões WebSocket

Além das solicitações HTTP, o DevTools limita as conexões WebSocket desde a versão 99.

Para observar a limitação de 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 tão lento 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 "Condições de rede"

Se quiser limitar a conexão de rede enquanto trabalha em outros painéis do DevTools, use o Condições de rede.

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

Limpar cookies do navegador manualmente

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

Substituir cabeçalhos de resposta HTTP

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

Substituir o user agent

Para substituir manualmente o user agent:

1. Clique no ícone para abrir a gaveta Condições de rede.
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ção:

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 e a string correspondente nas guias Cabeçalhos, Paload ou Resposta.

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 formas de pesquisar no DevTools, consulte Pesquisa: encontrar texto em todos os recursos carregados.

Filtrar solicitações

Filtrar solicitações por propriedade

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

Se a caixa não aparecer, é provável que o painel "Filtros" esteja oculto. Consulte Ocultar o painel "Filtros".

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

Você pode usar várias propriedades simultaneamente separando cada uma delas com um espaço. Para 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 às operações AND. As operações OR não são compatíveis.

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

• cookie-domain: Mostre os recursos que definem um domínio de cookie específico.
• cookie-name: Mostrar os recursos que definem um nome de cookie específico.
• cookie-path: Mostre os recursos que definem um caminho de cookie específico.
• cookie-value: Mostre os recursos que definem um valor de cookie específico.
• domain: Mostra apenas recursos do domínio especificado. É possível usar um caractere curinga (*) 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 encontrou.
• has-overrides: Mostrar solicitações que modificaram content, headers, qualquer modificaçã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 tiver encontrados.
• is: Use is:running para encontrar recursos de WebSocket.
• larger-than: Mostra recursos maiores do que o tamanho especificado, em bytes. Como definir um valor de 1000 é equivalente a definir um valor de 1k.
• method: Mostra recursos que foram recuperados por um tipo de método HTTP especificado. O DevTools é preenchido a lista suspensa de preenchimento automático com todos os métodos HTTP encontrados.
• mime-type: Mostra recursos de um tipo MIME especificado. O DevTools preenche o menu suspenso de preenchimento automático com todos os tipos MIME encontrados.
• mixed-content: Mostrar todos os recursos de conteúdo misto (mixed-content:all) ou somente os que são mostrados (mixed-content:displayed).
• priority: Mostra recursos com nível de prioridade que corresponda ao valor especificado.
• resource-type: Mostra recursos de um tipo, por exemplo, imagem. O DevTools preenche o de preenchimento automático com todos os tipos de recursos encontrados.
• response-header-set-cookie: Mostrar cabeçalhos de Set-Cookie brutos na guia "Problemas". Cookies malformados com cabeçalhos Set-Cookie incorretos serão sinalizados no painel Network.
• scheme: Mostrar recursos recuperados por HTTP desprotegido (scheme:http) ou HTTPS protegido (scheme:https).
• set-cookie-domain: Mostrar os recursos que têm um cabeçalho Set-Cookie com um atributo Domain que corresponda ao valor especificado. O DevTools preenche o preenchimento automático com todos os cookies os domínios encontrados.
• set-cookie-name: Mostra os recursos que têm um cabeçalho Set-Cookie com um nome correspondente ao o valor especificado. O DevTools preenche o preenchimento automático com todos os nomes de cookies que tiver encontrados.
• set-cookie-value: Mostrar os recursos que têm um cabeçalho Set-Cookie com um valor correspondente o valor especificado. O DevTools preenche o preenchimento automático com todos os valores de cookie que tiver encontrados.
• status-code: Mostrar apenas recursos cujo código de status HTTP corresponda ao código especificado. 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 as solicitações por tipo, clique em 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 Rede.

Se esses botões não aparecerem, é provável que o painel "Filtros" esteja oculto. Consulte Ocultar os filtros .

Para ativar vários filtros de tipo simultaneamente, mantenha pressionadas as teclas Command (Mac) ou Control (Windows, Linux) e e clique.

Filtrar solicitações por horário

Arraste para a esquerda ou direita no painel Overview para exibir apenas as solicitações que estavam ativas durante durante esse período. O filtro é inclusivo. Qualquer solicitação que estava ativa durante o tempo destacado é mostrados.

Ocultar URLs de dados

URLs de dados são pequenos arquivos incorporados em outros documentos. Toda solicitação exibida no A tabela Requests que começa com data: é um URL de dados.

Para ocultar essas solicitações, marque Ocultar URLs de dados.

A barra de status na parte de baixo mostra o número de solicitações mostradas 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 solicitações de extensão, marque Ocultar URLs de extensão.

A barra de status na parte de baixo mostra o número de solicitações mostradas 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, consulte 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 mostradas 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 .

Além disso, o painel Rede mostra um ícone de aviso de aviso ao lado de uma solicitação afetada pela desativação de cookies de terceiros ou isenta dela. Passe o cursor sobre o ícone para ver uma dica com uma dica e clique nele para acessar o painel Problemas e mais informações.

Mostrar apenas solicitações bloqueadas

Para filtrar tudo, exceto solicitações bloqueadas, marque Solicitações bloqueadas. Para testar isso, use a guia de gaveta Bloqueio de solicitações de rede.

A tabela Requests destaca as solicitações bloqueadas em vermelho. A barra de status na parte de baixo mostra o número de solicitações mostradas 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, consulte 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 mostradas em relação ao total.

Ordenar solicitações

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

Ordenar por coluna

Clique no cabeçalho de qualquer coluna na tabela Solicitações para classificar 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" e passe o cursor Cascata e selecione uma das seguintes opções:

• Horário de início. A primeira solicitação 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 concluída fica no topo.
• Duração total. A solicitação com a menor configuração de conexão e solicitação / resposta está em topo.
• Latência. A solicitação que aguardou o menor tempo por uma resposta fica na parte superior.

Essas descrições pressupõem que cada opção está classificada da menor para a maior. Clicar no cabeçalho da coluna Cascata inverte a ordem.

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

Analisar solicitações

Enquanto o DevTools está aberto, ele registra todas as solicitações no painel Network. Use o painel Network para analisar solicitações.

Ver um registro de solicitações

Use a tabela Requests para ver um registro de todas as solicitações feitas enquanto o DevTools estava aberto. Clicando em ou passe o cursor sobre as solicitações para ver mais informações sobre elas.

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

• Nome. O nome de arquivo ou um identificador do recurso.

• Status. Essa coluna pode mostrar os seguintes valores:

  

  • Código de status HTTP, por exemplo, 200 ou 404.
  • CORS error para solicitações devido ao compartilhamento de recursos entre origens (CORS, na sigla em inglês).
  • (blocked:origin) para solicitações com cabeçalhos configurados incorretamente. Passe o cursor sobre esse valor de status para ver uma dica com 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. Analisador de HTML do Chrome.
  • Redirecionar. Um redirecionamento HTTP.
  • Roteiro. Uma função JavaScript.
  • Outro. Algum outro processo ou ação, como navegar até uma página usando um link ou inserir um URL na barra de endereço.

• Tamanho. O tamanho combinado dos cabeçalhos e do corpo da resposta, conforme entregue pelo servidor.

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

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

Adicionar ou remover colunas

Clique com o botão direito do mouse no cabeçalho da tabela Requests 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 Solicitações e selecione Cabeçalhos de resposta > Gerenciar colunas de cabeçalho.
2. Na janela de diálogo, clique em Adicionar cabeçalho personalizado, digite um nome e clique em Adicionar.

Agrupar solicitações por frames inline

Se os frames inline de uma página iniciarem muitas solicitações, simplifique o registro de solicitações agrupando-os.

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

Para visualizar uma solicitação iniciada por um frame inline, expanda-o no registro de solicitações.

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

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

Consulte Classificar por fase de atividade para ver as diferentes maneiras de classificar a Cascata.

Analisar as mensagens de uma conexão WebSocket

Para ver 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 Nome do Tabela Requests.

A tabela contém três colunas:

• Data. O payload da mensagem. Se a mensagem for de texto simples, ela será exibida aqui. Para binário de operações, essa coluna exibe o nome e o código do código de operação. Há suporte para os seguintes códigos de operação: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame e Pong Frame.
• Comprimento. O tamanho do payload da mensagem, em bytes.
• Horário. A hora 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 têm cor verde claro.
• As mensagens de texto recebidas são brancas.
• Os códigos de operação WebSocket são 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 EventStream.

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

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

Visualizar uma prévia do corpo de uma resposta

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

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

Essa guia é útil principalmente para visualizar imagens.

Ver um corpo de resposta

Para ver o corpo da resposta a uma solicitação:

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

Ver cabeçalhos HTTP

Para ver 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 para baixo até as seções General, Response Headers, Request Headers e, se quiser, Early Hints Headers.

Na seção Geral, o DevTools mostra uma mensagem de status legível 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 editar Editar para substituir o cabeçalho de resposta localmente.

Ver origem do cabeçalho HTTP

Por padrão, a guia Cabeçalhos mostra os nomes dos cabeçalhos em ordem alfabética. Para visualizar os nomes dos cabeçalhos HTTP no ordem em que foram recebidas:

1. Abra a guia Cabeçalhos da solicitação desejada. Consulte Visualizar cabeçalhos HTTP.
2. Clique em Ver código-fonte, ao lado da seção Cabeçalho da solicitação ou Cabeçalho da resposta.

Aviso de 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 a partir 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 exibir apenas cabeçalhos provisórios por motivos de segurança.

Ver payload da solicitação

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

Ver origem do payload

Por padrão, o DevTools mostra o payload de forma legível.

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.

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

Para alternar a codificação de URL para os argumentos, na guia Payload, clique em Ver decodificado ou Ver codificado em URL.

Ver cookies

Para ver 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 Ver, editar e excluir cookies.

Ver o detalhamento de tempo de uma solicitação

Para ver 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 Tempo.

Consulte Visualizar um detalhamento do tempo para acessar esses dados com mais rapidez.

Consulte Explicações sobre as fases de detalhamento de tempo para mais informações sobre cada uma das fases podem ver na guia Tempo.

Visualizar um detalhamento de tempo

Para visualizar o detalhamento de tempo de uma solicitação, passe o cursor sobre a entrada da solicitação na Coluna Cascata da tabela "Solicitações".

Consulte Visualizar o detalhamento de tempo de uma solicitação para saber como acessar esses dados sem necessidade o cursor.

Explicação das fases de detalhamento de tempo

Veja mais informações sobre cada uma das fases que você pode encontrar na guia Tempo:

• Enfileiramento. O navegador coloca as solicitações em fila 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. Válido para HTTP/1.0 e HTTP/1.1.
  • O navegador está alocando espaço brevemente no cache de disco.
• Parado. A solicitação pode ser interrompida após o início da conexão por qualquer um dos motivos descritos em Enfileiramento.
• Busca DNS. O navegador está resolvendo o endereço IP da solicitação.
• Conexão inicial. O navegador está estabelecendo uma conexão, incluindo handshakes de TCP ou novas tentativas e negociar um SSL.
• Negociação de proxy. O navegador está negociando a solicitação com um servidor proxy.
• Solicitação enviada. A solicitação está sendo enviada.
• Preparação do service worker. O navegador está iniciando o service worker.
• Solicitação de ServiceWorker. A solicitação está sendo enviada para o service worker.
• Aguardando (TTFB): O navegador está aguardando o primeiro byte de uma resposta. TTFB significa Time (Tempo) para 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, seja 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.

Visualizar iniciadores e dependências

Para visualizar os iniciadores e as dependências de uma solicitação, mantenha pressionada a tecla Shift e passe o mouse sobre a solicitação no Tabela de solicitações. O DevTools colore os iniciadores com verde e as dependências com vermelho.

Quando a tabela Requests está ordenada cronologicamente, a primeira solicitação verde acima da solicitação que sobre o qual você passa o mouse é o iniciador da dependência. Se houver outra solicitação verde acima que essa solicitação mais alta é o iniciador. E assim por diante.

Mostrar eventos de carregamento

O DevTools mostra o tempo dos eventos DOMContentLoaded e load em vários locais no Network. O evento DOMContentLoaded tem a cor azul, e o load é vermelho.

Conferir o número total de solicitações

O número total de solicitações está listado no painel Resumo, na parte inferior do painel Rede.

Atenção:Atenção:esse número rastreia apenas as solicitações que foram registradas desde que o DevTools foi aberto. Se outras solicitações ocorrerem antes de o DevTools ser aberto, elas não serão contabilizadas.

Ver o tamanho total dos recursos transferidos e carregados

O DevTools lista o tamanho total dos recursos transferidos e carregados (não compactados) no painel Resumo, na parte inferior do painel Rede.

Atenção:Atenção:esse número rastreia apenas as solicitações que foram registradas desde que o DevTools foi aberto. Se outras solicitações ocorrerem antes de o DevTools ser aberto, elas não serão contabilizadas.

Consulte Visualizar o tamanho descompactado de um recurso para saber o tamanho dos recursos após a descompactação do navegador.

Conferir o stack trace que gerou uma solicitação

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

Conferir o tamanho descompactado de um recurso

Verifique as Configurações > Grandes linhas de solicitação e, em seguida, observe o valor inferior da coluna Tamanho.

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

Exportar dados de solicitações

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

HAR (HTTP Archive) é 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.

É possível salvar todas as solicitações de rede em um arquivo HAR de duas maneiras:

• Clique com o botão direito do mouse em qualquer solicitação da tabela Solicitações e selecione Salvar tudo como HAR com conteúdo.
• Clique em Exportar HAR na barra de ações na parte superior do painel Rede.

.

Observação:o DevTools exporta para o arquivo HAR todas as solicitações que ocorreram desde o momento em que ele foi aberto. Não é possível filtrar solicitações para exportar. Para salvar uma única solicitação, consulte Copiar uma ou mais solicitações para a área de transferência.

Quando você tiver um arquivo HAR, poderá importá-lo de volta ao DevTools para análise de duas maneiras:

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

.

Observação:o painel Network lê e mostra os iniciadores para as solicitações importadas de arquivos HAR.

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

Na coluna Nome da tabela Solicitações, clique com o botão direito do mouse em uma solicitação, passe o cursor sobre Copiar e selecione uma das opções a seguir.

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

• Copiar URL. Copie o URL da solicitação para a área de transferência.
• Copiar como cURL. Copie a solicitação como um comando cURL.
• Copiar como PowerShell. Copie a solicitação como um comando do PowerShell.
• Copiar como busca. Copie a solicitação como uma chamada de busca.
• Copiar como busca (Node.js). Copiar 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:

• Copie todos os URLs. Copiar os URLs de todas as solicitações para a área de transferência.
• Copiar tudo como cURL. Copiar todas as solicitações como uma cadeia de comandos cURL.
• Copiar tudo como PowerShell. Copie 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. Copia todas as solicitações como dados HAR.

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:

• Copie todos os URLs listados. Copiar os URLs de todas as solicitações filtradas para a área de transferência.
• Copie todos os itens listados como cURL. Copie todas as solicitações filtradas como uma cadeia de comandos cURL.
• Copie todos os itens listados como PowerShell. Copie todas as solicitações filtradas como uma cadeia de comandos do PowerShell.
• Copiar tudo listado como busca. Copiar 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.
• Copie todos os itens listados como HAR. Copiar todas as solicitações filtradas como dados HAR.

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 o painel "Filtros"

Por padrão, o DevTools mostra o painel Filtros. Clique em Filtrar. para ocultá-lo.

Usar linhas de solicitação grande

Use linhas grandes quando quiser mais espaços em branco na sua tabela de solicitações de rede. Algumas colunas também é possível fornecer mais informações ao usar linhas grandes. Por exemplo, o valor na parte inferior da A coluna Size é o tamanho descompactado 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 Overview. Abra Configurações e desmarque a caixa de seleção Mostrar visão geral para ocultá-la.