Partilhar via


Referência de recursos de rede

Este artigo é um inventário controlado por recursos da ferramenta Rede . Use a ferramenta Rede para inspecionar a atividade de rede de uma página da Web. Para obter um passo a passo e introdução à ferramenta Rede , consulte Inspecionar a atividade de rede.

Conteúdo detalhado:

Registrar solicitações de rede

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

O painel Rede

Parar a gravação de solicitações de rede

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

  1. Na ferramenta Rede , clique em Parar de gravar log de rede (parar de gravar log de rede). Ele fica cinza para indicar que DevTools não está mais gravando solicitações.

  2. Pressione Ctrl+E (Windows, Linux) ou Command+E (macOS) enquanto a ferramenta Rede está em foco.

Limpar solicitações

Para limpar todas as solicitações da tabela Solicitações, na ferramenta Rede , clique no botão Limpar log de rede (Limpar):

O botão 'Limpar log de rede'

Ou pressione Ctrl+L (Windows, Linux, macOS) ou Command+K (macOS) enquanto a ferramenta Rede tem foco.

Salvar solicitações entre cargas de página

Para salvar solicitações em cargas de página, na ferramenta Rede , selecione a caixa de seleção Preservar log :

A caixa de seleção Preservar Log

O DevTools salva todas as solicitações até desabilitar o log DevTools.

Capturar capturas de tela durante o carregamento da página

Você pode capturar capturas de tela para analisar o que é exibido para os usuários enquanto aguarda a carga de sua página.

Para habilitar capturas de tela:

  1. Em DevTools, abra a ferramenta Rede .

  2. No canto superior direito da ferramenta Rede , clique no ícone Configurações de rede (engrenagem). Uma linha de caixas de seleção é exibida.

  3. Selecione a caixa de seleção Capturar capturas de tela :

    Habilitando 'Capturar capturas de tela'

Para capturar uma captura de tela:

  1. Enquanto a ferramenta Rede tem foco, pressione Ctrl+F5 para atualizar a página. Capturas de tela são capturadas durante a carga da página e as miniaturas são mostradas abaixo da linha de caixas de seleção.

    Você pode interagir com as capturas de tela da seguinte maneira.

  2. Passe o mouse sobre uma captura de tela para exibir o ponto em que essa captura de tela foi capturada. Uma linha vertical amarela é exibida no painel De visão geral do gráfico.

    Pairando em uma captura de tela

  3. Clique na miniatura de uma captura de tela para filtrar todas as solicitações que ocorreram depois que a captura de tela foi capturada.

  4. Clique duas vezes em uma miniatura de captura de tela para ampliar e exibir a captura de tela.

  5. Pressione Esc para fechar o visualizador de captura de tela.

Alterar o comportamento de carregamento

Emular um visitante pela primeira vez desabilitando o cache do navegador

Para emular como um usuário pela primeira vez experimenta seu site, ative a caixa de seleção Desabilitar cache . DevTools desabilita o cache do navegador. Esse recurso emula com mais precisão a experiência de um usuário pela primeira vez, pois as solicitações são atendidas do cache do navegador em visitas repetidas.

A caixa de seleção Desabilitar cache :

A caixa de seleção Desabilitar Cache

Desabilitar o cache do navegador da ferramenta condições de rede

Na ferramenta Rede , você pode abrir a ferramenta condições de rede no painel Modo de Exibição Rápida e desabilitar o cache do navegador a partir daí:

  1. Na ferramenta Rede , clique no botão Mais condições de rede (ícone Mais condições de rede . A ferramenta condições de rede é aberta no painel Modo de Exibição Rápida .

  2. Na ferramenta condições de rede, selecione a caixa de seleção Desabilitar cache :

    A ferramenta Condições de Rede no painel Exibição Rápida, com a caixa de seleção 'Desabilitar cache' selecionada

Veja também:

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:

O comando 'Limpar cache do navegador' clique com o botão direito do mouse

Emular offline

Uma classe de aplicativos Web, chamada PWA (Aplicativos Web Progressivo), pode funcionar offline com a ajuda de trabalhadores do serviço. Você pode achar útil simular rapidamente um dispositivo que não tem nenhuma conexão de dados ao criar esse tipo de aplicativo.

Para simular uma experiência de rede offline, selecione o menu > suspenso Sem limitaçãoPredefinições>Offline.

O menu suspenso offline :

O menu suspenso Offline

Emular conexões de rede lentas

Emular o 3G lento, o Fast 3G e outras velocidades de conexão do menu suspenso Sem limitação .

O menu suspenso limitação :

O menu suspenso limitação

Você pode escolher entre diferentes predefinições, como Slow 3G ou Fast 3G. Para adicionar suas próprias predefinições personalizadas, abra o menu Limitação e selecione Adicionar Personalizado>.

O DevTools exibe um ícone de aviso ao lado da ferramenta Rede para lembrá-lo de que a limitação está habilitada.

Consulte também Simular uma conexão de rede mais lenta na atividade Inspecionar rede.

Emular conexões de rede lentas da ferramenta Condições de Rede

Na ferramenta Rede , você pode abrir a ferramenta condições de rede no painel Modo de Exibição Rápida e, em seguida, limitar a conexão de rede a partir daí:

  1. Na ferramenta Rede , clique no botão Mais condições de rede (o botão . A ferramenta condições de rede é aberta no painel Modo de Exibição Rápida .

  2. Na ferramenta condições de rede, no menu Limitação de rede , selecione uma velocidade de conexão.

Veja também:

Limpar cookies de 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 Limpar cookies do navegador.

O comando 'Limpar cookies de navegador' clica com o botão direito do mouse na tabela Solicitações da ferramenta Rede

Substituir o agente de usuário

Para substituir manualmente o agente de usuário:

  1. Na ferramenta Rede, clique no botão Mais condições de rede (ícone Mais condições de rede. A ferramenta condições de rede é aberta no painel Modo de Exibição Rápida .

  2. Na ferramenta condições de rede, desmarque a caixa de seleção Usar navegador padrão . Os outros controles ficam disponíveis.

  3. Selecione uma opção de agente de usuário no menu ou insira um agente de usuário personalizado na caixa de texto.

Definir dicas de cliente do agente de usuário

Se o site emprega dicas de cliente do agente de usuário e você deseja testá-las, você pode defini-las na ferramenta condições de rede ou em Emular dispositivos móveis (Emulação de Dispositivo).

Para definir dicas de cliente do agente de usuário na ferramenta condições de rede:

  1. Na ferramenta Rede, clique no botão Mais condições de rede (o ícone 'Mais condições de rede'. A ferramenta condições de rede é aberta no painel Modo de Exibição Rápida .

  2. Na seção Agente de usuário , desmarque a caixa de seleção Usar navegador padrão e expanda dicas do cliente do agente de usuário:

    Configurando dicas de cliente do agente de usuário

  3. Na lista suspensa Agente de usuário , selecione um navegador e um dispositivo predefinidos. Ou aceite o valor padrão de Custom...e insira informações na caixa de texto Inserir um agente de usuário personalizado .

  4. Para escolha (predefinida ou personalizada), especifique as dicas do cliente do agente de usuário da seguinte maneira:

    • Marca e versão como Edge e 92. Para adicionar vários pares de marca/versão, clique em + Adicionar Marca.
    • Versão completa do navegador , como 92.0.1111.0.
    • Plataforma e versão , como Windows e 10.0.
    • Arquitetura como x86.
    • Modelo de dispositivo como Galaxy Nexus.

    Você pode definir ou alterar qualquer uma das dicas do cliente do agente de usuário; não há valores necessários.

  5. Selecione Atualizar.

  6. Para verificar as alterações, clique em Console e digite navigator.userAgentData. Expanda os resultados conforme necessário para exibir alterações nos dados do agente de usuário.

Veja também:

Filtrar solicitações

Você pode filtrar solicitações por propriedades, por tipo ou por tempo e ocultar URLs de dados.

Filtrar solicitações por propriedades

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

Se a caixa de texto não for exibida, o painel Filtros provavelmente estará oculto. Para obter mais informações, consulte Ocultar o painel Filtros.

A caixa de texto Filtrar :

A caixa de texto Filtrar

Você pode usar várias propriedades simultaneamente separando cada propriedade com um espaço. Por exemplo, mime-type:image/png larger-than:1K exibe todos os PNGs maiores que 1 quilobyte. Os filtros de várias propriedades são equivalentes às AND operações. OR no momento, não há suporte para operações.

A lista completa de propriedades com suporte:

Propriedade Detalhes
domain Exiba 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 preenche o menu suspenso de autocompletar com todos os domínios encontrados.
has-response-header Exibe os recursos que contêm o cabeçalho de resposta HTTP especificado. O DevTools preenche o menu suspenso de preenchimento automático com todos os cabeçalhos de resposta encontrados.
is Use is:running para localizar WebSocket recursos.
larger-than Exibe recursos maiores que o tamanho especificado, em bytes. Definir um valor de 1000 é equivalente a definir um valor de 1k.
method Exibe recursos que foram recuperados em um tipo de método HTTP especificado. DevTools preenche o menu suspenso com todos os métodos HTTP encontrados.
mime-type Exibe recursos de um tipo MIME especificado. DevTools preenche o menu suspenso com todos os tipos MIME encontrados.
mixed-content Mostrar todos os recursos de conteúdo misto (mixed-content:all) ou apenas os que estão atualmente exibidos (mixed-content:displayed).
scheme Exibe recursos recuperados por HTTP desprotegido (scheme:http) ou HTTPS protegido (scheme:https).
set-cookie-domain Exibe recursos que têm um Set-Cookie cabeçalho com um Domain atributo que corresponde ao valor especificado. Os DevTools preenchem o autocomplete com todos os domínios de cookie encontrados.
set-cookie-name Exibe recursos que têm um Set-Cookie cabeçalho com um nome que corresponde ao valor especificado. Os DevTools preenchem o autocomplete com todos os nomes de cookie encontrados.
set-cookie-value Exibe recursos que têm um Set-Cookie cabeçalho com um valor que corresponde ao valor especificado. Os DevTools preenchem o autocomplete com todos os valores de cookie encontrados.
status-code Exibe recursos que correspondem ao código http status específico. O DevTools preenche o menu suspenso de autocompletar com todos os códigos de status encontrados.

Filtrar solicitações por tipo

Para filtrar solicitações por tipo de solicitação, clique nos botões no painel Rede :

  • XHR
  • JS
  • CSS
  • Img
  • Mídia
  • Font
  • Doc
  • WS – WebSocket.
  • Manifesto
  • Outro – Qualquer outro tipo não listado aqui.

Se os botões não aparecerem, o painel Filtros poderá estar oculto. Consulte Ocultar o painel Filtros.

Para habilitar vários filtros de tipo simultaneamente, pressione e segure Ctrl (Windows, Linux) ou Comando (macOS) e clique nos filtros.

Use os filtros Type para exibir recursos JS, CSS e Document:

Usando os filtros Type para exibir recursos JS, CSS e Document

Filtrar solicitações por tempo

Clique e arraste para a esquerda ou para a direita no painel Visão geral para exibir apenas as solicitações que estavam ativas durante esse período. O filtro é inclusivo. Qualquer solicitação que estava ativa durante o tempo realçado é mostrada.

Filtrando todas as solicitações inativas por volta de 300 ms:

Filtrando todas as solicitações que estavam inativas por volta de 300 ms

Ocultar URLs de dados

AS URLs de dados são pequenos arquivos inseridos em outros documentos. Qualquer solicitação exibida na tabela Solicitações que começa com data: é uma URL de dados.

Para ocultar as solicitações, desative a caixa de seleção Ocultar URLs de dados :

A caixa de seleção Ocultar URLs de Dados

Classificar solicitações

Por padrão, as solicitações na tabela Solicitações são classificadas por hora de iniciação, mas você pode classificar a tabela usando outros critérios.

Classificar por coluna

Clique no cabeçalho de qualquer coluna nas Solicitações para classificar solicitações por essa coluna.

Classificar por fase de atividade

Para alterar a forma como a Cascata classifica solicitações:

  • Clique com o botão direito do mouse no cabeçalho da tabela Solicitações, clique em Cascata e selecione uma das seguintes opções:

    • Hora de Início – A primeira solicitação iniciada é colocada na parte superior.

    • Tempo de resposta – A primeira solicitação que começou a baixar é colocada na parte superior.

    • Hora de Término – A primeira solicitação concluída é colocada na parte superior.

    • Duração Total – A solicitação com as configurações de conexão mais curtas e solicitação ou resposta é colocada na parte superior.

    • Latência – A solicitação que esperou o menor tempo para uma resposta é colocada na parte superior.

Essas descrições pressupõem que cada opção respectiva seja classificada da mais curta para a mais longa. Clique no cabeçalho da coluna Cascata para reverter a ordem.

O seguinte mostra a classificação da Cascata por duração total. A parte mais leve de cada barra é o tempo gasto esperando e a parte mais escura é o tempo gasto baixando bytes:

Classificando a Cascata por duração total

Analisar solicitações

Enquanto DevTools estiver aberto, ele registra todas as solicitações na ferramenta Rede . Use a ferramenta Rede para analisar solicitações.

Exibir um log de solicitações

Use a tabela Solicitações para exibir um log de todas as solicitações feitas enquanto DevTools estiver aberto. Para revelar mais informações sobre cada item, clique ou passe o mouse nas solicitações.

A tabela Solicitações

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

  • Nome. O nome do arquivo do recurso ou um identificador para o recurso.
  • Status. O código de status HTTP.
  • Digite. O tipo MIME do recurso solicitado.
  • Iniciador. Os seguintes objetos ou processos podem iniciar solicitações:
    • Analisador. O analisador HTML.
    • Redirecionamento. Um redirecionamento HTTP.
    • Script. Uma função JavaScript.
    • Outros. Algum outro processo ou ação, como navegar até uma página por meio de um link ou inserir uma URL na barra de endereços.
  • Tamanho. O tamanho combinado dos cabeçalhos de resposta mais o corpo da resposta, conforme fornecido pelo servidor.
  • Hora. A duração total, desde o início da solicitação até o recebimento do byte final na resposta.
  • Atendido por. Se a solicitação foi atendida pelo cache HTTP ou pelo trabalho de serviço do aplicativo.
  • Cachoeira. Uma divisão 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 um nome de coluna para ocultar ou mostrar. As colunas exibidas no momento têm marcas de seleção ao lado delas.

Adicionando uma coluna à tabela Solicitações

Adicionar colunas para cabeçalhos de resposta

Para adicionar uma coluna personalizada à tabela Solicitações, clique com o botão direito do mouse no cabeçalho da tabela Solicitações e selecione Cabeçalhos> de RespostaGerenciar Colunas de Cabeçalho. A janela pop-up Gerenciar Colunas de Cabeçalho é aberta. Clique no botão Adicionar cabeçalho personalizado , insira o nome do cabeçalho personalizado e clique em Adicionar.

Adicionando uma coluna personalizada à tabela Solicitações

Exibir a relação de tempo das solicitações

Use a Cascata para exibir as relações de tempo das solicitações. A organização padrão da Cascata usa a hora de início das solicitações. Portanto, solicitações que estão mais à esquerda iniciadas anteriormente do que as solicitações que estão mais à direita.

Para ver as diferentes maneiras pelas quais você pode classificar a Cascata, vá para Classificar por fase de atividade.

A coluna Cascata do painel Solicitações :

A coluna Cascata do painel Solicitações

Exibir uma visualização de um corpo de resposta

Para visualizar o conteúdo de um corpo de resposta HTTP:

  1. Na tabela Solicitação, clique no nome da solicitação.

  2. Na barra lateral, selecione a guia Visualização :

    O painel Visualização

Exibir um corpo de resposta

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

  1. Na tabela Solicitação, clique no nome da solicitação.

  2. Na barra lateral, selecione a guia Resposta :

    O painel Resposta

Exibir cabeçalhos HTTP

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

  1. Na tabela Solicitação, clique no nome da solicitação.

  2. Na barra lateral, selecione a guia Cabeçalhos :

    O painel Cabeçalhos

Exibir parâmetros de cadeia de caracteres de consulta

Para exibir os parâmetros de cadeia de caracteres de consulta de uma solicitação HTTP em um formato legível pelo homem:

  1. Na tabela Solicitação, clique no nome da solicitação.
  2. Na barra lateral, selecione a guia Carga :

A seção Parâmetros de Cadeia de Caracteres de Consulta

Para exibir a origem dos parâmetros de cadeia de caracteres de consulta, clique em Exibir fonte.

Exibir parâmetros de cadeia de caracteres de consulta codificadas por URL

Para exibir parâmetros de cadeia de caracteres de consulta em um formato legível pelo homem, mas com codificações preservadas:

  1. Na tabela Solicitação, clique no nome da solicitação.
  2. Na barra lateral, selecione a guia Carga .
  3. Clique em exibir a URL codificada.

Exibir cookies

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

  1. Na tabela Solicitação, clique no nome da solicitação.

  2. Na barra lateral, selecione a guia Cookies :

    O painel Cookies

Exibir a divisão de tempo de uma solicitação

Para exibir a divisão de tempo de uma solicitação:

  1. Na tabela Solicitação, clique no nome da solicitação.

  2. Na barra lateral, selecione a guia Tempo .

    O painel Timing

Para obter uma maneira mais rápida de acessar os dados, consulte Visualizar uma quebra de tempo.

Para obter mais informações sobre cada uma das fases que podem ser exibidas no painel Timing , confira Fases de detalhamento de tempo explicadas.

Visualizar uma quebra de tempo

Para exibir uma visualização da divisão de tempo de uma solicitação, na coluna Cascata da tabela Solicitações, passe o mouse na entrada da solicitação.

Visualizando a divisão de tempo de uma solicitação:

Visualizando a divisão de tempo de uma solicitação

Para exibir os dados sem passar o mouse, consulte a parte superior da seção atual, exiba a divisão de tempo de uma solicitação.

Fases de divisão de tempo explicadas

Cada uma dessas fases pode aparecer na guia Tempo :

  • Fila. As filas do navegador solicitam quando qualquer um dos seguintes são verdadeiros

    • Há solicitações de prioridade mais altas.
    • Já há seis conexões TCP abertas para essa origem, que é o limite. Aplica-se somente a HTTP/1.0 e HTTP/1.1.
    • O navegador está alocando espaço brevemente no cache de disco.
  • Parado. A solicitação pode ser paralisada por qualquer um dos motivos descritos em Filas.

  • Pesquisa DNS. O navegador está resolvendo o endereço IP da solicitação.

  • Conexão inicial. O navegador está estabelecendo uma conexão, incluindo apertos de mão TCP e tentativas e negociando uma SSL (Camada de Soquete Seguro).

  • 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 ServiceWorker. O navegador está iniciando o trabalho de serviço.

  • Solicite ao ServiceWorker. A solicitação está sendo enviada ao trabalhador do serviço.

  • Aguardando (TTFB). O navegador está aguardando o primeiro byte de uma resposta. TTFB significa Time To First Byte. Esse tempo inclui uma viagem de ida e volta de latência e o tempo que o servidor levou para preparar a resposta.

  • Download de Conteúdo. O navegador está recebendo a resposta.

  • Recebendo Push. O navegador está recebendo dados para essa resposta por meio do PUSH do servidor HTTP/2.

  • Lendo Push. O navegador está lendo os dados locais que foram recebidos anteriormente.

Exibir iniciadores e dependências

Para exibir os iniciadores e as dependências de uma solicitação, segure Shift e passe o mouse na solicitação na tabela Solicitações .

  • As solicitações que iniciaram a solicitação pairada são mostradas em verde.
  • As dependências das solicitações pairadas são mostradas em vermelho.

Exibindo os iniciadores e as dependências de uma solicitação

Quando a tabela Solicitações é ordenada cronologicamente, se você passar o mouse em uma linha, a linha anterior a ela exibirá uma solicitação verde. A solicitação verde é o iniciador da dependência. Se outra solicitação verde for exibida na linha antes disso, essa solicitação mais alta será o iniciador do iniciador. E assim por diante.

Exibir eventos de carga

O DevTools exibe o tempo dos DOMContentLoaded eventos e load em vários lugares na ferramenta Rede :

  • No painel Visão geral com linhas verticais.
  • Na coluna Cascata da tabela Solicitar com linhas verticais.
  • No painel Resumo , na parte inferior da ferramenta Rede , com rótulos de tempo.

O DOMContentLoaded evento é colorido azul, e o load evento é vermelho.

Os locais dos eventos DOMContentLoaded e load no painel Rede

Exibir o número total de solicitações

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

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

Cuidado

Esse número apenas rastreia solicitações que foram registradas desde que o DevTools foi aberto. Se outras solicitações ocorreram antes da abertura do DevTools, essas solicitações não serão contadas.

Exibir o tamanho total do download

O tamanho total de download das solicitações está listado no painel Resumo , na parte inferior da ferramenta Rede .

O tamanho total de download das solicitações

Cuidado

Esse número apenas rastreia solicitações que foram registradas desde que o DevTools foi aberto. Se outras solicitações ocorreram antes da abertura do DevTools, as solicitações anteriores não serão contadas.

Para verificar o tamanho dos recursos após o navegador descompactar cada item, confira Exibir o tamanho não compactado de um recurso.

Exibir o rastreamento de pilha que causou uma solicitação

Depois que uma instrução JavaScript solicitar um recurso, passe o mouse na coluna Iniciador para exibir o rastreamento de pilha que antecede a solicitação.

O rastreamento de pilha que antecede uma solicitação de recurso

Exibir o tamanho não compactado de um recurso

Para ver o tamanho transferido e o tamanho não compactado de um recurso ao mesmo tempo:

  1. No canto superior direito da ferramenta Rede , clique no ícone Configurações de rede (engrenagem). Uma linha de caixas de seleção é exibida.

  2. Ative a caixa de seleção Linhas de solicitação grandes .

  3. Examine a coluna Tamanho na tabela Solicitação. O valor superior é o tamanho transferido e o valor inferior é o tamanho do recurso depois que o navegador o descompacta:

    Um exemplo de recursos não compactados

Exportar dados de solicitações

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

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

  1. Na tabela Solicitações , clique com o botão direito do mouse em uma solicitação e selecione Salvar tudo como HAR com Conteúdo.

    Selecionando 'Salvar tudo como HAR com Conteúdo'

  2. O DevTools salva todas as solicitações que ocorreram desde que você abriu o DevTools para o arquivo HAR. Você não pode filtrar solicitações e não pode salvar uma única solicitação.

Depois de salvar um arquivo HAR, você pode importá-lo de volta para DevTools para análise arrastando e soltando o arquivo HAR na tabela Solicitações .

Copiar uma ou mais solicitações 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, clique em Copiar e selecione uma das seguintes opções:

Nome Detalhes
Copiar Endereço de Link Copie a URL da solicitação para a área de transferência.
Copiar Resposta Copie o corpo da resposta para a área de transferência.
Copiar como Buscar  
Copiar como cURL Copie a solicitação como um comando cURL.
Copiar Tudo como Buscar  
Copiar Tudo como cURL Copie todas as solicitações como uma cadeia de comandos cURL.
Copiar Tudo como HAR Copie todas as solicitações como dados HAR.

Selecionando 'Copiar Resposta'

Copiar JSON de resposta formatada para a área de transferência

Para copiar os dados JSON formatados de uma resposta JSON:

  1. Na tabela Solicitação, clique no nome da solicitação que levou a uma resposta JSON.

  2. Na barra lateral, selecione a guia Visualizar .

  3. Clique com o botão direito do mouse na primeira linha da visualização de resposta JSON formatada e selecione Copiar valor.

    O comando Copiar Valor com o botão direito do mouse

    Agora você pode colar o valor em qualquer editor para revisá-lo.

Copiar valores de propriedade de solicitações de rede para sua área de transferência

Para copiar valores de propriedade de solicitações de rede para sua área de transferência:

  1. Na tabela Solicitação, clique no nome da solicitação.
  2. Na barra lateral, selecione a guia Carga :
  3. Expanda uma das seções a seguir.
    • Carga de solicitação (JSON)
    • Dados de Formulário
    • Parâmetros de cadeia de caracteres de consulta
    • Cabeçalhos de Solicitação
    • Cabeçalhos de resposta
  4. Clique com o botão direito do mouse em um valor e selecione Copiar valor. Agora você pode colar o valor em qualquer editor para revisá-lo.

Alterar o layout do painel Rede

Você pode expandir ou recolher seções da interface do usuário da ferramenta de rede para concentrar informações importantes.

Ocultar o painel Filtros

Por padrão, DevTools mostra o painel Filtros . Para ocultar o painel Filtros , selecione Filtrar (Filtro).

O botão Ocultar Filtros

Linhas de solicitação grandes

Use linhas de solicitação 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 Tamanho é o tamanho não compactado de uma solicitação.

Para habilitar linhas grandes, selecione a caixa de seleção Grandes linhas de solicitação . Um exemplo de linhas de solicitação grandes no painel Solicitações :

Um exemplo de grandes linhas de solicitação no painel Solicitações

Ocultar o painel Visão geral

Por padrão, o DevTools exibe o painel Visão geral . Para ocultar o painel Visão geral , desmarque a caixa de seleção Mostrar Visão Geral .

A caixa de seleção Mostrar Visão Geral

Confira também

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licença Creative Commons Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.