Referência de recursos do console

Este artigo é uma descriçã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 Visualização Rápida
  • Abra o Console no Menu de Comando
  • Abrir configurações do Console
  • Abrir a barra lateral para filtrar mensagens
• Exibir mensagens
  • Desabilitar agrupamento de mensagens
  • Registrar solicitações XHR e Fetch
  • Persistir mensagens em carregamentos de página
  • Ocultar erros de rede
  • Explicar erros e avisos do Console usando o Copilot no Edge
• Filtrar mensagens
  • Filtrar mensagens do navegador
  • Filtrar por nível de log
  • Filtrar mensagens por URL de script
    • Reverter o filtro com um filtro de URL negativo
    • Exibir mensagens de um único script usando a barra lateral
  • Filtrar mensagens de contextos JavaScript diferentes
  • Filtrar mensagens usando um padrão de expressão regular
• Executar JavaScript
  • Executar expressões novamente usando o Histórico do console
  • Observar o valor de uma expressão em tempo real usando uma expressão ao vivo
  • Desabilitar a avaliação de expressões JavaScript ao digitar
  • Desativar o Preenchimento Automático no 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 de Visualizaçã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 Visualização Rápida

Para abrir a ferramenta Console na barra de ferramentas de Visualização Rápida , na parte inferior da janela do DevTools, pressione Esc. Se a barra de ferramentas Visualização Rápida tiver sido ocultada anteriormente, ela aparecerá:

Ou clique em Personalizar e controlar o painel de Visualização Rápida do DevTools (...). >

Abra o Console no Menu de Comando

Para abrir a ferramenta Console no Menu de Comando:

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

   O Menu de Comando é aberto inicialmente com um > caractere anexado à sua caixa de texto.

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

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

   

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 de configurações é exibida:

Abrir 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

As seções a seguir descrevem os recursos que alteram a forma como as mensagens são apresentadas na ferramenta Console . Para obter instruções práticas, confira Inspecionar e filtrar informações na página da Web atual em Visão geral do console.

Desabilitar 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 padrão de agrupamento de mensagens do console, clique no botão Configurações do console ( Configurações do console) e marque a caixa de seleção Agrupar mensagens semelhantes no console .

Registrar solicitações XHR e Fetch

Para registrar em log todas as solicitações de rede acionadas pelas XMLHttpRequest APIs e Fetch JavaScript:

1. Abra a página da demonstração Inspecione a demonstração da atividade de rede em uma nova janela ou guia.

2. Na ferramenta Console , clique no botão Configurações do Console () e marque a caixa de seleção Registrar 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 em carregamentos de página

Quando você carrega uma nova página da Web, as mensagens no Console são apagadas. Para persistir mensagens em carregamentos de página, clique no botão Configurações do Console () e marque 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 de status de 404.

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

Explicar erros e avisos do Console usando o Copilot no Edge

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

Para saber mais sobre esse recurso, consulte Explicar erros e avisos do console usando o 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 .

   A página da Web de demonstração registra mensagens no 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 do usuário pode variar de acordo com o número de mensagens que a página da Web registra.

   A ferramenta Console exibe apenas as mensagens que a página da Web registra e as mensagens do navegador ficam 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 nas quais 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 oculte a barra lateral clicando em Ocultar barra lateral do console ().

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

   

Filtrar mensagens por URL de script

Para filtrar mensagens pela URL do script que as registrou, 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 Filtro e digite url:. Uma lista suspensa contendo 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 dela, pela qual deseja filtrar. Por exemplo, se https://example.com/a.js e https://example.com/b.js estão registrando mensagens, url:example.com permite que você se concentre nas mensagens desses dois scripts.

Reverter o filtro com um filtro de URL negativo

Para ocultar mensagens registradas de um script, na caixa de texto Filtro , 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 de 3 mensagens do usuário . O número pode variar de acordo com o 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 contextos JavaScript diferentes

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

Para exibir apenas mensagens de um contexto JavaScript:

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

2. Marque 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 diferente, 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 corresponderem a um padrão de expressão regular:

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

2. Digite um padrão de expressão regular, de modo a /.*\.mp3$/ corresponder às mensagens que terminam com .mp3.

   O Console mostra apenas 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.

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

Para observar o valor de uma expressão JavaScript em tempo real, em vez de executar a expressão repetidamente, crie uma expressão ativa:

1. Na barra de ferramentas da ferramenta Console , clique no botão Criar expressão ao vivo (). A caixa de texto Expressão aparece 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 ao digitar

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

Para desativar a visualização dinâmica enquanto digita:

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

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

Desativar o Preenchimento Automático no 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 e funções JavaScript globais que correspondem aos caracteres digitados.
• Sugestões de expressões JavaScript que você executou anteriormente.

As sugestões para 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 executadas anteriormente:

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

2. Desmarque a caixa de seleção Preenchimento Automático do histórico .

Selecione um contexto para executar expressões JavaScript

As páginas da Web têm um contexto de navegação principal em que o JavaScript da página da Web é executado. No entanto, as páginas da Web podem ter contextos adicionais de JavaScript, como elementos de domínio <iframe> cruzado que estão incorporados na página da Web ou trabalhos de serviço que estão sendo executados em segundo plano.

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

Qualquer expressão JavaScript que você executa na ferramenta Console é avaliada no contexto selecionado na lista suspensa de contexto JavaScript .

Para executar expressões JavaScript em um contexto diferente, como em um elemento de domínio cruzado, clique na lista suspensa de contexto JavaScript e selecione outro contexto de <iframe> 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.

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

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

Confira também

• Mensagens de log 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 na emissão de instruções e expressões JavaScript no Console.
• Referência da API do objeto do console - Funções e expressões que você pode inserir no Console para gravar mensagens no Console, como console.log().
• Seletores e funções do utilitário da ferramenta Console - Funções de conveniência que você pode inserir na ferramenta Console , comomonitorEvents().

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