Referência de recursos do console

Esta página é uma referência de recursos relacionados ao console do Chrome DevTools. Ele pressupõe que você já sabe usar o console para ver mensagens registradas e executar JavaScript. Caso contrário, consulte Como começar.

Se você estiver procurando a referência da API em funções como console.log(), consulte a referência da API do console. Para conferir a referência de funções como monitorEvents(), consulte Referência da API Console Utilities.

Abra o console

É possível abrir o console como um painel ou uma guia no gaveteiro.

Abra o painel "Console".

Pressione Control+Shift+J ou Command+Option+J (Mac).

Para abrir o console no Menu de comandos, comece a digitar Console e execute o comando Mostrar console que tem o selo Painel ao lado.

Abrir o console no gaveteiro

Pressione Escape ou clique em Personalizar e controlar o DevTools e selecione Mostrar gaveta do console.

A gaveta aparece na parte de baixo da janela do DevTools com a guia Console aberta.

Para abrir a guia "Console" no Menu de comandos, comece a digitar Console e execute o comando Mostrar console que tem o selo Gaveta ao lado.

Abrir as configurações do console

Clique em Configurações do console no canto superior direito do console.

Os links abaixo explicam cada configuração:

• Ocultar rede
• Preservar registro
• Somente contexto selecionado
• Agrupar mensagens semelhantes no console
• Mostrar erros de CORS no console
• Registrar XMLHttpRequests
• Avaliação imediata
• Preencher automaticamente usando o histórico

Abrir a barra lateral do console

Clique em Mostrar barra lateral do console para mostrar a barra lateral, que é útil para filtrar.

Veja as mensagens

Esta seção contém recursos que mudam a forma como as mensagens são apresentadas no console. Consulte Ver mensagens para um tutorial prático.

Desativar o agrupamento de mensagens

Abra as configurações do console e desative a opção Agrupar semelhantes para desativar o comportamento padrão de agrupamento de mensagens do console. Consulte Registrar solicitações XHR e Fetch para ver um exemplo.

Ver mensagens de pontos de interrupção

O Console marca as mensagens acionadas por pontos de interrupção da seguinte maneira:

• Chamadas console.* em pontos de interrupção condicionais com um ponto de interrogação laranja ?
• Mensagens de logpoint com dois pontos rosas ..

Para acessar o editor de pontos de interrupção inline no painel Fontes, clique no link fixo ao lado da mensagem do ponto de interrupção.

Conferir stack traces

O console captura automaticamente stack traces de erros e avisos. Um stack trace é um histórico de chamadas de função (frames) que levaram ao erro ou aviso. O console mostra os frames em ordem inversa: o mais recente fica na parte de cima.

Para ver um stack trace, clique no ícone de expansão ao lado de um erro ou aviso.

Ver causas de erros em stack traces

O Console pode mostrar cadeias de causas de erros no rastreamento de pilha, se houver.

Para facilitar a depuração, especifique as causas dos erros ao capturar e gerar novamente os erros. À medida que o Console percorre a cadeia de causas, ele imprime cada pilha de erros com um prefixo Caused by: para que você possa encontrar o erro original.

Conferir stack traces assíncronos

Se compatível com o framework que você está usando ou ao usar diretamente primitivos de programação do navegador, como setTimeout, o DevTools pode rastrear operações assíncronas vinculando as duas partes do código assíncrono.

Nesse caso, o rastreamento de pilha mostra a "história completa" da operação assíncrona.

Mostrar frames de terceiros conhecidos em rastreamentos de pilha

Quando os mapas de origem incluem o campo ignoreList, por padrão, o Console oculta dos rastreamentos de pilha os frames de terceiros de fontes geradas por bundlers (por exemplo, webpack) ou frameworks (por exemplo, Angular).

Para conferir o rastreamento de pilha completo, incluindo frames de terceiros, clique em Mostrar mais N frames na parte de baixo do rastreamento de pilha.

Para sempre ver o rastreamento de pilha completo, desative a configuração Configurações > Lista de ignorados > Adicionar automaticamente scripts conhecidos de terceiros à lista de ignorados.

Registrar solicitações XHR e Fetch

Abra as configurações do console e ative a opção Registrar XMLHttpRequests para registrar todos os pedidos XMLHttpRequest e Fetch no console à medida que eles acontecem.

A mensagem na parte de cima do exemplo acima mostra o comportamento de agrupamento padrão do console. O exemplo abaixo mostra como o mesmo registro aparece depois de desativar o agrupamento de mensagens.

Persistir mensagens entre carregamentos de página

Por padrão, o console é limpo sempre que você carrega uma nova página. Para manter as mensagens em todos os carregamentos de página, abra as configurações do console e marque a caixa de seleção Preservar registro.

Ocultar mensagens de rede

Por padrão, o navegador registra mensagens de rede no Console. Por exemplo, a mensagem principal no exemplo a seguir representa um erro 404.

Para ocultar mensagens de rede:

1. Abra as configurações do console.
2. Marque a caixa de seleção Ocultar rede.

Mostrar ou ocultar erros de CORS

O console pode mostrar erros de CORS se as solicitações de rede falharem devido ao Compartilhamento de recursos entre origens (CORS).

Para mostrar ou ocultar erros de CORS:

1. Abra as configurações do console.
2. Marque ou desmarque a caixa de seleção Mostrar erros de CORS no console.

Se o console estiver configurado para mostrar erros de CORS e você encontrar algum, clique nos seguintes botões ao lado dos erros:

• para abrir a solicitação com um TypeError relacionado ao CORS no painel Rede.
• para receber uma solução possível na guia Problemas.

Filtrar mensagens

Há muitas maneiras de filtrar mensagens no console.

Filtrar mensagens do navegador

Abra a barra lateral do console e clique em Mensagens do usuário para mostrar apenas as mensagens que vieram do JavaScript da página.

Filtrar por nível de registro

O DevTools atribui níveis de gravidade à maioria dos métodos console.*.

Há quatro níveis:

• Verbose
• Info
• Warning
• Error

Por exemplo, console.log() está no grupo Info, enquanto console.error() está no grupo Error. A referência da API do console descreve o nível de gravidade de cada método aplicável.

Cada mensagem que o navegador registra no console também tem um nível de gravidade. Você pode ocultar qualquer nível de mensagens que não sejam do seu interesse. Por exemplo, se você só quiser ver mensagens de Error, oculte os outros três grupos.

Clique no menu suspenso Níveis de registro para ativar ou desativar mensagens Verbose, Info, Warning ou Error.

Também é possível filtrar por nível de registro em abrindo a barra lateral do console e clicando em Erros, Avisos, Informações ou Detalhado.

Filtrar mensagens por URL

Digite url: seguido de um URL para ver apenas as mensagens que vieram dele. Depois de digitar url:, as DevTools mostram todos os URLs relevantes.

Os domínios também funcionam. Por exemplo, se https://example.com/a.js e https://example.com/b.js forem mensagens de registro, url:https://example.com permitirá que você se concentre nas mensagens desses dois scripts.

Para ocultar todas as mensagens de um URL específico, digite -url: seguido pelo URL, por exemplo, https://b.wal.co. Este é um filtro de URL negativo.

Também é possível mostrar mensagens de um único URL abrindo a barra lateral do console, expandindo a seção Mensagens do usuário e clicando no URL do script que contém as mensagens em que você quer se concentrar.

Filtrar mensagens de diferentes contextos

Imagine que você tem um anúncio na sua página. O anúncio está incorporado em um <iframe> e gerando muitas mensagens no console. Como esse anúncio está em um contexto JavaScript diferente, uma maneira de ocultar as mensagens dele é abrir as configurações do console e marcar a caixa de seleção Somente contexto selecionado.

Filtrar mensagens que não correspondem a um padrão de expressão regular

Digite uma expressão regular, como /[foo]\s[bar]/, na caixa de texto Filtro para filtrar todas as mensagens que não correspondem a esse padrão. Não é possível usar espaços. Use \s. O DevTools verifica se o padrão é encontrado no texto da mensagem ou no script que fez com que a mensagem fosse registrada.

Por exemplo, o filtro a seguir exclui todas as mensagens que não correspondem a /[gm][ta][mi]/.

Pesquisar texto em registros

Para pesquisar texto em mensagens de registro:

1. Para abrir uma barra de pesquisa integrada, pressione Command+F (Mac) ou Ctrl+F (Windows, Linux).
2. Na barra, digite sua consulta. Neste exemplo, a consulta é legacy. Você também pode:
   • Clique em Diferenciar maiúsculas e minúsculas para que a consulta faça essa distinção.
   • Clique em Usar expressão regular para pesquisar usando uma expressão RegEx.
3. Pressione Enter. Para acessar o resultado da pesquisa anterior ou seguinte, pressione o botão para cima ou para baixo.

Executar JavaScript

Esta seção contém recursos relacionados à execução de JavaScript no console. Consulte Executar JavaScript para um tutorial prático.

Opções de cópia de string

Por padrão, o console gera strings como literais JavaScript válidos. Clique com o botão direito do mouse em uma saída e escolha entre três opções de cópia:

• Copiar como literal JavaScript. Faz o escape dos caracteres especiais adequados e envolve a string em aspas simples, duplas ou crases, dependendo do conteúdo.
• Copiar conteúdo da string. Copia a string bruta exata para a área de transferência, incluindo novas linhas e outros caracteres especiais.
• Copiar como literal JSON. Formata a string para um JSON válido.

Executar novamente expressões anteriores e limpar o histórico

Pressione a tecla Seta para cima para percorrer o histórico de expressões JavaScript que você executou anteriormente no Console. Pressione Enter para executar essa expressão novamente.

Para limpar o histórico do console, clique com o botão direito do mouse em um espaço vazio no Console e selecione Limpar histórico do console no menu de contexto.

Limpar, copiar, abrir, fechar e salvar mensagens

Para limpar a janela do Console, faça o seguinte:

• Clique em block Limpar console na barra de ações na parte de cima.
• Pressione Ctrl+L ou Cmd+K.
• Clique com o botão direito do mouse em um espaço vazio no Console e selecione Limpar console no menu de contexto.

Para abrir ou fechar todas as mensagens, clique em expandir Expandir tudo ou compactar Recolher tudo na barra de ações na parte de cima.

No menu de contexto, você também pode:

• Copiar console: copia todas as mensagens atuais para a área de transferência, mas não o histórico de comandos anteriores.
• Salvar como...: Salve todas as mensagens atuais em um arquivo .log de texto simples.

Acompanhe o valor de uma expressão em tempo real com as Expressões dinâmicas

Se você digitar a mesma expressão JavaScript no console várias vezes, talvez seja mais fácil criar uma expressão dinâmica. Com as Expressões dinâmicas, você digita uma expressão uma vez e a fixa na parte de cima do console. O valor da expressão é atualizado quase em tempo real. Consulte Acompanhar valores de expressões JavaScript em tempo real com expressões dinâmicas.

Desativar avaliação imediata

À medida que você digita expressões JavaScript no console, a avaliação imediata mostra uma prévia do valor de retorno dessa expressão. Abra as configurações do console e desmarque a caixa de seleção Avaliação imediata para desativar as prévias de valor de retorno.

Acionar a ativação do usuário com a avaliação

A ativação do usuário é o estado de uma sessão de navegação que depende das ações do usuário. Um estado "ativo" significa que o usuário está interagindo com a página ou interagiu desde o carregamento dela.

Para acionar a ativação do usuário com qualquer avaliação, abra as configurações do console e marque Tratar a avaliação do código como uma ação do usuário.

Desativar o preenchimento automático usando o histórico

Ao digitar uma expressão, o pop-up de preenchimento automático do console mostra as expressões que você executou antes. Essas expressões são precedidas pelo caractere >. No exemplo a seguir, o DevTools avaliou document.querySelector('a') e document.querySelector('img') anteriormente.

Abra as configurações do console e desmarque a caixa de seleção Preencher automaticamente usando o histórico para parar de mostrar expressões do seu histórico.

Selecionar o contexto JavaScript

Por padrão, o menu suspenso Contexto do JavaScript está definido como top, que representa o contexto de navegação do documento principal.

Suponha que você tenha um anúncio na sua página incorporado em um <iframe>. Você quer executar JavaScript para ajustar o DOM do anúncio. Para fazer isso, primeiro selecione o contexto de navegação do anúncio no menu suspenso Contexto do JavaScript.

Inspecionar propriedades do objeto

O console pode mostrar uma lista interativa de propriedades de um objeto JavaScript especificado.

Para navegar pela lista, digite o nome do objeto no Console e pressione Enter.

Para inspecionar as propriedades de objetos DOM, siga as etapas em Ver as propriedades de objetos DOM.

Identificar propriedades próprias e herdadas

O Console classifica as propriedades do próprio objeto primeiro e as destaca em negrito.

As propriedades herdadas da cadeia de protótipos estão em fonte normal. O Console mostra esses valores no próprio objeto ao avaliar os acessadores nativos correspondentes de objetos integrados.

Avaliar acessadores personalizados

Por padrão, o DevTools não avalia os acessadores que você cria. Para avaliar um acessador personalizado em um objeto, clique em (...).

Identificar propriedades enumeráveis e não enumeráveis

As propriedades enumeráveis têm cores claras. As propriedades não enumeráveis ficam esmaecidas. As propriedades enumeráveis podem ser iteradas com o loop for … in ou o método Object.keys().

Identificar propriedades privadas de instâncias de classe

O Console designa propriedades particulares de instâncias de classe com um prefixo #.

O Console também pode concluir automaticamente propriedades particulares, mesmo quando você as avalia fora do escopo da classe.

Inspecionar propriedades internas do JavaScript

Usando a notação ECMAScript, o Console inclui algumas propriedades internas do JavaScript em colchetes duplos. Não é possível interagir com essas propriedades no seu código. No entanto, pode ser útil inspecioná-los.

Você pode encontrar as seguintes propriedades internas em objetos diferentes:

• Qualquer objeto tem um [[Prototype]].
• Os wrappers primitivos têm uma propriedade [[PrimitiveValue]].
• Os objetos ArrayBuffer têm as seguintes propriedades:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• Além das propriedades específicas de ArrayBuffer, os objetos WebAssembly.Memory têm uma propriedade [[WebAssemblyMemory]].
• Coleções com chaves (mapas e conjuntos) têm uma propriedade [[Entries]] que contém as entradas com chaves.
• Os objetos Promise têm as seguintes propriedades:
  • [[PromiseState]]: pendente, atendido ou rejeitado
  • [[PromiseResult]]: undefined se pendente, <value> se concluído, <reason> se rejeitado
• Os objetos Proxy têm as seguintes propriedades: objeto [[Handler]], objeto [[Target]] e [[isRevoked]] (desativado ou não).

Inspecionar funções

Em JavaScript, as funções também são objetos com propriedades. No entanto, se você digitar um nome de função no Console, o DevTools vai chamar a função em vez de mostrar as propriedades dela.

Para conferir as propriedades internas da função em JavaScript, use o comando console.dir().

As funções têm as seguintes propriedades:

• [[FunctionLocation]]. Um link para a linha com a definição da função em um arquivo de origem.
• [[Scopes]]. Lista os valores e as expressões a que a função tem acesso. Para inspecionar escopos de função durante a depuração, consulte Ver e editar propriedades locais, de fechamento e globais.
• As funções vinculadas têm as seguintes propriedades:
  • [[TargetFunction]]: o destino de bind().
  • [[BoundThis]]. O valor de this.
  • [[BoundArgs]]. Uma matriz de argumentos de função.
• As funções geradoras são marcadas com uma propriedade [[IsGenerator]]: true.
• Os geradores retornam objetos iteradores e têm as seguintes propriedades:
  • [[GeneratorLocation]]. Um link para uma linha com a definição do gerador em um arquivo de origem.
  • [[GeneratorState]]: suspended, closed ou running.
  • [[GeneratorFunction]]. O gerador que retornou o objeto.
  • [[GeneratorReceiver]]. Um objeto que recebe o valor.

Limpar o console

Use um dos seguintes fluxos de trabalho para limpar o console:

• Clique em Limpar console .
• Clique com o botão direito do mouse em uma mensagem e selecione Limpar console.
• Digite clear() no console e pressione Enter.
• Chame console.clear() do JavaScript da sua página da Web.
• Pressione Control+L enquanto o console está em foco.