Referência de recursos de rede

A ferramenta Rede tem os seguintes recursos para inspecionar a atividade de rede em busca de uma página da Web.

Para obter um passo a passo e introdução à ferramenta Rede , consulte Inspecionar 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.

Por exemplo:

  1. Acesse uma página da Web, como a página de demonstração Inspecionar atividade de rede , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Rede .

  4. Atualize a página da Web.

    O botão Parar gravação de log de rede está vermelho e está disponível:

A ferramenta Rede

Parar de gravar solicitações de rede

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

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

  2. Pressione Ctrl+E (Windows, Linux) ou Command+E (macOS) enquanto a ferramenta Rede estiver 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

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

Veja também:

Salvar solicitações em carregamentos de página

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

A caixa de seleção Preservar Log

O DevTools salva todas as solicitações até que você desabilite Preservar log.

Veja também:

Captura 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 o carregamento da página.

Para habilitar capturas de tela:

  1. Acesse uma página da Web, como o aplicativo TODO, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, abra a ferramenta Rede .

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

  5. Marque a caixa de seleção Capturar capturas de tela:

    Habilitando 'Captura de tela'

Para fazer uma captura de tela:

  1. Enquanto a ferramenta Rede estiver em foco, pressione Ctrl+F5 para atualizar a página. As capturas de tela são capturadas durante o carregamento 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 ela foi capturada. Uma linha vertical amarela é exibida no painel Gráfico de visão geral .

    Passar o mouse sobre uma captura de tela

  3. Clique na miniatura de uma captura de tela para filtrar as solicitações ocorridas após a captura da tela.

  4. Clique duas vezes na miniatura da captura de tela para ampliar e exibir a captura de tela.

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

Solicitação XHR de repetição

Para reproduzir uma solicitação XHR:

  1. Vá para uma página da Web, como a Demonstração de referência da ferramenta Rede, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Rede .

  4. Atualize a página da Web.

    Na tabela Solicitações da ferramenta Rede, as linhas são exibidas para:

    • devtools-network-reference/ (index.html)
    • style.css
    • script.js

  5. Na página da Web de demonstração, clique no botão Enviar uma solicitação XHR .

    Na tabela Solicitações da ferramenta Rede, uma data.json linha é adicionada. A coluna Iniciador lê script.js:20.

  6. Na tabela Solicitações, clique com o botão direito do mouse na data.json solicitação e selecione Repetir XHR.

    Ou selecione a solicitação e pressione R.

    Na tabela Solicitações da ferramenta Rede, uma segunda data.json linha é adicionada. A coluna Iniciador lê Outro:

    Clique em Repetir XHR

Para obter informações sobre iniciadores, consulte:

Depois de clicar no botão Enviar uma solicitação XHR da demonstração (o que faz com que o JavaScript envie uma solicitação), o item de menu Copiar rastreamento de pilha aparece no menu Copiar com o botão direito do mouse > para solicitações. Consulte Copiar solicitações de rede para a área de transferência, abaixo.

Alterar o comportamento de carregamento

Emular um visitante pela primeira vez desabilitando o cache do navegador

Para emular como um usuário iniciante experimenta seu site, ative a caixa de seleção Desabilitar cache . O DevTools desabilita o cache do navegador. Esse recurso emula com mais precisão a experiência do 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 Visualização Rápida na parte inferior do DevTools e, em seguida, desabilitar o cache do navegador a partir daí:

  1. Na ferramenta Rede , clique no botão Mais condições de rede (Mais condições de rede . A ferramenta Condições de rede é aberta no painel Visualização Rápida na parte inferior do DevTools.

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

    A ferramenta Condições de Rede no painel Visualização Rápida, com a caixa de seleção

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 de clique com o botão direito do mouse

Veja também:

Emular offline

Uma classe de aplicativos Web, chamada PWA (Aplicativos Web Progressivos), pode funcionar offline com a ajuda de trabalhadores de serviço. Pode ser útil simular rapidamente um dispositivo que não tem 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

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

O menu suspenso Limitação

Você pode escolher entre diferentes predefinições, como:

  • 4G rápido
  • 4G lento
  • 3G
  • Offline

Para adicionar suas próprias predefinições personalizadas, clique no menu Limitação e selecioneAdicionarpersonalizado>.

Um ícone de aviso é exibido na guia da ferramenta Rede para lembrá-lo de que a limitação está habilitada:

O ícone de aviso Limitado na guia Rede na Barra de Atividades

Veja também:

Criar um perfil de limitação personalizado

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

Para criar um perfil de limitação personalizado:

  1. Acesse uma página da Web, como a página de demonstração Inspecionar atividade de rede , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. Selecione a ferramenta Rede .

  4. No menu Limitação , na seção Personalizado , selecione Adicionar.

    Ou selecione Personalizar e controlara Limitação deConfigurações>do DevTools>.

    A página Configurações do DevTools é aberta, com a página Estrangulamento selecionada.

  5. Na seção Perfis de limitação de rede , clique no botão Adicionar perfil .

    Os valores de exemplo são mostrados abaixo e são usados na próxima seção.

  6. Na caixa de texto Nome do Perfil , digite 10kbps.

  7. Na caixa de texto Download , insira 10 (para 10 kbit/s).

  8. Na caixa de texto Carregar , insira 10 (para 10 kbit/s).

  9. Na caixa de texto Latência , digite 10 (para 10 ms).

  10. Na caixa de texto Perda de Pacote , insira 1 (para 1%).

  11. Na caixa de texto Comprimento da Fila de Pacotes , insira 10.

  12. Marque a caixa de seleção Reordenação de pacotes :

    Criando um perfil de limitação personalizado nas configurações > do DevTools > Limitação

  13. Clique no botão Adicionar.

    O perfil de limitação personalizado é exibido:

    Criou um perfil de limitação personalizado nas Configurações > do DevTools > Limitação

  14. No painel Configurações , clique no botão Fechar (X).

  15. Selecione a ferramenta Rede .

  16. No menu suspenso Limitação , na seção Personalizado , selecione seu perfil de limitação personalizado, como 10 kbps:

    Selecionando um perfil personalizado no menu suspenso Limitação

    Um ícone de aviso (Ícone de aviso de limitação) é exibido na guia Rede para lembrá-lo de que a limitação está habilitada.

Veja também:

Limitar conexões WebSocket

Além das solicitações HTTP, o DevTools pode limitar as conexões do WebSocket. Usaremos o perfil de limitação personalizada lenta criado na seção anterior para mostrar o efeito de uma conexão WebSocket limitada em sua página da Web.

Para observar a limitação do WebSocket:

  1. Execute as etapas da seção anterior, Criar um perfil de limitação personalizado.

  2. Vá para uma página que usa WebSockets, como o Online WebSocket Tester, em uma nova janela ou guia.

  3. Na página, estabeleça a conexão WebSocket.

    Se você usar a página da Web do Online WebSocket Tester , clique no botão Conectar .

    Se você não criar uma conta PieSocket para obter um token de API, a página da Web exibirá "Conexão estabelecida - {"error":"Unknown api key"}".

    Se você criar uma conta PieSocket para obter um token de API, a página da Web simplesmente exibirá "Conexão estabelecida".

  4. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  5. No DevTools, na ferramenta Rede, no menu suspenso Limitação, selecione10 kbpspersonalizados>.

    Essa opção foi criada na seção anterior, Criar um perfil de limitação personalizado.

  6. Na página da Web Online WebSocket Tester , na caixa de texto da mensagem, exclua DevTools sem limitação e insira DevTools com limitação.

  7. Na página Online WebSocket Tester , clique no botão Enviar .

    O console na página da Web do Testador Online do WebSocket exibe DevTools com limitação.

  8. Na parte superior da ferramenta Rede , selecione o botão Filtro de soquete (mostrado abaixo).

  9. Na tabela, clique no nome da sua conexão, como channel_123?api_key=....

    As guias são exibidas.

  10. Selecione a guia Mensagens (mostrada abaixo).

    As mensagens do WebSocket que foram enviadas entre o cliente e o servidor são exibidas.

    A coluna Hora mostra quando as mensagens foram recebidas ou enviadas. Esses valores de tempo refletem a conexão de rede limitada.

Mensagens enviadas e sem limitação

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 Visualização Rápida na parte inferior do DevTools 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 ícone 'Mais condições de rede'). A ferramenta Condições de rede é aberta no painel Visualização Rápida na parte inferior do DevTools.

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

Veja também:

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 na tabela Solicitações e selecione Limpar cookies do navegador.

O comando

Substituir cabeçalhos de resposta HTTP

Veja também:

Substituir o agente do usuário

Para substituir manualmente o agente do 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 Visualização Rápida na parte inferior do DevTools.

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

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

Definir dicas de cliente do agente do usuário

Se o seu site emprega dicas de cliente do agente do 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 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 Visualização Rápida na parte inferior do DevTools.

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

    Configurando dicas de cliente do agente do usuário

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

  4. Para qualquer opção (predefinida ou personalizada), especifique dicas de cliente do agente do 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 o Galaxy Nexus.

    Você pode definir ou alterar qualquer uma das dicas de cliente do agente do usuário; Não há valores obrigató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 as alterações nos dados do agente do usuário.

Veja também:

Solicitações de pesquisa

Para pesquisar cabeçalhos, conteúdos e respostas de solicitação:

  1. Na ferramenta Rede , clique no botão Pesquisar (ícone de pesquisa). Ou pressione Ctrl+F (Windows, Linux) ou Command+F (macOS).

    A guia Pesquisar é aberta no lado esquerdo da ferramenta Rede .

  2. Na caixa de texto Localizar , insira a cadeia de caracteres de consulta e pressione Enter.

    Opcionalmente, clique no botão Diferenciar maiúsculas de minúsculas para ativar a diferenciação de maiúsculas e minúsculas. Como opção, clique no botão Expressão regular para ativar expressões regulares.

  3. Clique em um dos resultados da pesquisa. A ferramenta Rede realça em amarelo a solicitação correspondente. A ferramenta Rede também abre a guia Cabeçalhos ou Resposta e realça a cadeia de caracteres que correspondeu lá, se houver.

A guia Pesquisar à direita na ferramenta Rede

Para atualizar os resultados da pesquisa, na guia Pesquisar , clique no botão Atualizar (ícone de Atualização).

Para limpar os resultados da pesquisa, na guia Pesquisar , clique no botão Limpar pesquisa (ícone Limpar pesquisa).

Para obter mais informações sobre todas as maneiras de pesquisar no DevTools, consulte Localizar arquivos de origem para uma página usando a ferramenta Pesquisar

Filtrar solicitações

Você pode filtrar as solicitações por propriedades, por tipo ou por hora e ocultar URLs de dados. A lista suspensa Mais filtros contém as seguintes opções e marcas de seleção de status:

  • Ocultar URLs de dados
  • Ocultar URLs de extensão
  • Cookies de resposta bloqueados
  • Solicitações bloqueadas
  • Solicitações de terceiros

A lista suspensa

A lista suspensa tem um número à esquerda que informa quantos filtros estão selecionados na lista suspensa.

Filtrar solicitações por propriedades

Use a caixa de texto Filtro 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 está oculto; consulte Ocultar o painel Filtros, abaixo.

A caixa de texto Filtro :

A caixa de texto Filtro

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

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

A lista completa de propriedades com suporte:

Propriedade Detalhes
cookie-domain Mostrar os recursos que definem um domínio de cookie específico.
cookie-name Mostre os recursos que definem um nome de cookie específico.
cookie-path 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 Exibir 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 preenchimento automático com todos os domínios encontrados.
has-overrides Mostrar solicitações que têm conteúdo substituído, cabeçalhos, substituições (sim) ou nenhuma substituição (não). Você pode adicionar a coluna Has overrides correspondente à tabela de solicitação.
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 do que o tamanho especificado, em bytes. Definir um valor de 1000 é equivalente a definir um valor de 1k.
method Exibe os recursos que foram recuperados por meio de um tipo de método HTTP especificado. O DevTools preenche o menu suspenso com todos os métodos HTTP encontrados.
mime-type Exibe recursos de um tipo MIME especificado. O 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 sendo exibidos no momento (mixed-content:displayed).
priority Mostrar recursos cujo nível de prioridade corresponde ao valor especificado.
resource-type Mostrar recursos de um tipo de recurso, por exemplo, imagem. O DevTools preenche a lista suspensa de preenchimento automático com todos os tipos de recursos encontrados.
response-header-set-cookie Mostrar cabeçalhos brutos Set-Cookie na guia Problemas. Cookies malformados com cabeçalhos incorretos Set-Cookie serão sinalizados na ferramenta Rede .
scheme Exibe os recursos recuperados por meio de 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. O DevTools preenche o preenchimento automático 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. O DevTools preenche o preenchimento automático com todos os nomes de cookies encontrados.
set-cookie-value Exibe recursos que têm um Set-Cookie cabeçalho com um valor que corresponde ao valor especificado. O DevTools preenche o preenchimento automático com todos os valores de cookie encontrados.
status-code Exibe recursos que correspondem ao código de status HTTP específico. O DevTools preenche o menu suspenso de preenchimento automático com todos os códigos de status encontrados.
url Mostrar os recursos que têm uma URL correspondente ao valor especificado.

Filtrar solicitações por tipo

Para filtrar solicitações por tipo de solicitação, clique nos botões da ferramenta Rede : Todos, Fetch/XHR,Doc, CSS, JS, Fonte, Img, Mídia, Manifesto, WS (WebSocket), Wasm (WebAssembly) ou Outro (qualquer outro tipo não listado aqui).

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

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

Usando os filtros de tipo para exibir recursos JS, CSS e Document

Filtrar solicitações por hora

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 que estavam inativas por volta de 300 ms:

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

Ocultar URLs de dados

URLs de dados são pequenos arquivos incorporados a 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

Ocultar URLs de extensão

Para se concentrar no código criado, você pode filtrar solicitações irrelevantes enviadas por extensões que você pode ter instalado no Microsoft Edge. 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 o menu suspenso Mais filtros e selecione Ocultar URLs de extensão para que uma marca de seleção apareça ao lado dele:

URLs de extensão ocultas da tabela Solicitações

A barra de status na parte inferior exibe o número de solicitações mostradas do total, como 5/10 solicitações.

Mostrar somente 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 a lista suspensa Mais filtros e, em seguida, selecione Cookies de resposta bloqueados para que uma marca de seleção apareça ao lado dela.

Em seguida, para descobrir por que um cookie de resposta foi bloqueado, selecione a solicitação (em Nome), abra a guia Cookies (à direita) e passe o mouse sobre o ícone de informações (ícone de informações).

Por exemplo:

  1. No Microsoft Edge, selecione Configurações e mais>Nova janela InPrivate.

  2. Na Barra de endereços, insira Microsoft.com.

  3. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  4. Selecione a ferramenta Rede .

  5. Verifique se o botão Todos os filtros está selecionado.

  6. Atualize a página da Web.

    Muitas mensagens são listadas na ferramenta Rede .

  7. Na barra de ação Filtros , selecione a lista suspensa Mais filtros e, em seguida, selecione Cookies de resposta bloqueados.

    No menu, uma marca de seleção aparece ao lado de Cookies de resposta bloqueados.

  8. Clique fora da lista suspensa para fechá-la.

    As solicitações que bloquearam os cookies de resposta são exibidas, como id?d_visid_ver=....

  9. Selecione uma solicitação, como id?d_visid_ver=....

    A barra lateral é aberta, com guias.

  10. Selecione a guia Cookies .

  11. Passe o mouse sobre o ícone de informações (ícone de informações).

    A dica de ferramenta diz, por exemplo: "Esta tentativa de definir um cookie por meio de um cabeçalho de Set-Cookie foi bloqueada devido às preferências do usuário".

    A tabela Solicitações mostra apenas as solicitações com cookies de resposta bloqueados

    A barra de status na parte inferior exibe o número de solicitações mostradas do total.

Além disso, a ferramenta Rede mostra um ícone de aviso (ícone de aviso) ao lado de uma solicitação com cookies bloqueados por causa de sinalizadores ou configuração do Edge. Passe o mouse sobre o ícone para ver uma dica de ferramenta com uma pista e clique nela para ir para a ferramenta Problemas e obter mais informações.

Mostrar somente solicitações bloqueadas

Para filtrar tudo, exceto solicitações bloqueadas, na barra de ações Filtros , selecione Mais filtros>Solicitações bloqueadas, para que uma marca de seleção seja exibida. Para testar isso, você pode usar a ferramenta de bloqueio de solicitação de rede no painel Visualização Rápida na parte inferior do DevTools; consulte Bloquear solicitações em Inspecionar atividade de rede.

Por exemplo:

  1. Acesse uma página da Web, como a página de demonstração Inspecionar atividade de rede , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Rede .

  4. Atualize a página da Web.

    A tabela Solicitações lista .html, .css, .png, e .js arquivos.

  5. Na lista suspensa Mais filtros (com a dica de ferramenta Mostrar apenas/ocultar solicitações), selecione Solicitações bloqueadas.

    Na lista suspensa, uma marca de seleção é exibida ao lado de Solicitações bloqueadas.

  6. Clique fora da lista suspensa para fechá-la.

    A tabela Solicitações está vazia, pois o DevTools não está bloqueando nenhuma solicitação, e as solicitações agora são filtradas para mostrar apenas solicitações bloqueadas.

  7. Pressione Esc uma ou duas vezes para que o painel Visualização Rápida seja aberto na parte inferior do DevTools.

  8. Na barra de ferramentas Visualização rápida , clique no botão Mais ferramentas (ícone Mais ferramentas) e selecione Bloqueio de solicitação de rede.

    A ferramenta de bloqueio de solicitação de rede é aberta no painel de visualização rápida .

  9. Na ferramenta de bloqueio de solicitação de rede, clique no botão Adicionar padrão de bloqueio de solicitação de rede (ícone

  10. Na caixa de texto Padrão de texto para bloquear solicitações correspondentes , insira *.pnge clique no botão Adicionar .

    *.png está listado, com uma marca de seleção.

    Na ferramenta Rede , a tabela Solicitações ainda está vazia, pois nenhuma solicitação foi bloqueada ativamente ainda.

  11. Atualize a página da Web.

    A tabela Solicitações mostra apenas solicitações bloqueadas

    • Na página da Web de demonstração, em vez de um logotipo do Edge ao lado do título, um ícone de imagem quebrada é mostrado, juntamente com o texto alternativo da imagem (o logotipo do Microsoft Edge DevTools).

    • Na ferramenta Rede , a tabela Solicitações lista .png apenas arquivos. A tabela Solicitações destaca solicitações bloqueadas como texto vermelho.

    • Na ferramenta Rede, a barra de status na parte inferior exibe o número de solicitações mostradas do total, como 2/5 solicitações.

Mostrar somente solicitações de terceiros

Para filtrar tudo, exceto as solicitações com origem que difere da origem da página, na barra de ações Filtros , selecione Mais filtros>solicitações de terceiros, para que uma marca de seleção apareça. Experimente na página de demonstração Inspecionar Atividade de Rede .

A tabela Solicitações mostra apenas as solicitações de terceiros

A barra de status na parte inferior exibe o número de solicitações mostradas do total.

Classificar solicitações

Por padrão, as solicitações na tabela Solicitações são classificadas por hora de início, 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 as solicitações por essa coluna.

Classificar por fase de atividade

A coluna Cascata está desativada por padrão. Para ativar a coluna Cascata : clique com o botão direito do mouse em um cabeçalho da tabela Solicitações e selecione o item de menu Cascata simples que não tem um submenu.

Para alterar a forma como a coluna Cascata classifica as 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 e solicitação ou resposta mais curtas é colocada no topo.

    • Latência - A solicitação que esperou o menor tempo por uma resposta é colocada no topo.

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

Veja a seguir a classificação da cascata por duração total. A parte mais clara de cada barra é o tempo gasto esperando e a parte mais escura é o tempo gasto baixando bytes:

Classificando a cascata pela duração total

Analisar solicitações

Desde que o DevTools esteja 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 o DevTools esteve aberto. Para revelar mais informações sobre cada item, clique ou passe o mouse sobre as 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.
  • Tipo. O tipo MIME do recurso solicitado.
  • Iniciador. Os seguintes objetos ou processos podem iniciar solicitações:
    • Analisador. O analisador HTML.
    • Redirecionar. 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.
  • Cumprido por. Se a solicitação foi atendida pelo cache HTTP ou pelo trabalho de serviço do aplicativo.

A coluna Cascata está desativada por padrão. Para ativar a coluna Cascata , clique com o botão direito do mouse no cabeçalho da tabela Solicitações e selecione o item de menu Cascata simples que não tem um submenu.

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 ocultá-lo ou mostrá-lo. As colunas exibidas no momento têm marcas de seleção próximas a elas.

Adicionando uma coluna à tabela Solicitações

Adicionar colunas personalizadas para cabeçalhos de resposta

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> RespostaGerenciar Colunas de Cabeçalho.

    A janela pop-up Gerenciar Colunas de Cabeçalho é aberta.

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

Agrupar solicitações por quadros embutidos

Se quadros embutidos em uma página iniciarem muitas solicitações, você poderá tornar o log de solicitações mais amigável agrupando-os.

Para agrupar solicitações por iframes:

  1. Vá para uma página da Web, como a Demonstração de referência da ferramenta Rede, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Rede .

  4. Atualize a página da Web.

    Na tabela Solicitações da ferramenta Rede, as linhas são exibidas para:

    • devtools-network-reference/ (index.html)
    • style.css
    • script.js

  5. Na página da Web de demonstração, clique no botão Carregar iframes .

    Muitas linhas são adicionadas à tabela Solicitações :

    O log de solicitações de rede com solicitações não agrupadas

  6. Na ferramenta Rede , clique no botão Configurações de rede (ícone Configurações) e marque a caixa de seleção Agrupar por quadro .

    Na tabela Solicitações , os nomes de quadro expansíveis são exibidos.

  7. Na tabela Solicitações , clique em um triângulo de expansão em um quadro.

    As solicitações que foram iniciadas pelo quadro embutido são exibidas:

    O log de solicitações de rede com solicitações agrupadas por iframes

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

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

A coluna Cascata está desativada por padrão. Para ativar a coluna Cascata , clique com o botão direito do mouse no cabeçalho da tabela Solicitações e selecione o item de menu Cascata simples que não tem um submenu.

Para ver as diferentes maneiras de classificar a Cachoeira, consulte Classificar por fase de atividade, acima.

A coluna Cascata do painel Solicitações :

A coluna em cascata do painel Solicitações

Analisar as mensagens de uma conexão WebSocket

Para exibir as mensagens de uma conexão WebSocket:

  1. Vá para uma página da Web, como o Online Websocket Tester.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. Selecione a ferramenta Rede .

    O botão Todos os filtros é selecionado por padrão. O painel Rede está vazio, não exibindo mensagens.

  4. Atualize a página da Web.

    Na tabela Solicitações da ferramenta Rede, muitas solicitações são listadas.

  5. Na parte superior da ferramenta Rede , selecione o botão Filtro de soquete , com a dica de ferramenta: WebSocket | Transporte Web | DirectSocket.

    A lista filtrada de solicitações está vazia.

  6. Na página Online Websocket Tester, clique no botão Conectar .

    Se você ainda não configurou uma conta e um token de API, a página exibirá:

    • Conexão estabelecida
    • {"error":"Unknown api key"} com um triângulo apontando para baixo; enviado do servidor para o navegador.

    Na ferramenta Rede , na guia Mensagens , a solicitação é exibida:

    • channel_123?api_key=...

  7. Na lista de solicitações, selecione a conexão WebSocket, como channel_123?api_key=....

    A barra lateral é aberta, com guias.

  8. Selecione a guia Mensagens .

    Se você não se registrou para um token de API, a guia Mensagens listará a mensagem:

    • {"error":"Unknown api key"} com uma seta vermelha para baixo; enviado do servidor para o navegador.

  9. Na página Web Online Websocket Tester, na caixa de texto, altere Olá PieSocket! para Olá mundo!, e clique no botão Enviar .

    Na página web, o console mostra a mensagem Olá, Mundo! com um triângulo apontando para cima; enviadas do navegador para o servidor.

    Na ferramenta Rede , na aba Mensagens , a tabela mostra as últimas 100 mensagens; Nesse caso, a mensagem é adicionada:

    • Olá mundo! com uma seta verde para cima; Enviado do navegador para o servidor:

A guia Mensagens

Observação: para obter mensagens vermelhas de seta para baixo (ecoadas do servidor), bem como mensagens verdes de seta para cima, você precisaria:

  1. Crie uma conta no site PieSocket. Isso cria um token de API.

  2. Crie um cluster no site PieSocket.

  3. Na página do dashboard do PieSocket, clique no botão Testar online.

    A página Online WebSocket Tester é aberta, com seus parâmetros de consulta.

  4. Clique no botão Conectar .

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

A tabela Solicitações contém as três colunas a seguir:

  • Dados. O conteúdo da mensagem. Se a mensagem for texto sem formatação, ela será exibida aqui. Para opcodes binários, esta coluna exibe o nome e o código do opcode. Os seguintes opcodes são suportados:

    • Quadro de continuação
    • Quadro Binário
    • Conexão Fechar Quadro
    • Quadro de Ping
    • Quadro Pong

  • Comprimento. O comprimento da carga da mensagem, em bytes.

  • Hora. A hora em que a mensagem foi recebida ou enviada.

Analisar eventos em um fluxo

Para exibir os eventos que os servidores transmitem por meio da API de Busca, da API EventSource e do XHR:

  1. Vá para uma página da Web que transmita eventos, como a demonstração de referência da ferramenta Rede, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Rede .

  4. Atualize a página da Web.

    Na tabela Solicitações da ferramenta Rede, as linhas são exibidas para:

    • devtools-network-reference/ (index.html)
    • style.css
    • script.js

  5. Na página da Web de demonstração, clique no botão Eventos enviados pelo servidor do Stream.

    Na tabela Solicitações , uma sse linha (evento enviado pelo servidor) é adicionada.

  6. Selecione a solicitação (evento enviado pelo sse servidor).

    A barra lateral é aberta, incluindo uma guia EventStream .

  7. Selecione a guia EventStream :

    A guia EventStream

    Uma nova mensagem de "olá" é recebida e exibida uma vez por segundo.

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 no botão Limpar (ícone Limpar Fluxo de Eventos).

Veja também:

Exibir uma visualização do corpo da resposta

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

  1. Na ferramenta Rede , Na tabela Solicitações , na coluna Nome , clique no nome de uma solicitação.

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

    A guia Visualização na ferramenta Rede

A guia Visualizar é mais útil para visualizar imagens.

Exibir o corpo da resposta

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

  1. Na tabela Solicitações , na coluna Nome , clique no nome da solicitação.

  2. Na barra lateral, selecione a guia Resposta :

    A guia Resposta

Exibir cabeçalhos HTTP

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

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

  2. Na barra lateral, selecione a guia Cabeçalhos e role para baixo até as várias seções:

    • Geral
    • Cabeçalhos de dicas antecipadas (opcional)
    • Cabeçalhos de resposta
    • Cabeçalhos de solicitação

    O painel Cabeçalhos

Exibir origem do cabeçalho HTTP

Por padrão, a guia Cabeçalhos mostra nomes de cabeçalho em ordem alfabética. Para exibir os nomes de cabeçalho HTTP na ordem em que foram recebidos:

  1. Vá para uma página da Web que use XHR, como Remover -ms-high-contrast e adotar cores forçadas baseadas em padrões no Microsoft Edge, em uma nova janela ou guia.

  2. Aceite cookies no prompt da faixa, se ele aparecer.

    Em regiões onde o Regulamento Geral sobre a Proteção de Dados (GDPR) é aplicado, este site mostra um banner de cookies e não enviará uma collect solicitação (abaixo), a menos que você aceite cookies no banner.

  3. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  4. Selecione a ferramenta Rede .

  5. Atualize a página da Web.

    Na tabela Solicitações , muitas solicitações são listadas.

  6. Clique no botão vermelho Parar registro de rede (ícone Parar registro de registro de rede) na parte superior.

  7. Na tabela Solicitações , clique na coluna Nome para classificar as solicitações em ordem alfabética e selecione uma solicitação a coleta .

    A barra lateral é aberta, com guias.

  8. Selecione a guia Cabeçalhos :

    Guia > Cabeçalhos Exibir código-fonte

  9. Marque a caixa de seleção Raw ao lado da seção Cabeçalhos de resposta ou Cabeçalhosde solicitação .

Veja também:

Aviso de cabeçalhos provisórios

Às vezes, a guia Cabeçalhos mostra a mensagem de aviso Cabeçalhos provisórios são mostrados. Isso pode ocorrer pelos seguintes motivos:

  • A solicitação não foi enviada pela rede, mas foi atendida de um cache local, que não armazena os cabeçalhos da solicitação original.
  • O recurso de rede não é válido.
  • Por motivos de segurança.

Suponha que a solicitação não tenha sido enviada pela rede, mas servida de um cache local, que não armazena os cabeçalhos da solicitação original. Nesse caso, você pode marcar a caixa de seleção Desabilitar cache na parte superior da ferramenta Rede para ver os cabeçalhos de solicitação completos. Por exemplo:

  1. Acesse a página de demonstração Inspecionar Atividade de Rede .

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. Selecione a ferramenta Rede .

  4. Atualize a página da Web.

  5. Selecione a solicitação de redegetstarted.js .

    A seção Cabeçalhos de Solicitação exibe a mensagem: Cabeçalhos provisórios são mostrados. Desabilite o cache para ver os cabeçalhos completos.

    Mensagem de aviso de cabeçalhos provisórios

  6. Marque a caixa de seleção Desabilitar cache na parte superior da ferramenta Rede .

  7. Atualize a página da Web.

  8. Selecione a solicitação de redegetstarted.js .

    A seção Cabeçalhos da Solicitação não exibe mais a mensagem; Os cabeçalhos completos da solicitação são mostrados.

Veja também:

Exibir conteúdo de solicitação (parâmetros de cadeia de caracteres de consulta e dados de formulário)

Para exibir o conteúdo de uma solicitação HTTP (parâmetros de cadeia de caracteres de consulta e dados de formulário), selecione uma solicitação na tabela Solicitações e selecione a guia Conteúdo na barra lateral, da seguinte maneira:

  1. Vá para uma página da Web, como a Demonstração de referência da ferramenta Rede, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Rede .

  4. Atualize a página da Web.

    Na tabela Solicitações da ferramenta Rede, as linhas são exibidas para:

    • devtools-network-reference/ (index.html)
    • style.css
    • script.js
    • favicon.png

  5. Na página da demo, clique no botão Enviar dados do formulário .

    Na tabela Solicitações da ferramenta Rede, uma linha é adicionada:

    • form-data-endpoint?hasfile=true

  6. Selecione a linha form-data-endpoint?hasfile=true.

    A barra lateral é aberta, incluindo uma guia Carga .

  7. Selecione a guia Payload .

    O conteúdo da solicitação é exibido, incluindo uma seção Parâmetros da Cadeia de Caracteres de Consulta e uma seção Dados do Formulário :

A seção Parâmetros da Cadeia de Caracteres de Consulta na guia Carga

Na guia Console do DevTools está o erro:

  • POST https://microsoftedge.github.io/Demos/devtools-network-reference/form-data-endpoint?hasfile=true 405 (Method Not Allowed) (anonymous) @ script.js:49

Este erro inofensivo de método não permitido aparece no console, porque não há manipulador form-data-endpoint POST no servidor de demonstração. O erro é esperado, pois github.io hospedagem não executa servidores de aplicativos, apenas arquivos estáticos.

Exibir origem da carga

Por padrão, a ferramenta Rede mostra a carga em um formato legível.

Para exibir as fontes de parâmetros de cadeia de caracteres de consulta ou dados de formulário:

  1. Execute as etapas da seção anterior, acima.

    Na guia Payload , a seção Query String Parameters mostra o payload em um formato legível, para hasfile. A seção Dados do formulário mostra a carga em um formato legível, para username, timestampe :file

    Os botões Exibir fonte

  2. Ao lado do título da seção Parâmetros da Cadeia de Caracteres de Consulta , clique no botão Exibir código-fonte .

  3. Ao lado do título da seção Dados do formulário , clique no botão Exibir fonte .

    As informações de origem da carga são exibidas:

    Guia > Conteúdo: Cadeia de Caracteres de Consulta, seção Parâmetros e seção > Dados de Formulário o botão

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

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

  1. Vá para uma página da Web que use parâmetros de cadeia de caracteres de consulta, como a Demonstração de referência da ferramenta Rede, em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Rede .

  4. Atualize a página da Web.

    A tabela Solicitações lista .html, .css, .js, e .png arquivos.

  5. Na página da Web de demonstração, clique no botão Enviar parâmetros de consulta codificados .

    A tabela Solicitações adiciona uma linha:

    encoded-query-params-endpoint?name=Danas+Barkus&url=https%3A%2F%2Fcontoso.com%2F%C3%A0%C3%A9%C3%A8%C3%B4%C3%A7%D0%BB

  6. Selecione a encoded-query-params-endpoint linha.

    A barra lateral é aberta, com guias.

  7. Na barra lateral, selecione a guia Payload .

    A seção Parâmetros da Cadeia de Caracteres de Consulta exibe a URL decodificada, como: https://contoso.com/àéèôçл:

    Parâmetros de cadeia de caracteres de consulta mostrados com caracteres decodificados

  8. Na seção Parâmetros da Cadeia de Caracteres de Consulta , clique no botão Exibir URL-codificado .

    A URL agora é exibida com caracteres codificados (como %3A e %2F); e o rótulo do botão muda para Exibir decodificado:

    Parâmetros de cadeia de caracteres de consulta mostrados com caracteres codificados como URL.

  9. Clique no botão Exibir decodificado .

    A URL é exibida novamente com caracteres decodificados, como: https://contoso.com/àéèôçл, e o rótulo do botão muda de volta para Exibir codificado por URL.

Exibir cookies

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

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

  2. Na barra lateral, selecione a guia Cookies :

    O painel Cookies

Para obter mais informações sobre cada uma das colunas, consulte Campos em Exibir, editar e excluir cookies.

Para modificar os cookies, consulte Exibir, editar e excluir cookies.

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

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

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

  2. Na barra lateral, selecione a guia Intervalo .

    O painel Tempo

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

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

Visualizar um detalhamento de intervalo

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

A coluna Cascata está desativada por padrão. Para ativar a coluna Cascata , clique com o botão direito do mouse no cabeçalho da tabela Solicitações e selecione o item de menu Cascata simples que não tem um submenu.

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

Para exibir os dados sem passar o mouse, consulte Exibir o detalhamento de tempo de uma solicitação, acima.

Fases de detalhamento de tempo explicadas

Cada uma dessas fases pode aparecer na guia Intervalo :

  • Enfileiramento. O navegador enfileira solicitações quando qualquer uma das seguintes opções é verdadeira

    • Há solicitações de prioridade mais alta.
    • Já existem 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.

  • Estagnou. A solicitação pode ser interrompida por qualquer um dos motivos descritos em Enfileiramento.

  • Inicialização. Quando a solicitação é manipulada por um service worker, a inicialização é o tempo que o service worker levou para ser iniciado.

  • respondWith. Quando a solicitação é tratada por um service worker, respondWith é o tempo que levou para o service worker executar o retorno de fetchEvent.respondWith() chamada.

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

  • Conexão inicial. O navegador está estabelecendo uma conexão, incluindo handshakes e novas tentativas de TCP e negociando um SSL (Secure Socket Layer).

  • Negociação por procuração. 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.

  • Solicitação para o ServiceWorker. A solicitação está sendo enviada ao trabalho de 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 esta resposta via HTTP/2 Server Push.

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

Analisar um roteamento de solicitação de trabalho de serviço

Para visualizar o roteamento de solicitação, as linhas do tempo exibem o evento de trabalho Startup de serviço e os respondWith eventos de busca. É possível depurar e visualizar uma solicitação de rede que passou por um trabalho de serviço.

Para exibir o detalhamento de tempo de uma solicitação de trabalho de serviço:

  1. Vá para uma página que usa um trabalho de serviço, como a página de demonstração do pwamp , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página e selecione Inspecionar.

    O DevTools é aberto.

  3. Selecione a ferramenta Rede .

  4. Recarregue a página.

  5. Na lista de solicitações, selecione uma solicitação de rede que passou por um arquivo de trabalho de serviço. Por exemplo, selecione about.css.

    A barra lateral é exibida.

  6. Na barra lateral, clique na guia Intervalo :

    A guia Intervalo na ferramenta Rede

    A seção Trabalho de Serviço exibe informações de tempo sobre as fases Inicialização e respondWith .

  7. Clique na seta de expansão na seção respondCom :

    A seção expandida respondWith

  8. Na seção respondWith , clique na seta de expansão na Solicitação Original:

    A seção respondWith totalmente expandida

  9. Na Resposta Recebida, clique na seta de expansão.

Exibir iniciadores e dependências

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

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

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

Quando a tabela Solicitações é ordenada cronologicamente, se você passar o mouse sobre uma linha, a linha anterior 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 DOMContentLoaded tempo dos eventos and load em vários locais na ferramenta Rede :

  • No painel Visão geral com linhas verticais.

  • Na coluna Cascata da tabela Solicitação com linhas verticais. A coluna Cascata está desativada por padrão. Para ativar a coluna Cascata , clique com o botão direito do mouse no cabeçalho da tabela Solicitações e selecione o item de menu Cascata simples que não tem um submenu.

  • No painel Resumo , na parte inferior da ferramenta Rede , com rótulos de tempo.

O DOMContentLoaded evento é colorido em azul e em load vermelho.

Os locais dos eventos DOMContentLoaded e load na ferramenta Rede

Exibir o número total de solicitações

O número total de solicitações é 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 rastreia apenas as solicitações que foram registradas desde que o DevTools foi aberto. Se outras solicitações ocorreram antes de o DevTools ser aberto, essas solicitações não serão contadas.

Exibir o tamanho total do download

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

O tamanho total do download das solicitações

Cuidado: esse número rastreia apenas as solicitações que foram registradas desde que o DevTools foi aberto. Se outras solicitações ocorreram antes de DevTools ser aberto, as solicitações anteriores não serão contadas.

Para verificar o tamanho dos recursos depois que o navegador descompacta cada item, consulte exibir o tamanho descompactado 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 sobre a coluna Iniciador para exibir o rastreamento de pilha que leva à solicitação.

O rastreamento de pilha que leva a uma solicitação de recurso

Exibir o tamanho descompactado de um recurso

Para ver o tamanho transferido e o tamanho descompactado 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 descompactados

Exportar dados de solicitações

Você pode exportar ou copiar a lista de solicitações, com filtros aplicados, das várias maneiras descritas a seguir.

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

HAR (HTTP Arquivo) é 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. Consulte Analisador HAR.

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

Para salvar todas as solicitações de rede em um arquivo HAR, sem dados confidenciais:

  1. Acesse uma página da Web, como a página de demonstração Inspecionar atividade de rede , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Rede .

  4. Atualize a página da Web.

  5. Clique com o botão direito do mouse em qualquer solicitação na tabela Solicitações e selecione Copiar>tudo como HAR (higienizado):

    Selecionando 'Salvar todos listados como HAR (higienizado)'

    Ou, na barra de ações na parte superior da ferramenta Rede , clique no botão Exportar HAR (higienizado) (ícone Exportar HAR (higienizado)).

O DevTools salva todas as solicitações que ocorreram desde que você abriu o DevTools no arquivo HAR.

Você não pode filtrar solicitações e não pode salvar uma única solicitação.

Para salvar todas as solicitações de rede em um arquivo HAR, incluindo dados confidenciais:

  1. No DevTools, selecione Personalizado e controleas Configurações do DevTools>.

    A página Preferências de Configurações> é aberta.

  2. Role para baixo até a seção Rede .

  3. Marque a caixa de seleção Permitir a geração de HAR com dados confidenciais.

  4. Clique no botão Fechar (botão Fechar Configurações).

  5. Na ferramenta Rede, clique com o botão direito do mouse em qualquer solicitação na tabela Solicitações e selecione Copiar>tudo como HAR (com dados confidenciais).

    Ou, na barra de ações na parte superior, clique no botão Exportar HAR (higienizado ou com dados confidenciais) (ícone Exportar HAR) e selecione Exportar HAR (com dados confidenciais):

    Selecionando 'Copiar tudo como HAR (com dados confidenciais)'

Importar um arquivo HAR para o DevTools para análise

Depois de ter um arquivo HAR, você poderá importá-lo de volta para o DevTools para análise usando o Analisador HAR.

Para importar um arquivo HAR para o DevTools para análise:

  • Na barra de ações na parte superior da ferramenta Rede , clique no botão Importar arquivo HAR (ícone Importar arquivo HAR).

  • Ou arraste o arquivo HAR para a tabela Solicitações .

A ferramenta Rede lê e mostra os iniciadores das solicitações importadas do arquivo HAR. Para iniciadores, consulte Exibir um log de solicitações, acima.

Copiar solicitações de rede 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 mouse sobre Copiar e selecione uma das seguintes opções.

Para copiar uma única solicitação, sua resposta ou seu rastreamento de pilha:

Nome Detalhes
Copiar URL Copie a URL da solicitação para a área de transferência.
Copiar como cURL (cmd) Copie a solicitação como um comando cURL.
Copiar como cURL (bash)
Copiar como PowerShell Copie a solicitação como um comando do PowerShell.
Copiar como buscar Copie a solicitação como uma chamada de busca.
Copiar como busca (Node.js) Copie a solicitação como uma chamada Node.js fetch.
Copiar resposta Copie o corpo da resposta para a área de transferência.
Copiar rastreamento de pilha Copie o rastreamento de pilha da solicitação para a área de transferência. Esse item de menu só aparece para solicitações acionadas por código JavaScript, como solicitações Fetch ou XHR. Consulte a solicitação Replay XHR, acima.

Para copiar todas as solicitações:

Nome Detalhes
Copiar todas as URLs Copie as URLs de todas as solicitações para a área de transferência.
Copiar tudo como cURL (cmd) Copie todas as solicitações como uma cadeia de comandos cURL.
Copiar tudo como cURL (bash)
Copiar tudo como PowerShell Copie todas as solicitações como uma cadeia de comandos do PowerShell.
Copiar tudo como fetch Copie todas as solicitações como uma cadeia de chamadas de busca.
Copiar tudo como fetch (Node.js) Copie todas as solicitações como uma cadeia de chamadas de busca Node.js.
Copiar tudo como HAR (higienizado) Copie todas as solicitações como dados HAR sem dados confidenciais, como Cookie, Set-Cookiee Authorization cabeçalhos.
Copiar tudo como HAR (com dados confidenciais) Copie todas as solicitações como dados HAR com dados confidenciais. O comando será exibido se você marcar a caixa de seleção Personalizar e controlar asconfigurações>do DevTools> Página >PreferênciasSeção> Rede Permitir a geração de HAR com dados confidenciais.

O menu Copiar

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

Nome Detalhes
Copiar todas as URLs listadas Copie URLs de todas as solicitações filtradas para a área de transferência.
Copiar tudo listado como cURL (cmd) Copie todas as solicitações filtradas como uma cadeia de comandos cURL.
Copiar tudo listado como cURL (bash) Copie todas as solicitações filtradas como uma cadeia de comandos cURL.
Copiar tudo listado como PowerShell Copie todas as solicitações filtradas como uma cadeia de comandos do PowerShell.
Copiar tudo listado como fetch Copie todas as solicitações filtradas como uma cadeia de chamadas de busca.
Copiar tudo listado como fetch (Node.js) Copie todas as solicitações filtradas como uma cadeia de chamadas de busca Node.js.
Copiar tudo listado como HAR (higienizado) Copie todas as solicitações filtradas como dados HAR sem dados confidenciais, como Cookie, Set-Cookiee Authorization cabeçalhos.
Copiar tudo listado como HAR (com dados confidenciais) Copie todas as solicitações filtradas como dados HAR com dados confidenciais. O comando será exibido se você marcar a caixa de seleção Personalizar e controlar asconfigurações>do DevTools> Página >PreferênciasSeção> Rede Permitir a geração de HAR com dados confidenciais.

Opções de cópia para um conjunto filtrado de solicitações

Veja também:

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

Para copiar os dados JSON formatados de uma resposta JSON:

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

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

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

    O comando de clicar com o botão direito do mouse em Copiar Valor

    Agora você pode colar o valor em qualquer editor.

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 Conteúdo :

  3. Expanda uma das seções a seguir.

    • Carga de solicitação (JSON)
    • Dados de Formulário
    • Parâmetros da 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.

Alterar o layout da ferramenta Rede

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

Ocultar o painel Filtros

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

O botão Ocultar filtros

Usar 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 Size é o tamanho descompactado de uma solicitação.

  • A coluna Prioridade (não mostrada por padrão) mostra a prioridade de busca inicial (valor inferior) e final (valor superior).

Para habilitar linhas grandes:

  1. Acesse uma página da Web, como a página de demonstração Inspecionar atividade de rede , em uma nova janela ou guia.

  2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

    O DevTools é aberto.

  3. No DevTools, selecione a ferramenta Rede .

  4. Atualize a página da Web.

    As solicitações são mostradas em pequenas linhas.

  5. Na ferramenta Rede , clique no botão Configurações de rede (ícone Configurações) e marque a caixa de seleção Linhas de solicitação grandes .

    As solicitações são mostradas em linhas grandes:

    Um exemplo de linhas de solicitação grandes 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

Páginas da Web de demonstração:

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 Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques.

Licença Creative Commons Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.

  • Last updated on