Referência de recursos de console

Este artigo é um esboço dos recursos do Console.

Conteúdo:

• Abrir o Console
  • Abra a ferramenta Console na Barra de Atividades
  • Abra a ferramenta Console na barra de ferramentas de Exibição Rápida
  • Abra o Console do Menu de Comando
  • Abrir configurações do Console
  • Abra a barra lateral para filtrar mensagens
• Exibir mensagens
  • Desativar o agrupamento de mensagens
  • Solicitações de Log XHR e Fetch
  • Persistir mensagens entre cargas de página
  • Ocultar erros de rede
  • Explicar erros e avisos do console usando Copilot no Edge
• Filtrar mensagens
  • Filtrar mensagens do navegador
  • Filtrar por nível de log
  • Filtrar mensagens por URL de script
    • Inverter o filtro com um filtro de URL negativo
    • Exibir mensagens de um único script usando a barra lateral
  • Filtrar mensagens de diferentes contextos JavaScript
  • Filtrar mensagens usando um padrão de expressão regular
• Executar JavaScript
  • Executar expressões novamente usando o histórico do Console
  • Assista ao valor de uma expressão em tempo real usando uma expressão ao vivo
  • Desabilitar a avaliação de expressões JavaScript à medida que você digita
  • Desativar o preenchimento automático do histórico
  • Selecione um contexto para executar expressões JavaScript
• Limpar o Console

Abrir o Console

Você pode abrir a ferramenta Console na Barra de Atividades ou na barra de ferramentas Modo de Exibição Rápida .

Abra a ferramenta Console na Barra de Atividades

Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS). O DevTools é aberto, com a guia da ferramenta Console selecionada na Barra de Atividades:

Abra a ferramenta Console na barra de ferramentas de Exibição Rápida

Para abrir a ferramenta Console na barra de ferramentas de Exibição Rápida , na parte inferior da janela DevTools, pressione Esc. Se a barra de ferramentas do Modo de Exibição Rápida estiver oculta anteriormente, ela será exibida:

Ou clique em Personalizar e controlar DevTools (...) >Alterne o painel Modo de Exibição Rápida.

Abra o Console do Menu de Comando

Para abrir a ferramenta Console do Menu de Comando:

1. Pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS).

   Inicialmente, o Menu de Comando é aberto com um > caractere pré-endereçado à caixa de texto.

2. Digite Mostrar Console e selecione uma das opções Mostrar Console :

   • Para abrir o Console na Barra de Atividades, selecione a opção com o selo Painel ao lado dele.
   • Para abrir o Console na barra de ferramentas de Exibição Rápida , selecione a opção com o selo Modo de Exibição Rápida ao lado dele.

   

Para saber mais sobre o Menu de Comando, consulte Executar comandos no Menu de Comando.

Abrir configurações do Console

Para alterar as configurações da ferramenta Console , clique no botão Configurações do Console (). A seção configurações é exibida:

Abra a barra lateral para filtrar mensagens

Para exibir a barra lateral no Console, para filtrar mensagens, clique em Mostrar barra lateral do console (). A barra lateral é exibida:

Para saber mais sobre como filtrar mensagens na ferramenta Console , consulte Filtrar mensagens.

Exibir mensagens

Estas seções a seguir descrevem recursos que mudam a forma como as mensagens são apresentadas na ferramenta Console . Para obter um passo a passo prático, consulte Inspecionar e filtrar informações na página da Web atual na visão geral do Console.

Desativar o agrupamento de mensagens

Por padrão, o Console agrupa mensagens semelhantes. Por exemplo, se várias mensagens subsequentes forem registradas, apenas uma mensagem será exibida no Console. A mensagem inclui uma contagem de quantas vezes a mensagem foi registrada e você pode expandir a mensagem para ver todas as instâncias.

Para desativar o comportamento de agrupamento de mensagens padrão do Console, clique no botão Configurações do ) e selecione a caixa de seleção Agrupar mensagens semelhantes no console .

Solicitações de Log XHR e Fetch

Para registrar todas as solicitações de rede disparadas pelas XMLHttpRequest APIs javaScript e Fetch :

1. Abra a página da Web de demonstração Inspecionar Demonstração de Atividade de Rede em uma nova janela ou guia.

2. Na ferramenta Console , clique no botão Configurações do Console () e, em seguida, eleja a caixa de seleção Log XMLHttpRequests .

3. Na página da Web renderizada, clique no botão Obter Dados . Isso dispara uma Fetch solicitação de API e o Console registra os detalhes da solicitação e da resposta:

   

Persistir mensagens entre cargas de página

Quando você carrega uma nova página da Web, as mensagens no Console são desmarcadas. Para persistir mensagens entre cargas de página, clique no botão Configurações do Console () e selecione a caixa de seleção Preservar log .

Ocultar erros de rede

Por padrão, a ferramenta Console registra erros de rede:

O erro mostrado acima é devido a uma resposta HTTP com o código status de 404.

Para ocultar erros de rede, clique no botão Configurações do Console () e selecione a caixa de seleção Ocultar rede .

Explicar erros e avisos do console usando Copilot no Edge

Ao inspecionar uma página da Web com o DevTools, muitas vezes você vê erros e avisos na ferramenta Console . Esses erros e avisos às vezes podem ser difíceis de entender e corrigir. Ao usar o recurso Explicar esse erro , você obtém mais informações sobre o erro ou aviso no Copilot no Edge:

Para saber mais sobre esse recurso, confira Explicar erros e avisos do Console usando Copilot no Edge.

Filtrar mensagens

Há várias maneiras de filtrar mensagens no Console.

Filtrar mensagens do navegador

Para exibir apenas mensagens provenientes do JavaScript da página da Web:

1. Abra a página da Web de demonstração PWAmp em uma nova janela ou guia e clique no botão Reproduzir .

   As mensagens de logs da página da Web de demonstração para o Console e várias mensagens do navegador também são registradas:

   

2. Na ferramenta Console , para exibir a barra lateral, clique em Mostrar barra lateral do console ().

3. Na barra lateral, clique em 3 mensagens de usuário. O número de mensagens de usuário pode variar dependendo do número de mensagens que a página da Web registra.

   A ferramenta Console exibe apenas as mensagens que os logs da página da Web e as mensagens do navegador estão ocultas:

   

Filtrar por nível de log

O DevTools atribui a cada mensagem registrada na ferramenta Console um dos quatro níveis de gravidade:

• Error
• Info
• Verbose
• Warning

Os quatro níveis de gravidade se aplicam a:

• Mensagens que você registra na página da Web usando console métodos como console.log(), console.error()e console.warn().
• Mensagens que o navegador registra.

Você pode ocultar qualquer nível de mensagens em que não esteja interessado. Por exemplo, se você estiver interessado apenas em Error mensagens, poderá ocultar os outros três níveis.

Para filtrar mensagens por nível:

1. Na barra de ferramentas da ferramenta Console , clique na lista suspensa nível de log .

   Se a lista suspensa não estiver disponível, primeiro esconda a barra lateral clicando em Ocultar barra lateral do console ().

2. Na lista suspensa, habilite ou desabilite qualquer um dos Verboseníveis , Info, Warningsou Errors :

   

Filtrar mensagens por URL de script

Para filtrar mensagens pela URL do script que registrou as mensagens, use a caixa de texto Filtrar :

1. Abra a página da Web de demonstração PWAmp em uma nova janela ou guia. Mensagens de vários scripts são registradas no Console.

2. Na barra de ferramentas da ferramenta Console , clique na caixa de texto Filtrar e digite url:. Uma lista suspensa que contém as URLs dos scripts que registraram mensagens é exibida:

   

3. Selecione a URL do script no qual você deseja se concentrar. A ferramenta Console exibe apenas mensagens desse script:

   

Você não precisa escolher na lista de URLs que a ferramenta Console fornece na lista suspensa Filtro . Você pode digitar a URL ou parte da URL pela qual deseja filtrar. Por exemplo, se https://example.com/a.js e https://example.com/b.js estiverem registrando mensagens, url:example.com permite que você se concentre nas mensagens desses dois scripts.

Inverter o filtro com um filtro de URL negativo

Para ocultar mensagens registradas de um script, na caixa de texto Filtrar , digite -url: seguido pela URL ou parte da URL do script. Por exemplo, para ocultar mensagens de https://example.com/a.js, digite -url:example.com/a.js.

Exibir mensagens de um único script usando a barra lateral

Para exibir mensagens de um único script, usando a barra lateral:

1. Para exibir a barra lateral no Console, clique em Mostrar barra lateral do console (). A barra lateral é exibida.

2. Expanda a seção 3 mensagens de usuário . O número pode variar dependendo do número de mensagens que a página da Web registra. A lista de scripts que registraram mensagens é exibida.

3. Selecione o script de script que contém as mensagens nas quais você deseja se concentrar. O Console exibe apenas mensagens desse script:

   

Filtrar mensagens de diferentes contextos JavaScript

Por padrão, a ferramenta Console exibe mensagens de todos os contextos JavaScript que estão em execução na página da Web. Isso pode incluir mensagens de elementos entre domínios <iframe> inseridos na página da Web ou trabalhadores de serviço que estão em execução em segundo plano.

Para exibir apenas mensagens de um contexto JavaScript:

1. Clique no botão Configurações do ). A seção configurações é exibida.

2. Selecione a caixa de seleção Somente contexto selecionado . Somente as mensagens registradas pelo contexto javaScript superior são exibidas no Console.

3. Para escolher um contexto de diferença, na barra de ferramentas da ferramenta Console , clique na lista suspensa de contexto JavaScript e selecione o contexto no qual você deseja se concentrar:

   

Para saber mais sobre como selecionar outro contexto JavaScript, consulte Selecionar um contexto para executar expressões JavaScript.

Filtrar mensagens usando um padrão de expressão regular

Para exibir apenas as mensagens que correspondem a um padrão de expressão regular:

1. Na barra de ferramentas da ferramenta Console , clique na caixa de texto Filtrar .

2. Digite um padrão de expressão regular, como /.*\.mp3$/ para corresponder mensagens que terminam com .mp3.

   O Console só mostra a mensagem que corresponde ao padrão de expressão regular:

Executar JavaScript

Esta seção contém recursos relacionados à execução do JavaScript no Console. Para obter um passo a passo prático, consulte Executar JavaScript no Console.

Executar expressões novamente usando o histórico do Console

Para executar uma expressão JavaScript que você executou anteriormente no Console:

1. Pressione Seta para Cima para percorrer o histórico das expressões JavaScript que você executou anteriormente.

2. Pressione Enter para executar a expressão novamente.

Assista ao valor de uma expressão em tempo real usando uma expressão ao vivo

Para watch o valor de uma expressão JavaScript em tempo real, em vez de executar a expressão repetidamente, crie uma expressão ao vivo:

1. Na barra de ferramentas da ferramenta Console , clique no botão Criar expressão ao vivo (). A caixa de texto Expressão é exibida abaixo da barra de ferramentas.

2. Insira uma expressão JavaScript e clique fora da caixa de texto Expressão . A nova expressão e seu valor aparecem na parte superior da ferramenta Console .

Para obter mais informações, consulte Monitorar alterações no JavaScript usando Expressões Dinâmicas.

Desabilitar a avaliação de expressões JavaScript à medida que você digita

Por padrão, a ferramenta Console exibe uma visualização do valor de uma expressão, conforme você digita a expressão JavaScript no Console.

Para desativar a visualização ao vivo à medida que você digita:

1. Clique no botão Configurações do ).

2. Desmarque a caixa de seleção Avaliação ansiosa .

Desativar o preenchimento automático do histórico

Quando você digita uma expressão JavaScript na ferramenta Console , uma janela pop-up de preenchimento automático é exibida. A janela pop-up de preenchimento automático contém:

• Sugestões de objetos JavaScript globais e funções que correspondem aos caracteres que você digitou.
• Sugestões de expressões JavaScript que você executou anteriormente.

As sugestões de expressões JavaScript que você executou anteriormente são prefixadas com o > caractere e aparecem na parte inferior da janela de preenchimento automático:

Para parar de exibir sugestões de suas expressões anteriormente executadas:

1. Clique no botão Configurações do ).

2. Desmarque a caixa de seleção Autocompletar do histórico .

Selecione um contexto para executar expressões JavaScript

As páginas da Web têm um contexto de navegação main em que o JavaScript da página da Web é executado. No entanto, as páginas da Web podem ter contextos JavaScript adicionais, como elementos entre domínios <iframe> inseridos na página da Web ou trabalhadores de serviço em execução em segundo plano.

Por padrão, a lista suspensa de contexto JavaScript localizada na barra de ferramentas da ferramenta Console está definida como superior, o que representa o contexto de navegação da página da Web main:

Qualquer expressão JavaScript executada na ferramenta Console é avaliada no contexto selecionado na lista suspensa de contexto JavaScript .

Para executar expressões JavaScript em um contexto diferente, como dentro de um elemento entre domínios <iframe> , clique na lista suspensa de contexto JavaScript e selecione outro contexto de navegação.

Limpar o Console

Para limpar o Console, use qualquer uma das seguintes abordagens:

• Clique no botão Limpar console ().

• Clique com o botão direito do mouse em uma mensagem e selecione Limpar console.

• Digite clear() na ferramenta Console e pressione Enter.

• Chame console.clear() do JavaScript da página da Web.

• Pressione Ctrl+L enquanto a ferramenta Console está em foco.

Confira também

• Registrar mensagens na ferramenta Console – Como filtrar mensagens de log, como Informações, Avisos e Erros no Console.
• Introdução à execução do JavaScript no Console – Etapas para orientá-lo através da emissão de instruções e expressões JavaScript no Console.
• Referência de API do objeto console – Funções e expressões que você pode inserir no Console para gravar mensagens no Console, como console.log().
• Funções e seletores do utilitário de ferramenta de console – funções de conveniência que você pode inserir na ferramenta Console , comomonitorEvents().

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