Referência de recursos de rede

Descubra novas maneiras de analisar o carregamento da sua página nesta referência abrangente dos recursos de análise de rede das Ferramentas para desenvolvedores do Chrome.

Gravar solicitações de rede

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

Parar de gravar solicitações de rede

Para interromper a gravação de solicitações:

• Clique em Parar de gravar o registro de rede no painel Rede. Ele fica cinza para indicar que o DevTools não está mais gravando solicitações.
• Pressione Command> + E (Mac) ou Control + E (Windows, Linux) enquanto o painel Network 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 em carregamentos de página

Para salvar solicitações em carregamentos de página, marque a caixa de seleção Preserve log no painel Network. O DevTools salva todas as solicitações até que você desative a opção Preservar registro.

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 a página carregar.

Para ativar as capturas de tela, abra Configurações no painel Rede e selecione Capturar telas.

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

Depois de capturar, você pode interagir com as capturas de tela das seguintes maneiras:

• Passe o cursor sobre uma captura de tela para ver o momento 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 as solicitações que ocorreram após a captura.
• Clique duas vezes em uma miniatura para ampliar.

Editar e reenviar uma solicitação

É possível editar e reenviar qualquer solicitação de rede buscável na tabela Solicitações:

1. Clique com o botão direito do mouse na solicitação e selecione Editar e reenviar como busca. O DevTools abre o painel Console com a solicitação preenchida como uma chamada fetch(), preservando os parâmetros da solicitação original e o contexto de execução.
2. Se quiser, edite a chamada fetch() no Console e pressione Enter para reenviar a solicitação.

Mudar o comportamento de carregamento

Emular um visitante novo desativando o processo de cache do navegador

Para simular a experiência de um usuário iniciante no seu site, marque a caixa de seleção Desativar cache. O DevTools desativa o processo de cache do navegador. Isso emula com mais precisão a experiência de um usuário iniciante, porque as solicitações são exibidas do processo de cache do navegador em visitas repetidas.

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

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

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 processo de 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, chamada de Apps Web Progressivos, que pode funcionar off-line com a ajuda de service workers. Ao criar esse tipo de app, é útil poder 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 4G rápido, 4G lento ou 3G, selecione a predefinição correspondente no menu suspenso Restrição na barra de ações na parte de cima.

Se as métricas de campo estiverem ativadas no painel Desempenho, uma das opções de limitação no menu poderá ser marcada como recomendada com base nos dados do Chrome User Experience Report.

O DevTools mostra um ícone de aviso ao lado do painel Rede 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 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 settings Configurações > Limitação.

3. De volta ao painel Rede, selecione seu novo perfil no menu suspenso Limitação.

   

O DevTools mostra um ícone de aviso ao lado do painel Rede 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 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 tão lento vai ajudar você a notar a diferença.
4. No painel Rede, selecione o perfil e envie outra mensagem.
5. Ative o filtro WS, clique no nome da conexão, abra a guia Mensagens e verifique a diferença de tempo entre as mensagens enviadas e as repetidas com e sem limitação. Exemplo:

Emular conexões de rede lentas na gaveta "Condições de rede"

Se você quiser limitar a conexão de rede enquanto trabalha em outros painéis do DevTools, use a gaveta 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 manualmente os cookies do navegador

Para limpar manualmente os cookies do navegador a qualquer momento, clique com o botão direito do mouse 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 substituir manualmente o user agent:

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

Solicitações de pesquisa

Para pesquisar cabeçalhos de solicitação, payloads e respostas:

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

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

2. Na guia Pesquisar, digite sua consulta e pressione Enter. Se quiser, clique em match_case ou regular_expression para ativar a diferenciação de maiúsculas e minúsculas ou as expressões regulares, respectivamente.

3. Clique em um dos resultados da pesquisa. O painel Network 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 block 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 propriedades

Use a caixa Filtro para filtrar solicitações por propriedades, como o domínio ou o tamanho da solicitação. Também é possível inserir uma string de texto para corresponder ao URL, domínio, nome do host ou porta da solicitação (por exemplo, localhost ou example.com), incluindo solicitações do mesmo site.

Se você não encontrar a caixa, é 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.

É possível usar várias propriedades 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 às operações AND. Não há suporte para operações OR.

Veja a seguir uma lista completa das propriedades aceitas.

• cookie-domain. Mostre os recursos que definem um domínio de cookie específico.
• cookie-name. Mostra 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. 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 menu suspenso de preenchimento automático com todos os domínios que encontrou.
• has-overrides: mostra as 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 encontrou.
• is. Use is:running para encontrar recursos de WebSocket.
• larger-than. Mostra recursos maiores 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 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. Mostre todos os recursos de conteúdo misto (mixed-content:all) ou apenas os que são exibidos (mixed-content:displayed).
• priority. Mostra os recursos com o nível de prioridade correspondente 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 recursos encontrados.
• response-header-set-cookie. Mostra cabeçalhos Set-Cookie brutos na guia "Problemas". Os cookies malformados com cabeçalhos Set-Cookie incorretos serão sinalizados no painel Network.
• scheme. Mostra os recursos recuperados por HTTP não protegido (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 encontrou.
• set-cookie-name. Mostra os recursos que têm um cabeçalho Set-Cookie com um nome que corresponde ao valor especificado. O DevTools preenche o preenchimento automático com todos os nomes de cookies que encontrou.
• set-cookie-value: mostra os recursos que têm um cabeçalho Set-Cookie com um valor que corresponde ao valor 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 encontrados.
• 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 Todos, Fetch/XHR, JS, CSS, Img, Mídia, Fonte, Doc, WS (WebSocket), Wasm (WebAssembly), Manifesto ou Outro (qualquer outro tipo não listado aqui) no painel Rede.

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

Para mostrar recursos de vários tipos simultaneamente, mantenha pressionada a tecla Command (Mac) ou Control (Windows, Linux) e clique em vários filtros de tipo.

Filtrar solicitações por tempo

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

Ocultar URLs de dados

URLs de dados são arquivos pequenos incorporados a outros documentos. Qualquer solicitação que você vê na tabela Solicitações que começa 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, filtre as solicitações irrelevantes enviadas por extensões que você instalou no Chrome. As solicitações de extensão têm URLs que começam com chrome-extension://.

Para ocultar 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.

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

Para descobrir o motivo do bloqueio de um cookie de resposta, selecione a solicitação, abra a guia Cookies e passe o cursor sobre o ícone de informações info.

Além disso, o painel Network mostra um ícone de aviso ao lado de uma solicitação com cookies bloqueados devido a Chrome flags ou à configuração. Passe o cursor sobre o ícone para ver uma dica e clique nele para acessar o painel Problemas e saber mais.

Mostrar apenas solicitações bloqueadas

Para filtrar tudo, exceto as 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 no 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.

A barra de status na parte de baixo mostra o número de solicitações exibidas do total.

Classificar solicitações

Por padrão, as solicitações na tabela Solicitações são classificadas por hora de início, mas é possível usar 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 da atividade

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

• Horário de início. A primeira solicitação iniciada fica na parte de cima.
• Tempo de resposta. A primeira solicitação que começou a ser baixada está na parte de cima.
• Horário de término. A primeira solicitação concluída está na parte de cima.
• Duração total. A solicitação com a configuração de conexão e solicitação / resposta mais curtas fica na parte de cima.
• Latência. A solicitação que esperou menos tempo por uma resposta está na parte de cima.

Essas descrições pressupõem que cada opção respectiva esteja classificada da mais curta para a mais longa. Clicar no cabeçalho da coluna Diagrama de cascata inverte a ordem.

Neste exemplo, a cascata é classificada por duração total. A parte mais clara de cada barra é o tempo gasto esperando. A parte mais escura é o tempo gasto para baixar bytes.

Analisar solicitações

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

Ver um registro de solicitações

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

A tabela Solicitações exibe as seguintes colunas por padrão:

• Nome. O nome de arquivo ou um 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 que falharam 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 seguintes objetos ou processos podem iniciar solicitações:

  • Analisador. Analisador HTML do Chrome.
  • Redirecionamento. Um redirecionamento HTTP.
  • Script. Uma função JavaScript. Nesse caso, o painel Rede fornece um link para a linha correspondente no arquivo de origem.
  • Dicas iniciais. Uma resposta HTTP 103 Early Hints.
  • Outros. 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 de resposta e do corpo da resposta, conforme entregue pelo servidor.

• Horário. A duração total, do início da solicitação ao recebimento do byte final na 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 Solicitações e selecione uma opção para ocultar ou mostrar. As opções exibidas têm marcas de seleção ao lado.

É possível adicionar ou remover as seguintes colunas:

• Nº da solicitação: a ordem absoluta de início da solicitação, fixada na primeira posição da tabela Solicitações por padrão.
• Caminho. A parte do caminho do URL.
• URL. O URL completo da solicitação.
• Método. O método HTTP da solicitação (por exemplo, GET, POST, PUT, DELETE).
• Protocolo. O protocolo da solicitação (por exemplo, h2 para HTTP/2, h3 para HTTP/3 etc.).
• Esquema. A parte do esquema do URL.
• Domínio. A parte do domínio do URL.
• Endereço remoto. O endereço IP remoto e a porta da solicitação.
• Espaço de endereço remoto. O espaço de endereço remoto da solicitação. Public para IPs públicos, Private para IPs privados.
• Espaço de endereço do iniciador. O espaço de endereço do iniciador da solicitação. Igual ao controle remoto.
• Cookies. O número de cookies na solicitação.
• Definir cookies. O número de cookies na resposta.
• Prioridade. A prioridade da solicitação.
• ID da conexão. O ID da conexão da solicitação em uma sessão do cliente, se houver.
• Tem substituições. Se a solicitação tem substituições (sim, não, conteúdo ou cabeçalhos).
• É relacionado a anúncios. Verdadeiro ou falso.
• Pré-carregado. Se a solicitação foi iniciada usando o pré-carregamento especulativo.
• Bloqueio de renderização. Se a solicitação é de bloqueio da renderização, potencialmente bloqueadora ou não.
• Cascata. Uma análise visual da atividade de cada solicitação.

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, 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ê poderá agrupar as solicitações para facilitar a leitura do registro.

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

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

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

Use o Waterfall para conferir o tempo das solicitações em relação umas às outras. Por padrão, o Waterfall é organizado pelo horário de início das solicitações. Portanto, as solicitações mais à esquerda começaram antes das 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. Abra a guia Mensagens. A tabela mostra as últimas 100 mensagens.

Para atualizar a tabela, clique novamente no nome da conexão WebSocket na coluna Nome da tabela Solicitações.

A tabela contém três colunas:

• Data. O payload da mensagem. Se a mensagem for em texto simples, ela vai aparecer aqui. Para opcodes binários, essa coluna mostra o nome e o código do opcode. Os seguintes opcodes são compatíveis: frame de continuação, frame binário, frame de fechamento de conexão, frame de ping e frame de pong.
• Duração. 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 são verde-claras.
• As mensagens de texto recebidas são brancas.
• Os opcodes do WebSocket são amarelo-claros.
• Os erros são vermelho-claro.

Analisar eventos em um stream

Para ver os eventos transmitidos por servidores usando a API Fetch, a API EventSource e XHR:

1. Grave solicitações de rede em uma página que transmite eventos.
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 de cima da guia EventStream.

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

Conferir uma prévia do corpo de uma resposta

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

1. Selecione uma solicitação na coluna Nome da tabela Solicitações.
2. Abra a guia Visualização.

Essa guia é útil principalmente para visualizar imagens.

Ver um corpo de resposta

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

1. Selecione uma solicitação na coluna Nome da tabela Solicitações.
2. Abra a guia Resposta.

Para respostas binárias ou compactadas, selecione um método de decodificação (Base64, Hex ou UTF-8) no menu suspenso na parte de baixo da guia Resposta.

Ver cabeçalhos HTTP

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

1. Selecione uma solicitação na coluna Nome da tabela Solicitações.
2. Abra a guia Headers e role para baixo até as seções General, cabeçalhos de resposta, cabeçalhos da solicitação e, opcionalmente, Early Hints Headers.

Na seção Geral, o DevTools mostra 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 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 ver os nomes dos cabeçalhos HTTP na ordem em que foram recebidos:

1. Abra a guia Cabeçalhos da solicitação em que você tem interesse. Consulte Ver cabeçalhos HTTP.
2. Clique em Ver origem ao lado da seção Cabeçalho da solicitação ou Cabeçalho de 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 veiculada de um cache local, que não armazena os cabeçalhos da solicitação originais. Nesse caso, desative o armazenamento em cache para ver os cabeçalhos da solicitação completos.

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

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

Ver origem do payload

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

Para ver as fontes de parâmetros de string de consulta e dados de formulário, na guia Payload, clique em Ver origem ao lado das seções Parâmetros de string de consulta ou Dados de formulário.

Ver parâmetros de consulta e formulário codificados por URL

Por padrão, o DevTools mostra os parâmetros de string de consulta e os dados de formulário em um formato decodificado por URL. Para ativar ou desativar a codificação de URL para argumentos na guia Payload, clique em Mostrar codificados por URL ou Mostrar decodificados.

Ver payloads binários e compactados

Para payloads de solicitação binários ou compactados, selecione um método de decodificação (Base64, Hex ou UTF-8) no menu suspenso na parte de baixo da guia Payload.

Ver cookies

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

1. Selecione uma solicitação na coluna Nome da tabela Solicitações.
2. Abra a guia Cookies.

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

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

Ver sessões vinculadas ao dispositivo

A guia Sessões vinculadas ao dispositivo mostra as informações de adiamento (atualização) associadas à solicitação selecionada para todas as sessões vinculadas ao dispositivo ativas em um site.

Para ver as informações de adiamento (atualização):

1. Selecione uma solicitação na coluna Nome da tabela Solicitações.
2. Abra a guia Sessões vinculadas ao dispositivo.

A guia Sessões vinculadas ao dispositivo é mostrada apenas para solicitações relevantes com cookies. A guia lista todas as sessões ativas vinculadas ao dispositivo e se elas adiaram a solicitação (e, se não, o motivo). As opções de adiamento possíveis são:

• Deferred (Refresh)
• Not deferred (Proactive refresh attempted)
• Not deferred (Request is in scope of session but proactive refresh is not possible)
• Not deferred (Request is in scope of session but initiator is not allowed to trigger refresh)
• Not deferred (Request is in scope of session but cookies are still present)
• Not deferred (Request is not in scope of session)

Ver o detalhamento do tempo de uma solicitação

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

1. Selecione uma solicitação na coluna Nome da tabela Solicitações.
2. Abra a guia Tempo.

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

Consulte Explicação das fases de detalhamento de tempo para mais informações sobre cada uma das fases que podem aparecer na guia Tempo.

Visualizar um detalhamento de tempo

Para ver uma prévia da análise de tempo de uma solicitação, passe o cursor sobre a entrada dela na coluna Waterfall da tabela de solicitações.

Consulte Ver o detalhamento de tempo de uma solicitação para 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 Tempo:

• Vídeos na fila. O navegador coloca as solicitações em fila antes do início da conexão e quando:
  • Há solicitações de prioridade mais alta. A prioridade da solicitação é determinada por fatores como o tipo de recurso e a localização dele no documento. Para mais informações, leia a seção de prioridade de recursos do guia do fetchpriority.
  • Já existem seis conexões TCP abertas para essa origem, que é o limite. (Aplicável apenas a HTTP/1.0 e HTTP/1.1.)
  • O navegador está alocando espaço brevemente no cache em disco.
• Paralisado. 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 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 ao ServiceWorker. A solicitação está sendo enviada ao service worker.
• Aguardando (TTFB). O navegador está aguardando o primeiro byte de uma resposta. TTFB significa Time To First Byte. Esse tempo inclui uma ida e volta de latência e o tempo que o servidor levou para preparar a resposta.
• Download do conteúdo. O navegador está recebendo a resposta, diretamente da rede ou de um service worker. Esse valor é o tempo total gasto na leitura do corpo da resposta. Valores maiores do que o esperado podem indicar uma rede lenta ou que o navegador está ocupado com outras tarefas, o que atrasa a leitura da resposta.

Ver iniciadores e dependências

Para ver os iniciadores e as dependências de uma solicitação, mantenha Shift pressionado 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 Solicitações é ordenada cronologicamente, a primeira solicitação verde acima da solicitação em que você está passando o cursor é o iniciador da dependência. Se houver outra solicitação verde acima dessa, ela será o iniciador do iniciador. E assim por diante.

Ver eventos de carregamento

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

Ver 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 Rede.

Ver o tamanho total dos recursos transferidos e carregados

O DevTools lista o tamanho total dos recursos transferidos e carregados (descompactados) na barra de status na parte de baixo do painel Rede.

Consulte Ver o tamanho descompactado de um recurso para saber o tamanho dos recursos depois que o navegador os descompacta.

Ver 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 Iniciador para ver o stack trace que leva à solicitação.

Ver o tamanho descompactado de um recurso

Selecione Configurações > Linhas de solicitação grande e confira o valor na parte de baixo da coluna Tamanho.

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

Exportar dados de solicitações

É possível exportar ou copiar a lista de solicitações, com os filtros aplicados, de várias maneiras descritas 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, é possível exportar o registro de rede "limpo" no formato HAR, que exclui informações sensíveis, como os cabeçalhos Cookie, Set-Cookie e Authorization. Se necessário, também é possível exportar o registro com dados sensíveis.

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

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

  

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

  Para exportar com dados sensíveis, primeiro ative Configurações Configurações > Preferências > Rede > check_box Permitir gerar HAR com dados sensíveis. Em seguida, clique no botão download Exportar e selecione Exportar HAR (com dados sensíveis) no menu suspenso.

  

Depois de ter um arquivo HAR, é possível 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 fazer upload Importar 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 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, resposta ou rastreamento de pilha:

• 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 fetch (Node.js). Copie a solicitação como uma chamada de busca do Node.js.
• Copiar como elemento de pré-carregamento. Copie a solicitação como uma tag HTML <link rel="preload">.
• Copiar resposta. Copie o corpo da resposta para a área de transferência.
• Copiar stack trace. Copie o rastreamento de pilha da solicitação para a área de transferência.

Para copiar todas as solicitações:

• Copiar todos os URLs. Copie os URLs de todas as solicitações para a área de transferência.
• Copiar tudo como cURL. Copie 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. Copie todas as solicitações como uma cadeia de chamadas de busca.
• Copiar tudo como busca (Node.js). Copie todas as solicitações como uma cadeia de chamadas de busca do Node.js.
• Copiar tudo como HAR (limpo). Copie todas as solicitações como dados HAR sem dados sensíveis, como os cabeçalhos Cookie, Set-Cookie e Authorization.
• Copiar tudo como HAR (com dados sensíveis). Copie 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: copia os URLs de todas as solicitações filtradas para a área de transferência.
• Copie todos os comandos listados como cURL. Copie todas as solicitações filtradas como uma cadeia de comandos cURL.
• Copie todos os comandos listados como PowerShell. Copie todas as solicitações filtradas como uma cadeia de comandos do PowerShell.
• Copiar todos os comandos listados como fetch. Copie todas as solicitações filtradas como uma cadeia de chamadas de busca.
• Copie todos os comandos listados como fetch (Node.js). Copie todas as solicitações filtradas como uma cadeia de chamadas de busca do Node.js.
• Copiar todas as solicitações listadas como HAR (limpas). Copie 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). Copie todas as solicitações filtradas como dados HAR com dados sensíveis.

Mudar o layout do painel Network

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

Ocultar a barra de ações "Filtros"

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

Usar linhas com solicitação grande

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

Abra Configurações e clique em Linhas de solicitação grandes para ver 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 ocultá-la.