Referência de funcionalidades de rede

A ferramenta Rede tem as seguintes funcionalidades para inspecionar a atividade de rede de uma página Web. Para obter instruções passo a passo e introdução à ferramenta Rede , veja Inspecionar a atividade de rede.

Conteúdo detalhado:

• Registar pedidos de rede
  • Parar a gravação de pedidos de rede
  • Limpar pedidos
  • Guardar pedidos em carregamentos de páginas
  • Captura de ecrã durante o carregamento de páginas
  • Pedido XHR de repetição
• Alterar o comportamento de carregamento
  • Emular um visitante pela primeira vez ao desativar a cache do browser
    • Desativar a cache do browser a partir da ferramenta Condições de rede
  • Limpar manualmente a cache do browser
  • Emular offline
  • Emular ligações de rede lentas
    • Criar um perfil de limitação personalizado
    • Limitar ligações WebSocket
    • Emular ligações de rede lentas da ferramenta Condições de Rede
  • Limpar manualmente os cookies do browser
  • Substituir cabeçalhos de resposta HTTP
  • Substituir o agente de utilizador
• Definir sugestões de cliente do agente de utilizador
• Solicitações de pesquisa
• Filtrar pedidos
  • Filtrar pedidos por propriedades
  • Filtrar pedidos por tipo
  • Filtrar pedidos por hora
  • Ocultar URLs de dados
  • Ocultar URLs de extensão
  • Mostrar apenas os pedidos com cookies de resposta bloqueados
  • Mostrar apenas pedidos bloqueados
  • Mostrar apenas pedidos de terceiros
• Ordenar pedidos
  • Ordenar por coluna
  • Ordenar por fase de atividade
• Analisar pedidos
  • Apresentar um registo de pedidos
    • Adicionar ou remover colunas
    • Adicionar colunas personalizadas para cabeçalhos de resposta
  • Agrupar pedidos por frames inline
  • Apresentar a relação de temporização dos pedidos
  • Analisar as mensagens de uma ligação WebSocket
  • Analisar eventos num fluxo
  • Apresentar uma pré-visualização de um corpo de resposta
  • Apresentar um corpo de resposta
  • Apresentar cabeçalhos HTTP
    • Ver origem do cabeçalho HTTP
    • Aviso de cabeçalhos provisórios
  • Ver payload do pedido (parâmetros de cadeia de consulta e dados de formulário)
    • Ver origem do payload
    • Apresentar parâmetros de cadeia de consulta codificadas com URL
  • Apresentar cookies
  • Apresentar a discriminação de temporização de um pedido
    • Pré-visualizar uma divisão de temporização
    • Explicação das fases de divisão do tempo
  • Apresentar iniciadores e dependências
  • Apresentar eventos de carregamento
  • Apresentar o número total de pedidos
  • Apresentar o tamanho total da transferência
  • Apresentar o rastreio de pilha que causou um pedido
  • Apresentar o tamanho descomprimido de um recurso
• Exportar dados de pedidos
  • Guardar todos os pedidos de rede num ficheiro HAR
  • Copiar pedidos de rede para a área de transferência
  • Copiar JSON de resposta formatada para a área de transferência
  • Copiar valores de propriedades de pedidos de rede para a área de transferência
• Alterar o esquema da ferramenta Rede
  • Ocultar o painel Filtros
  • Utilizar linhas de pedidos grandes
  • Ocultar o painel Descrição Geral
• Confira também

Registar pedidos de rede

Por predefinição, o DevTools regista todos os pedidos de rede na ferramenta Rede , desde que o DevTools esteja aberto.

Por exemplo:

1. Aceda a uma página Web, como a página Inspecionar demonstração de Atividade de Rede , numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione a ferramenta Rede .

4. Atualize a página Web.

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

Parar a gravação de pedidos de rede

Para parar a gravação de pedidos:

1. Na Ferramenta de rede , clique em Parar de gravar o registo de rede (). Fica cinzento para indicar que o DevTools já não está a gravar pedidos.

2. Prima Ctrl+E (Windows, Linux) ou Comando+E (macOS) enquanto a ferramenta rede está em foco.

Limpar pedidos

Para limpar todos os pedidos da tabela Pedidos , na ferramenta Rede , clique no botão Limpar registo de rede ():

Em alternativa, prima Ctrl+L (Windows, Linux, macOS) ou Comando+K (macOS) enquanto a Ferramenta de rede tem o foco.

Veja também:

• Aplicação TODO

Guardar pedidos em carregamentos de páginas

Para guardar pedidos em carregamentos de páginas, na ferramenta Rede , selecione a caixa de verificação Preservar registo :

O DevTools guarda todos os pedidos até desativar a opção Preservar registo.

Veja também:

• Aplicação TODO

Captura de ecrã durante o carregamento de páginas

Pode capturar capturas de ecrã para analisar o que é apresentado para os utilizadores enquanto aguarda que a sua página seja carregada.

Para ativar capturas de ecrã:

1. Aceda a uma página Web, como a aplicação TODO, numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, abra a ferramenta Rede .

4. No canto superior direito da ferramenta Rede , clique no ícone Definições de rede (engrenagem). É apresentada uma linha de caixas de verificação.

5. Selecione a caixa de verificação Capturar capturas de ecrã:

   

Para capturar uma captura de ecrã:

1. Enquanto a Ferramenta de rede estiver focada, prima Ctrl+F5 para atualizar a página. As capturas de ecrã são capturadas durante o carregamento da página e as miniaturas são apresentadas abaixo da linha de caixas de verificação.

   Pode interagir com as capturas de ecrã da seguinte forma.

2. Paire o cursor sobre uma captura de ecrã para apresentar o ponto em que essa captura de ecrã foi capturada. É apresentada uma linha vertical amarela no painel Gráfico de Descrição Geral.

   

3. Clique na miniatura de uma captura de ecrã para filtrar os pedidos que ocorreram após a captura de ecrã.

4. Faça duplo clique numa miniatura de captura de ecrã para ampliar e ver a captura de ecrã.

5. Prima Esc para fechar o visualizador de captura de ecrã.

Pedido XHR de repetição

Para reproduzir um pedido XHR:

1. Aceda a uma página Web, como Demonstração de referência de ferramentas de rede, numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione a ferramenta Rede .

4. Atualize a página Web.

   Na tabela Pedidos da ferramenta rede, são apresentadas linhas para:

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

5. Na página Web de demonstração, clique no botão Enviar um pedido XHR .

   Na tabela Pedidos da ferramenta rede, é adicionada uma data.json linha. A coluna Iniciador lê script.js:20.

6. Na tabela Pedidos , clique com o botão direito do rato no data.json pedido e, em seguida, selecione Reproduzir XHR.

   Em alternativa, selecione o pedido e, em seguida, prima R.

   Na tabela Pedidos da ferramenta rede, é adicionada uma segunda data.json linha. A coluna Initiator (Iniciador ) lê Other (Outro):

   

Para obter informações sobre iniciadores, consulte:

• Apresentar iniciadores e dependências, abaixo.
• Registar atividade de rede em Inspecionar atividade de rede.

Depois de clicar no botão Enviar um pedido XHR da demonstração (o que faz com que o JavaScript envie um pedido), o menuitem Copiar rastreio de pilha é apresentado no menu Copiar para pedidos com o botão direito do rato>. Veja Copiar pedidos de rede para a área de transferência, abaixo.

Alterar o comportamento de carregamento

Emular um visitante pela primeira vez ao desativar a cache do browser

Para emular a forma como um utilizador pela primeira vez experimenta o seu site, ative a caixa de verificação Desativar cache . O DevTools desativa a cache do browser. Esta funcionalidade emula com maior precisão a experiência de um utilizador pela primeira vez, uma vez que os pedidos são servidos a partir da cache do browser em visitas repetidas.

A caixa de verificação Desativar Cache :

Desativar a cache do browser a partir da ferramenta Condições de rede

Na ferramenta Rede , pode abrir a ferramenta Condições de rede no painel Vista Rápida na parte inferior de DevTools e, em seguida, desativar a cache do browser a partir daí:

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

2. Na ferramenta Condições de rede , selecione a caixa de verificação Desativar cache :

   

Veja também:

• Ferramenta de condições de rede

Limpar manualmente a cache do browser

Para limpar manualmente a cache do browser em qualquer altura, clique com o botão direito do rato em qualquer parte da tabela Pedidos e, em seguida, selecione Limpar cache do browser:

Veja também:

• Aplicação TODO

Emular offline

Uma classe de aplicações Web, denominada Progressive Aplicativos Web (PWA), consegue funcionar offline com a ajuda dos trabalhadores de serviços. Poderá considerar útil simular rapidamente um dispositivo sem ligação de dados quando estiver a criar este tipo de aplicação.

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

O menu pendente Offline :

Emular ligações de rede lentas

Para emular rapidamente 4G, 4G lento ou 3G, selecione a predefinição correspondente no menu pendente Limitação na barra de ação na parte superior:

Pode escolher entre predefinições diferentes, tais como:

• Fast 4G
• 4G lento
• 3G
• Offline

Para adicionar as suas próprias predefinições personalizadas, clique no menu Limitação e, em seguida, selecione Adicionar Personalizado>.

É apresentado um ícone de aviso no separador Da ferramenta rede para lembrá-lo de que a limitação está ativada:

Veja também:

• Simular uma ligação de rede mais lenta em Inspecionar atividade de rede.
• Aplicação TODO

Criar um perfil de limitação personalizado

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

Para criar um perfil de limitação personalizado:

1. Aceda a uma página Web, como a página Inspecionar demonstração de Atividade de Rede , numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Selecione a ferramenta Rede .

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

   Em alternativa, selecione Personalizar e controlara Limitação das Definiçõesde DevTools>>.

   É aberta a página Definições de DevTools, com a página Limitação selecionada.

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

   Os valores de exemplo são apresentados abaixo e são utilizados na secção seguinte.

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

7. Na caixa de texto Transferir , introduza 10 (para 10 kbit/s).

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

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

10. Na caixa de texto Perda de Pacotes , introduza 1 (para 1%).

11. Na caixa de texto Comprimento da Fila do Pacote , introduza 10.

12. Selecione a caixa de verificação Reordenação de Pacotes :

    

13. Clique no botão Adicionar.

    É apresentado o perfil de limitação personalizado:

    

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

15. Selecione a ferramenta Rede .

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

    

    É apresentado um ícone de aviso ( de limitação) no separador Rede , para o lembrar de que a limitação está ativada.

Veja também:

• Configure o perfil de limitação de rede personalizado na Limitação.

Limitar ligações WebSocket

Além dos pedidos HTTP, as DevTools podem limitar as ligações WebSocket. Vamos utilizar o perfil de limitação personalizado lento criado na secção anterior para mostrar o efeito de uma ligação WebSocket limitada na sua página Web.

Para observar a limitação do WebSocket:

1. Efetue os passos na secção anterior, Criar um perfil de limitação personalizado.

2. Aceda a uma página que utiliza WebSockets, como WebSocket Tester Online, numa nova janela ou separador.

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

   Se utilizar a página Web WebSocket Tester online , clique no botão Ligar .

   Se não criar uma conta PieSocket para obter um Token de API, a página Web apresenta "Ligação Estabelecida – {"erro":"Chave de api desconhecida"}".

   Se criar uma conta PieSocket para obter um Token de API, a página Web apresenta simplesmente "Ligação Estabelecida".

4. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

5. Em DevTools, na ferramenta Rede , no menu pendente Limitação , selecione Personalizar>10 kbps.

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

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

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

   A consola na página Web WebSocket Tester online apresenta DevTools com limitação.

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

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

   São apresentadas tabulações.

10. Selecione o separador Mensagens (mostrado abaixo).

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

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

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

A partir da Ferramenta de rede , pode abrir a ferramenta Condições de rede no painel Vista Rápida na parte inferior de DevTools e, em seguida, limitar a ligação de rede a partir daí:

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

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

Veja também:

• Ferramenta de condições de rede

Limpar manualmente os cookies do browser

Para limpar manualmente os cookies do browser em qualquer altura, clique com o botão direito do rato em qualquer parte da tabela Pedidos e, em seguida, selecione Limpar cookies do browser.

Substituir cabeçalhos de resposta HTTP

Veja também:

• Substituir recursos da página Web com cópias locais (separador Substituições)
• Substitua ficheiros e cabeçalhos de resposta HTTP em Substituir conteúdo Web e cabeçalhos de resposta HTTP localmente.

Substituir o agente de utilizador

Para substituir manualmente o agente de utilizador:

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

2. Na ferramenta Condições de rede , desmarque a caixa de verificação Utilizar o browser predefinido . Os outros controlos ficam disponíveis.

3. Selecione uma opção de agente de utilizador no menu ou introduza um agente de utilizador personalizado na caixa de texto.

Definir sugestões de cliente do agente de utilizador

Se o seu site utilizar sugestões de cliente do agente de utilizador e quiser testá-las, pode defini-las na ferramenta Condições de rede ou em Emular dispositivos móveis (Emulação do Dispositivo).

Para definir sugestões de cliente do agente de utilizador na ferramenta Condições de rede :

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

2. Na secção Agente de utilizador , desmarque a caixa de verificação Utilizar o browser predefinido e, em seguida, expanda Sugestões de cliente do agente de utilizador:

   

3. Na lista pendente Agente de utilizador , selecione um browser e um dispositivo predefinidos. Em alternativa, aceite o valor predefinido de Personalizado...e introduza informações na caixa de texto Introduzir um agente de utilizador personalizado .

4. Para uma das opções (predefinida ou personalizada), especifique as sugestões do cliente do agente de utilizador da seguinte forma:

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

   Pode definir ou alterar qualquer uma das sugestões do cliente do agente de utilizador; não existem valores necessários.

5. Selecione Atualizar.

6. Para verificar as alterações, clique em Consola e escreva navigator.userAgentData. Expanda os resultados conforme necessário para ver as alterações aos dados do agente do utilizador.

Veja também:

• Sugestões de Cliente do Agente de Utilizador na Deteção do Microsoft Edge a partir do seu site.

Solicitações de pesquisa

Para procurar entre cabeçalhos de pedido, payloads e respostas:

1. Na ferramenta Rede , clique no botão Procurar (). Em alternativa, prima Ctrl+F (Windows, Linux) ou Comando+F (macOS).

   O separador Procurar é aberto no lado esquerdo da ferramenta Rede .

2. Na caixa de texto Localizar , introduza a cadeia de consulta e, em seguida, prima Enter.

   Opcionalmente, clique no botão Maiúsculas/minúsculas para ativar a sensibilidade às maiúsculas e minúsculas. Opcionalmente, clique no botão Expressão regular para ativar expressões regulares.

3. Clique num dos resultados da pesquisa. A ferramenta Rede realça a amarelo o pedido correspondente. A ferramenta Rede também abre o separador Cabeçalhos ou Resposta e realça a cadeia correspondente, se existir.

Para atualizar os resultados da pesquisa, no separador Procurar , clique no botão Atualizar ().

Para limpar os resultados da pesquisa, no separador Procurar , clique no botão Limpar pesquisa ().

Para obter mais informações sobre todas as formas de pesquisa no DevTools, consulte Localizar ficheiros de origem de uma página com a ferramenta de Pesquisa

Filtrar pedidos

Pode filtrar pedidos por propriedades, por tipo ou por tempo, e pode ocultar URLs de dados. A lista pendente Mais filtros contém as seguintes opções e status marcas de verificação:

• Ocultar URLs de dados
• Ocultar URLs de extensão
• Cookies de resposta bloqueados
• Pedidos bloqueados
• Pedidos de terceiros

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

Filtrar pedidos por propriedades

Utilize a caixa de texto Filtrar para filtrar pedidos por propriedades, como o domínio ou o tamanho do pedido.

Se a caixa de texto não for apresentada, é provável que o painel Filtros esteja oculto; consulte Ocultar o painel Filtros, abaixo.

A caixa de texto Filtrar :

Para inverter o filtro, selecione a caixa de verificação Inverter junto à caixa Filtro .

Pode utilizar várias propriedades em simultâneo ao separar cada propriedade com um espaço. Por exemplo, mime-type:image/png larger-than:1K apresenta todos os PNGs com mais de 1 quilobyte. Os filtros de várias propriedades são equivalentes a AND operações. OR as operações não são suportadas.

A lista completa de propriedades suportadas:

Filtrar pedidos por tipo

Para filtrar pedidos por tipo de pedido, clique nos botões na Ferramenta de rede : Todos, Fetch/XHR, Doc, CSS, JS, Font, Img, Media, Manifest, WS (WebSocket), Wasm (WebAssembly) ou 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, abaixo.

Para ativar vários filtros de tipo em simultâneo, prima sem soltar Ctrl (Windows, Linux) ou Comando (macOS) e, em seguida, clique nos filtros.

Filtrar pedidos por hora

Clique e arraste para a esquerda ou para a direita no painel Descrição geral para apresentar apenas os pedidos que estavam ativos durante esse período de tempo. O filtro é inclusivo. Todos os pedidos que estiveram ativos durante a hora realçada são apresentados.

Filtrar todos os pedidos que estavam inativos por volta de 300 ms:

Ocultar URLs de dados

Os URLs de dados são pequenos ficheiros incorporados noutros documentos. Qualquer pedido apresentado na tabela Pedidos que começa com data: é um URL de dados.

Para ocultar os pedidos, desative a caixa de verificação Ocultar URLs de dados :

Ocultar URLs de extensão

Para se concentrar no código que cria, pode filtrar pedidos irrelevantes enviados por extensões que possa ter instalado no Microsoft Edge. Os pedidos de extensão têm URLs que começam com chrome-extension://.

Para ocultar pedidos de extensão, na barra de ação Filtros , selecione o menu pendente Mais filtros e, em seguida, selecione Ocultar URLs de extensão para que seja apresentada uma marca de verificação junto ao mesmo:

A barra de status na parte inferior apresenta o número de pedidos apresentados do total, como 5/10 pedidos.

Mostrar apenas os pedidos com cookies de resposta bloqueados

Para filtrar tudo, exceto os pedidos com cookies de resposta bloqueados por qualquer motivo, na barra de ação Filtros , selecione a lista pendente Mais filtros e, em seguida, selecione Cookies de resposta bloqueados para que seja apresentada uma marca de verificação junto ao mesmo.

Em seguida, para saber por que motivo um cookie de resposta foi bloqueado, selecione o pedido (em Nome), abra o respetivo separador Cookies (à direita) e, em seguida, paire o cursor sobre o ícone de informações ().

Por exemplo:

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

2. Na Barra de endereço, introduza Microsoft.com.

3. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

4. Selecione a ferramenta Rede .

5. Certifique-se de que o botão Todos os filtros está selecionado.

6. Atualize a página Web.

   Muitas mensagens estão listadas na ferramenta Rede .

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

   No menu, é apresentada uma marca de verificação junto a Cookies de resposta bloqueados.

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

   São apresentados pedidos que tenham cookies de resposta bloqueados, como id?d_visid_ver=....

9. Selecione um pedido, como id?d_visid_ver=....

   A barra lateral é aberta, com separadores.

10. Selecione o separador Cookies .

11. Paire o cursor sobre o ícone de informações ().

    A descrição indica, por exemplo: "Esta tentativa de definir um cookie através de um cabeçalho de Set-Cookie foi bloqueada devido às preferências do utilizador."

    

    A barra de status na parte inferior apresenta o número de pedidos apresentados do total.

Além disso, a Ferramenta de rede mostra um ícone de aviso () junto a um pedido com cookies bloqueados devido a sinalizadores ou configuração do Edge. Paire o cursor sobre o ícone para ver uma descrição com uma pista e clique na mesma para aceder à ferramenta Problemas para obter mais informações.

Mostrar apenas pedidos bloqueados

Para filtrar tudo, exceto os pedidos bloqueados, na barra de ação Filtros , selecione Mais filtros Pedidos>bloqueados, para que seja apresentada uma marca de verificação. Para testar isto, pode utilizar a ferramenta de bloqueio de pedidos de rede no painel Vista Rápida na parte inferior de DevTools; veja Bloquear pedidos em Inspecionar atividade de rede.

Por exemplo:

1. Aceda a uma página Web, como a página Inspecionar demonstração de Atividade de Rede , numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione a ferramenta Rede .

4. Atualize a página Web.

   A tabela Pedidos.htmllista , .css, .pnge .js ficheiros.

5. Na lista pendente Mais filtros (com a descrição mostrar apenas/ocultar pedidos), selecione Pedidos bloqueados.

   Na lista pendente, é apresentada uma marca de verificação junto a Pedidos bloqueados.

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

   A tabela Pedidos está vazia, porque o DevTools não está a bloquear nenhum pedido e os pedidos são agora filtrados para mostrar apenas pedidos bloqueados.

7. Prima Esc uma ou duas vezes para que o painel Vista Rápida esteja aberto na parte inferior de DevTools.

8. Na barra de ferramentas Vista Rápida , clique no botão Mais ferramentas () e, em seguida, selecione Bloqueio de pedidos de rede.

   A ferramenta De bloqueio de pedidos de rede é aberta no painel Vista rápida .

9. Na ferramenta Bloqueio de pedidos de rede, clique no botão Adicionar padrão de bloqueio de pedidos de rede ().

10. Na caixa de texto Padrão de texto para bloquear pedidos correspondentes , introduza *.pnge, em seguida, clique no botão Adicionar .

    *.png está listada, com uma marca de verificação.

    Na ferramenta Rede , a tabela Pedidos ainda está vazia, porque ainda não foram bloqueados pedidos ativamente.

11. Atualize a página Web.

    

    • Na página Web de demonstração, em vez de um logótipo do Edge junto ao cabeçalho, é apresentado um ícone de imagem quebrada, juntamente com o texto alternativo da imagem (o logótipo do Microsoft Edge DevTools).

    • Na ferramenta Rede , a tabela Pedidos lista apenas ficheiros .png . A tabela Pedidos realça os pedidos bloqueados como texto vermelho.

    • Na ferramenta Rede, a barra de status na parte inferior apresenta o número de pedidos apresentados do total, como 2/5 pedidos.

Mostrar apenas pedidos de terceiros

Para filtrar tudo, exceto os pedidos com origem que diferem da origem da página, na barra de ação Filtros , selecione Mais filtros pedidos>de terceiros, para que seja apresentada uma marca de verificação. Experimente na página Inspecionar Demonstração da Atividade de Rede .

A barra de status na parte inferior apresenta o número de pedidos apresentados do total.

Ordenar pedidos

Por predefinição, os pedidos na tabela Pedidos são ordenados pela hora de início, mas pode ordenar a tabela com outros critérios.

Ordenar por coluna

Clique no cabeçalho de qualquer coluna na coluna Pedidos para ordenar pedidos por essa coluna.

Ordenar por fase de atividade

A coluna Cascata está desativada por predefinição. Para ativar a coluna Cascata : clique com o botão direito do rato num cabeçalho de tabela Pedidos e, em seguida, selecione o menuite de Cascata simples que não tem um submenu.

Para alterar a forma como a coluna Cascata ordena os pedidos:

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

  • Hora de Início – o primeiro pedido que foi iniciado é colocado na parte superior.

  • Tempo de Resposta – o primeiro pedido que iniciou a transferência é colocado na parte superior.

  • Hora de Fim – o primeiro pedido concluído é colocado na parte superior.

  • Duração Total – o pedido com as definições de ligação mais curtas e o pedido ou resposta são colocados na parte superior.

  • Latência – o pedido que aguardou o tempo mais curto para uma resposta é colocado na parte superior.

Estas descrições partem do princípio de que cada opção é classificada da mais curta para a mais longa. Clique no cabeçalho da coluna Cascata para inverter a ordem.

O seguinte mostra a ordenação da Cascata por duração total. A parte mais clara de cada barra é o tempo despendido à espera e a parte mais escura é o tempo despendido a transferir bytes:

Analisar pedidos

Desde que o DevTools esteja aberto, regista todos os pedidos na ferramenta Rede . Utilize a Ferramenta de rede para analisar pedidos.

Apresentar um registo de pedidos

Utilize a tabela Pedidos para apresentar um registo de todos os pedidos efetuados enquanto o DevTools estiver aberto. Para revelar mais informações sobre cada item, clique ou paire o cursor sobre os pedidos.

A tabela Pedidos apresenta as seguintes colunas por predefinição:

• Nome. O nome do ficheiro do recurso ou um identificador do recurso.
• Status. O código de status HTTP.
• Escreva. O tipo de MIME do recurso pedido.
• Iniciador. Os seguintes objetos ou processos podem iniciar pedidos:
  • Analisador. O analisador html.
  • Redirecionamento. Um redirecionamento HTTP.
  • Script. Uma função JavaScript.
  • Outros. Outro processo ou ação, como navegar para uma página através de uma ligação ou introduzir um URL na Barra de endereço.
• Tamanho. O tamanho combinado dos cabeçalhos de resposta mais o corpo da resposta, conforme fornecido pelo servidor.
• Hora. A duração total, desde o início do pedido até à receção do byte final na resposta.
• Realizado por. Se o pedido foi cumprido pela cache HTTP ou pela função de trabalho de serviço da aplicação.

A coluna Cascata está desativada por predefinição. Para ativar a coluna Cascata , clique com o botão direito do rato num cabeçalho de tabela Pedidos e, em seguida, selecione o menuite de Cascata simples que não tem um submenu.

Adicionar ou remover colunas

Clique com o botão direito do rato no cabeçalho da tabela Pedidos e selecione um nome de coluna para ocultá-lo ou mostrá-lo. As colunas atualmente apresentadas têm marcas de verificação junto às mesmas.

Adicionar colunas personalizadas para cabeçalhos de resposta

Para adicionar uma coluna personalizada à tabela Pedidos :

1. Clique com o botão direito do rato no cabeçalho da tabela Pedidos e, em seguida, selecione Cabeçalhos de Resposta Gerir Colunas> deCabeçalho.

   É aberta a janela de pop-up Gerir Colunas de Cabeçalho .

2. Clique no botão Adicionar cabeçalho personalizado , introduza o nome do cabeçalho personalizado e, em seguida, clique em Adicionar.

   

Agrupar pedidos por frames inline

Se os fotogramas inline numa página iniciarem muitos pedidos, pode tornar o registo de pedidos mais amigável ao agrupá-los.

Para agrupar pedidos por iframes:

1. Aceda a uma página Web, como Demonstração de referência de ferramentas de rede, numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione a ferramenta Rede .

4. Atualize a página Web.

   Na tabela Pedidos da ferramenta rede, são apresentadas linhas para:

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

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

   Muitas linhas são adicionadas na tabela Pedidos :

   

6. Na ferramenta Rede , clique no botão Definições de rede () e, em seguida, selecione a caixa de verificação Agrupar por moldura .

   Na tabela Pedidos, são apresentados nomes de moldura expansíveis.

7. Na tabela Pedidos , clique num triângulo de expansor numa moldura.

   Os pedidos que foram iniciados pela moldura inline são apresentados:

   

Apresentar a relação de temporização dos pedidos

Utilize a coluna Cascata do painel Pedidos para ver as relações de temporização dos pedidos. A organização predefinida da coluna Cascata utiliza a hora de início dos pedidos. Assim, os pedidos que estão mais à esquerda começaram mais cedo do que os pedidos que estão mais à direita.

A coluna Cascata está desativada por predefinição. Para ativar a coluna Cascata , clique com o botão direito do rato num cabeçalho de tabela Pedidos e, em seguida, selecione o menuite de Cascata simples que não tem um submenu.

Para ver as diferentes formas de ordenar a Cascata, veja Ordenar por fase de atividade, acima.

A coluna Cascata do painel Pedidos :

Analisar as mensagens de uma ligação WebSocket

Para ver as mensagens de uma ligação WebSocket:

1. Aceda a uma página Web, como o Websocket Tester Online.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Selecione a ferramenta Rede .

   O botão Todos os filtros está selecionado por predefinição. O painel Rede está vazio e não apresenta mensagens.

4. Atualize a página Web.

   Na tabela Pedidos da ferramenta rede, são listados muitos pedidos.

5. Na parte superior da ferramenta Rede , selecione o botão Filtro de socket, com descrição: WebSocket | Transporte Web | DirectSocket.

   A lista filtrada de pedidos está vazia.

6. Na página Web Websocket Tester online, clique no botão Ligar .

   Se não tiver configurado uma conta e o Token de API, a página apresenta:

   • Ligação Estabelecida
   • {"error":"Unknown api key"} com um triângulo a apontar para baixo; enviado do servidor para o browser.

   Na ferramenta Rede , no separador Mensagens , o pedido é apresentado:

   • channel_123?api_key=...

7. Na lista de pedidos, selecione a ligação WebSocket, como channel_123?api_key=....

   A barra lateral é aberta, com separadores.

8. Selecione o separador Mensagens .

   Se não se registou num Token de API, o separador Mensagens lista a mensagem:

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

9. Na página Web Websocket Tester online, na caixa de texto, altere Hello PieSocket! para Hello world!, e, em seguida, clique no botão Enviar .

   Na página Web, a consola mostra a mensagem Hello world! com um triângulo a apontar para cima; enviado do browser para o servidor.

   Na ferramenta Rede , no separador Mensagens , a tabela mostra as últimas 100 mensagens; neste caso, a mensagem é adicionada:

   • Olá, mundo! com uma seta verde para cima; enviado do browser para o servidor:

Nota: para obter mensagens vermelhas de seta para baixo (ecoadas a partir do servidor), bem como mensagens verdes de seta para cima, terá de:

1. Crie uma conta no site do PieSocket. Isto cria um Token de API.

2. Crie um cluster no site PieSocket.

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

   A página WebSocket Tester online é aberta com os parâmetros de consulta.

4. Clique no botão Ligar .

Para atualizar a tabela Pedidos , no painel Nome , clique novamente no nome da ligação WebSocket.

A tabela Pedidos contém as três colunas seguintes:

• Dados. O payload da mensagem. Se a mensagem for texto simples, é apresentada aqui. Para códigos de opcode binários, esta coluna apresenta o nome e o código do opcode. São suportados os seguintes opcodes:

  • Moldura de Continuação
  • Moldura Binária
  • Fechar Moldura de Ligação
  • Moldura ping
  • Moldura Pong

• Comprimento. O comprimento do payload da mensagem, em bytes.

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

Analisar eventos num fluxo

Para ver os eventos que os servidores transmitem através da API de Obtenção, da API eventSource e do XHR:

1. Aceda a uma página Web que transmite eventos, como a Demonstração de referência da ferramenta rede, numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione a ferramenta Rede .

4. Atualize a página Web.

   Na tabela Pedidos da ferramenta rede, são apresentadas linhas para:

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

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

   Na tabela Pedidos , é adicionada uma sse linha (evento enviado pelo servidor).

6. Selecione o sse pedido (evento enviado pelo servidor).

   A barra lateral é aberta, incluindo um separador EventStream .

7. Selecione o separador EventStream :

   

   É recebida e apresentada uma nova mensagem "olá" uma vez por segundo.

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

Para limpar a lista de eventos capturados, clique no botão Limpar ().

Veja também:

• Utilizar a API de Obtenção
• Eventos enviados pelo servidor – API eventSource.
• XMLHttpRequest - XHR.

Apresentar uma pré-visualização de um corpo de resposta

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

1. Na ferramenta Rede , na tabela Pedidos , na coluna Nome , clique no nome de um pedido.

2. Na barra lateral, selecione o separador Pré-visualizar :

   

O separador Pré-visualizar é essencialmente útil para ver imagens.

Apresentar um corpo de resposta

Para apresentar o corpo da resposta a um pedido:

1. Na tabela Pedidos , na coluna Nome , clique no nome do pedido.

2. Na barra lateral, selecione o separador Resposta :

   

Apresentar cabeçalhos HTTP

Para apresentar dados de cabeçalho HTTP sobre um pedido:

1. Na tabela Pedidos , clique no nome do pedido.

2. Na barra lateral, selecione o separador Cabeçalhos e, em seguida, desloque-se para baixo até às várias secções:

   • Geral
   • Cabeçalhos de Sugestões Antecipadas (opcional)
   • Cabeçalhos de Resposta
   • Cabeçalhos do Pedido

   

Ver origem do cabeçalho HTTP

Por predefinição, o separador Cabeçalhos mostra os nomes dos cabeçalhos alfabeticamente. Para apresentar os nomes dos cabeçalhos HTTP pela ordem em que foram recebidos:

1. Aceda a uma página Web que utiliza XHR, como Remover -ms-high-contrast e adotar cores forçadas baseadas em padrões no Microsoft Edge, numa nova janela ou separador.

2. Aceite cookies no pedido de faixa, se for apresentado.

   Nas regiões em que o Regulamento Geral sobre a Proteção de Dados (RGPD) é imposto, este site mostra uma faixa de cookies e não envia um collect pedido (abaixo) a menos que aceite cookies na faixa.

3. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

4. Selecione a ferramenta Rede .

5. Atualize a página Web.

   Na tabela Pedidos , são listados muitos pedidos.

6. Clique no botão vermelho Parar gravação do registo de rede () na parte superior.

7. Na tabela Pedidos , clique na coluna Nome para ordenar os pedidos alfabeticamente e, em seguida, selecione um pedido de recolha .

   A barra lateral é aberta, com separadores.

8. Selecione o separador Cabeçalhos :

   

9. Selecione a caixa de verificação Raw junto à secção Cabeçalhos de Resposta ou Cabeçalhos de Pedido .

Veja também:

• Apresentar cabeçalhos HTTP, acima.

Aviso de cabeçalhos provisórios

Por vezes, o separador Cabeçalhos mostra a mensagem de aviso Cabeçalhos provisórios. Isto pode dever-se aos seguintes motivos:

• O pedido não foi enviado através da rede, mas foi servido a partir de uma cache local, que não armazena os cabeçalhos de pedido originais.
• O recurso de rede não é válido.
• Devido a razões de segurança.

Suponha que o pedido não foi enviado através da rede, mas foi servido a partir de uma cache local, que não armazena os cabeçalhos de pedido originais. Neste caso, pode selecionar a caixa de verificação Desativar cache na parte superior da ferramenta Rede para ver os cabeçalhos de pedido completos. Por exemplo:

1. Aceda à página Inspecionar Demonstração da Atividade de Rede .

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Selecione a ferramenta Rede .

4. Atualize a página Web.

5. Selecione o getstarted.js pedido de rede.

   A secção Cabeçalhos de Pedido apresenta a mensagem: Os cabeçalhos provisórios são apresentados. Desative a cache para ver os cabeçalhos completos.

   

6. Selecione a caixa de verificação Desativar cache na parte superior da ferramenta Rede .

7. Atualize a página Web.

8. Selecione o getstarted.js pedido de rede.

   A secção Cabeçalhos de Pedido já não apresenta a mensagem; são apresentados os cabeçalhos de pedido completos.

Veja também:

• Emula um visitante pela primeira vez ao desativar a cache do browser, acima.

Ver payload do pedido (parâmetros de cadeia de consulta e dados de formulário)

Para ver o payload de um pedido HTTP (parâmetros de cadeia de consulta e dados de formulário), selecione um pedido na tabela Pedidos e, em seguida, selecione o separador Payload na barra lateral, da seguinte forma:

1. Aceda a uma página Web, como Demonstração de referência de ferramentas de rede, numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione a ferramenta Rede .

4. Atualize a página Web.

   Na tabela Pedidos da ferramenta rede, são apresentadas linhas para:

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

5. Na página Web de demonstração, clique no botão Enviar dados do formulário .

   Na tabela Pedidos da ferramenta rede, é adicionada uma linha:

   • form-data-endpoint?hasfile=true

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

   A barra lateral é aberta, incluindo um separador Payload .

7. Selecione o separador Payload .

   O payload do pedido é apresentado, incluindo uma secção Parâmetros de Cadeia de Consulta e uma secção Dados do Formulário :

No separador Consola de 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 Método Não Permitido é apresentado na Consola, porque não existe nenhum form-data-endpoint processador POST no servidor de demonstração. O erro é esperado, porque github.io alojamento não executa servidores de aplicações, apenas ficheiros estáticos.

Ver origem do payload

Por predefinição, a ferramenta Rede mostra o payload numa forma legível por humanos.

Para, em vez disso, ver as origens de parâmetros de cadeia de consulta ou dados de formulário:

1. Efetue os passos na secção anterior, acima.

   No separador Payload , a secção Parâmetros da Cadeia de Consulta mostra o payload num formato legível por humanos, para hasfile. A secção Dados do Formulário mostra o payload numa forma legível por humanos, para username, timestampe file:

   

2. Junto ao cabeçalho da secção Parâmetros da Cadeia de Consulta , clique no botão Ver origem .

3. Junto ao cabeçalho da secção Dados do Formulário , clique no botão Ver origem .

   São apresentadas as informações de origem do payload:

   

Apresentar parâmetros de cadeia de consulta codificadas com URL

Para apresentar parâmetros de cadeia de consulta num formato legível por humanos, mas com codificações preservadas:

1. Aceda a uma página Web que utiliza parâmetros de cadeia de consulta, como Demonstração de referência da ferramenta de rede, numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione a ferramenta Rede .

4. Atualize a página Web.

   A tabela Pedidos.htmllista , .css, .jse .png ficheiros.

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

   A tabela Pedidos 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 separadores.

7. Na barra lateral, selecione o separador Payload .

   A secção Parâmetros da Cadeia de Consulta apresenta o URL descodificado, como: https://contoso.com/àéèôçл

   

8. Na secção Parâmetros da Cadeia de Consulta , clique no botão Ver codificado por URL .

   O URL é agora apresentado com carateres codificados (como %3A e %2F); e a etiqueta do botão muda para Ver descodificado:

   

9. Clique no botão Ver descodificado .

   O URL é novamente apresentado com carateres descodificados, como: https://contoso.com/àéèôçлe a etiqueta do botão muda novamente para Ver codificado por URL.

Apresentar cookies

Para apresentar os cookies enviados no cabeçalho HTTP de um pedido:

1. Na tabela Pedidos , clique no nome do pedido.

2. Na barra lateral, selecione o separador Cookies :

   

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

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

Apresentar a discriminação de temporização de um pedido

Para apresentar a discriminação da temporização de um pedido:

1. Na tabela Pedido, clique no nome do pedido.

2. Na barra lateral, selecione o separador Temporização .

   

Para obter uma forma mais rápida de aceder aos dados, veja Pré-visualizar uma discriminação de temporização.

Para obter mais informações sobre cada uma das fases que podem ser apresentadas no painel Temporização, veja Explicação das fases de divisão da temporização.

Pré-visualizar uma divisão de temporização

Para apresentar uma pré-visualização da discriminação de temporização de um pedido, na coluna Cascata da tabela Pedidos , paire o cursor sobre a entrada do pedido.

A coluna Cascata está desativada por predefinição. Para ativar a coluna Cascata , clique com o botão direito do rato num cabeçalho de tabela Pedidos e, em seguida, selecione o menuite de Cascata simples que não tem um submenu.

Para ver os dados sem pairar o cursor, veja a parte superior da secção atual, Apresentar a discriminação da temporização de um pedido.

Explicação das fases de divisão do tempo

Cada uma destas fases pode aparecer no separador Temporização :

• Colocação em fila. As filas do browser solicitam quando qualquer um dos seguintes casos é verdadeiro

  • Existem pedidos de prioridade superior.
  • Já existem seis ligações TCP abertas para esta origem, que é o limite. Aplica-se apenas a HTTP/1.0 e HTTP/1.1.
  • O browser está a alocar espaço brevemente na cache do disco.

• Parado. O pedido pode estar parado por qualquer uma das razões descritas em Colocação em Fila.

• Pesquisa DNS. O browser está a resolver o endereço IP do pedido.

• Ligação inicial. O browser está a estabelecer uma ligação, incluindo handshakes e repetições TCP e a negociar uma SSL (Secure Socket Layer).

• Negociação por procuração. O browser está a negociar o pedido com um servidor proxy.

• Pedido enviado. O pedido está a ser enviado.

• Preparação do ServiceWorker. O browser está a iniciar a função de trabalho de serviço.

• Pedido ao ServiceWorker. O pedido está a ser enviado para a função de trabalho de serviço.

• A aguardar (TTFB). O browser está a aguardar o primeiro byte de uma resposta. TTFB significa Time To First Byte. Esta temporização inclui um percurso de ida e volta de latência e o tempo que o servidor demorou a preparar a resposta.

• Transferência de Conteúdo. O browser está a receber a resposta.

• A receber Push. O browser está a receber dados para esta resposta através de HTTP/2 Server Push.

• Push de Leitura. O browser está a ler os dados locais que foram recebidos anteriormente.

Apresentar iniciadores e dependências

Para apresentar os iniciadores e as dependências de um pedido, mantenha premida a tecla Shift e paire o cursor sobre o pedido na tabela Pedidos .

• Os pedidos que iniciaram o pedido pairado são apresentados a verde.
• As dependências dos pedidos pairados são apresentadas a vermelho.

Quando a tabela Pedidos é ordenada cronologicamente, se pairar sobre uma linha, a linha anterior apresenta um pedido verde. O pedido verde é o iniciador da dependência. Se for apresentado outro pedido verde na linha anterior, esse pedido superior será o iniciador do iniciador. E assim por diante.

Apresentar eventos de carregamento

As DevTools apresentam a temporização dos DOMContentLoaded eventos e load em vários locais na ferramenta Rede :

• No painel Descrição Geral com linhas verticais.

• Na coluna Cascata da tabela Pedido com linhas verticais. A coluna Cascata está desativada por predefinição. Para ativar a coluna Cascata , clique com o botão direito do rato num cabeçalho de tabela Pedidos e, em seguida, selecione o menuite de Cascata simples que não tem um submenu.

• No painel Resumo , na parte inferior da ferramenta Rede , com etiquetas de temporização.

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

Apresentar o número total de pedidos

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

Atenção: este número apenas monitoriza os pedidos que foram registados desde que o DevTools foi aberto. Se outros pedidos ocorrerem antes de as DevTools serem abertas, esses pedidos não serão contabilizados.

Apresentar o tamanho total da transferência

O tamanho total da transferência de pedidos está listado no painel Resumo , na parte inferior da ferramenta Rede .

Atenção: este número apenas monitoriza os pedidos que foram registados desde que o DevTools foi aberto. Se outros pedidos ocorrerem antes da abertura das DevTools, os pedidos anteriores não serão contabilizados.

Para verificar o tamanho dos recursos após o browser descomprimir cada item, veja Apresentar o tamanho descomprimido de um recurso.

Apresentar o rastreio de pilha que causou um pedido

Depois de uma instrução JavaScript pedir um recurso, paire o cursor sobre a coluna Iniciador para apresentar o rastreio de pilha que antecede o pedido.

Apresentar o tamanho descomprimido de um recurso

Para ver o tamanho transferido e o tamanho descomprimido de um recurso ao mesmo tempo:

1. No canto superior direito da ferramenta Rede , clique no ícone Definições de rede (engrenagem). É apresentada uma linha de caixas de verificação.

2. Ative a caixa de verificação Linhas de pedidos grandes.

3. Examine a coluna Tamanho na tabela Pedido. O valor superior é o tamanho transferido e o valor inferior é o tamanho do recurso depois de o browser o descomprimir:

   

Exportar dados de pedidos

Pode exportar ou copiar a lista de pedidos, com filtros aplicados, de várias formas descritas a seguir.

Guardar todos os pedidos de rede num ficheiro HAR

HAR (HTTP Arquivo) é um formato de ficheiro utilizado 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. Veja Analisador HAR.

Para reduzir as possibilidades de fugas acidentais de informações confidenciais, por predefinição, pode exportar o registo de rede "limpa" no formato HAR que exclui informações confidenciais, como Cookie, Set-Cookiee Authorization cabeçalhos. Se necessário, também pode exportar o registo com dados confidenciais.

Para guardar todos os pedidos de rede num ficheiro HAR, sem dados confidenciais:

1. Aceda a uma página Web, como a página Inspecionar demonstração de Atividade de Rede , numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione a ferramenta Rede .

4. Atualize a página Web.

5. Clique com o botão direito do rato em qualquer pedido na tabela Pedidos e, em seguida, selecione Copiar>Tudo como HAR (sanitized):

   

   Em alternativa, na barra de ação na parte superior da ferramenta Rede , clique no botão Exportar HAR (sanitized) ().

O DevTools guarda todos os pedidos que ocorreram desde que abriu o DevTools para o ficheiro HAR.

Não pode filtrar pedidos e não pode guardar um único pedido.

Para guardar todos os pedidos de rede num ficheiro HAR, incluindo dados confidenciais:

1. Em DevTools, selecione Personalizadas e controle Definições de DevTools>.

   É aberta a páginaPreferências> de Definições.

2. Desloque-se para baixo até à secção Rede .

3. Selecione a caixa de verificação Permitir para gerar HAR com dados confidenciais.

4. Clique no botão Fechar ().

5. Na ferramenta Rede , clique com o botão direito do rato em qualquer pedido na tabela Pedidos e, em seguida, selecione Copiar>Tudo como HAR (com dados confidenciais).

   Em alternativa, na barra de ação na parte superior, clique no botão Exportar HAR (sanitizado ou com dados confidenciais) () e, em seguida, selecione Exportar HAR (com dados confidenciais):

   

Importar um ficheiro HAR para DevTools para análise

Depois de ter um ficheiro HAR, pode importá-lo novamente para DevTools para análise com o HAR Analyzer.

Para importar um ficheiro HAR para DevTools para análise:

• Na barra de ação na parte superior da ferramenta Rede , clique no botão Importar ficheiro HAR ().

• Em alternativa, arraste o ficheiro HAR para a tabela Pedidos .

A Ferramenta de rede lê e mostra os iniciadores para os pedidos que são importados do ficheiro HAR. Para iniciadores, veja Apresentar um registo de pedidos acima.

Copiar pedidos de rede para a área de transferência

Na coluna Nome da tabela Pedidos , clique com o botão direito do rato num pedido, paire o cursor sobre Copiar e, em seguida, selecione uma das seguintes opções.

Para copiar um único pedido, a respetiva resposta ou o respetivo rastreio de pilha:

Para copiar todos os pedidos:

Para copiar um conjunto filtrado de pedidos, aplique um filtro ao registo de rede, clique com o botão direito do rato num pedido e, em seguida, selecione:

Veja também:

• Filtrar pedidos, acima.

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

Para copiar os dados JSON formatados de uma resposta JSON:

1. Na tabela Pedidos , clique no nome do pedido que levou a uma resposta JSON.

2. Na barra lateral, selecione o separador Pré-visualizar .

3. Clique com o botão direito do rato na primeira linha da pré-visualização da resposta JSON formatada e, em seguida, selecione Copiar valor.

   

   Agora pode colar o valor em qualquer editor.

Copiar valores de propriedades de pedidos de rede para a área de transferência

Para copiar valores de propriedade de pedidos de rede para a área de transferência:

1. Na tabela Pedido, clique no nome do pedido.

2. Na barra lateral, selecione o separador Payload :

3. Expanda uma das secções seguintes.

   • Payload do pedido (JSON)
   • Dados do Formulário
   • Parâmetros da Cadeia de Consulta
   • Cabeçalhos do Pedido
   • Cabeçalhos de Resposta

4. Clique com o botão direito do rato num valor e, em seguida, selecione Copiar valor. Agora pode colar o valor em qualquer editor.

Alterar o esquema da ferramenta Rede

Pode expandir ou fechar secções da IU da Ferramenta de rede para focar informações importantes.

Ocultar o painel Filtros

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

Utilizar linhas de pedidos grandes

Utilize linhas de pedidos grandes quando quiser mais espaço em branco na tabela de pedidos de rede. Algumas colunas também fornecem um pouco mais de informações ao utilizar linhas grandes; Por exemplo:

• O valor inferior da coluna Tamanho é o tamanho descomprimido de um pedido.

• A coluna Prioridade (não apresentada por predefinição) mostra a prioridade inicial (valor inferior) e final (valor superior).

Para ativar linhas grandes:

1. Aceda a uma página Web, como a página Inspecionar demonstração de Atividade de Rede , numa nova janela ou separador.

2. Clique com o botão direito do rato na página Web e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

3. Em DevTools, selecione a ferramenta Rede .

4. Atualize a página Web.

   Os pedidos são apresentados em linhas pequenas.

5. Na ferramenta Rede , clique no botão Definições de rede () e, em seguida, selecione a caixa de verificação Linhas de pedidos grandes.

   Os pedidos são apresentados em linhas grandes:

   

Ocultar o painel Descrição Geral

Por predefinição, o DevTools apresenta o painel Descrição Geral . Para ocultar o painel Descrição Geral , desmarque a caixa de verificação Mostrar Descrição Geral .

Confira também

• Inspecionar a atividade de rede – instruções passo a passo e introdução à Ferramenta de rede .

Páginas Web de demonstração:

• Inspecionar Atividade de Rede
• Demonstração de referência da ferramenta de rede
• Aplicação TODO

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.