Referência de recursos do console

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

Esta página é uma referência de recursos relacionados ao console do Chrome DevTools. Pressupo que você já saiba usar o console para conferir mensagens registradas e executar JavaScript. Caso contrário, consulte Primeiros passos.

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

Abrir o console

É possível abrir o console como um painel ou como uma guia na gaveta.

Abrir o painel do console

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

O console.

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

O comando para mostrar o painel do console.

Abrir o console na gaveta

Pressione Escape ou clique em Personalizar e controlar as ferramentas do desenvolvedor Personalizar e controlar as DevTools. e selecione Mostrar a gaveta do console.

Mostrar a gaveta do console.

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

Guia "Console" na gaveta.

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

O comando para mostrar a guia "Console" na gaveta.

Abrir as configurações do console

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

Configurações do console.

Os links abaixo explicam cada configuração:

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

Barra lateral do console.

Veja as mensagens

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

Desativar o agrupamento de mensagens

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

Conferir mensagens de pontos de interrupção

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

O console marca as mensagens criadas por pontos de interrupção e de registro condicionais.

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

Conferir rastros de pilha

O console captura automaticamente os 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 na ordem inversa: o mais recente fica na parte de cima.

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

Stack traces.

Conferir as causas de erros nos rastros de pilha

O Console pode mostrar cadeias de causas de erros no stack trace, se houver.

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

Uma cadeia de causas de erros com o prefixo "Caused by:" no stack trace.

Conferir stack traces assíncronos

Se o framework que você está usando oferece suporte ou se você está usando diretamente primitivas de programação do navegador, como setTimeout, as Ferramentas do desenvolvedor podem rastrear operações assíncronas vinculando as duas partes do código assíncrono.

Nesse caso, o stack trace mostra a "história completa" da operação assíncrona.

Stack trace assíncrono.

Mostrar frames conhecidos de terceiros em rastros de pilha

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

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

Mostrar mais N frames.

Para sempre visualizar o stack trace completo, desative a configuração Configurações. Settings > Ignore List > Automatically add third-party scripts known to the ignore list.

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 todas as solicitações XMLHttpRequest e Fetch no console conforme elas acontecem.

Gerar registros de solicitações XMLHttpRequest e Fetch.

A mensagem de cima no exemplo acima mostra o comportamento de agrupamento padrão do Play Console. O exemplo abaixo mostra como o mesmo registro fica depois de desativar o agrupamento de mensagens.

Como as solicitações XMLHttpRequest e Fetch registradas ficam após o desgrupamento.

Manter mensagens em carregamentos de página

Por padrão, o console é limpo sempre que você carrega uma nova página. Para manter as mensagens entre as cargas de página, abra as configurações do console e ative a caixa de seleção Preserve Log.

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

Uma mensagem 404 no console.

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 do CORS

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

Para mostrar ou ocultar erros do CORS:

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

Mostrar erros do CORS no console.

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

Botões de rede e 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.

Visualizar mensagens de usuários.

Filtrar por nível de registro

As DevTools atribuem a maioria dos níveis de gravidade 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 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ó tiver interesse nas mensagens Error, poderá ocultar os outros três grupos.

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

Menu suspenso "Níveis de registro".

Também é possível filtrar por nível de registro Mostrar a barra lateral do console. abrindo a barra lateral do console e clicando em Errors, Warnings, Info ou Verbose.

Como usar a barra lateral para conferir avisos.

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.

Um filtro de URL.

Os domínios também funcionam. Por exemplo, se https://example.com/a.js e https://example.com/b.js estiverem registrando mensagens, 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. Esse é um filtro de URL negativo.

Um filtro de URL negativo. As Ferramentas do desenvolvedor estão ocultando todas as mensagens que correspondem ao URL especificado.

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

Visualizar as mensagens de um script específico.

Filtrar mensagens de diferentes contextos

Suponha que você tenha um anúncio na sua página. O anúncio está incorporado em um <iframe> e está gerando muitas mensagens no console. Como esse anúncio está em um contexto de JavaScript diferente, uma maneira de esconder as mensagens é abrir as configurações do console e ativar 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 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 foi encontrado no texto da mensagem ou no script que causou o registro da mensagem.

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

Filtrar todas as mensagens que não correspondem a /[gm][ta][mi]/.

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. Digitando uma consulta. Você também pode:
    • Clique em Diferenciar maiúsculas de minúsculas. Match Case para que a consulta faça distinção entre maiúsculas e minúsculas.
    • Clique em Botão RegEx. 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 conferir um tutorial prático.

Opções de cópia de strings

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 do JavaScript. Escapa caracteres especiais apropriados e envolve a string em aspas simples, aspas duplas ou chaves invertidas, dependendo do conteúdo.
  • Copiar o 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 JSON válido.

As opções de cópia.

Refazer a execução de expressões do 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 a expressão novamente.

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

Se você digitar a mesma expressão JavaScript no console várias vezes, talvez seja mais fácil criar uma expressão em tempo real. Com as Expressões ao vivo, 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 Observar valores de expressão JavaScript em tempo real com expressões ao vivo.

Desativar avaliação antecipada

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

Acionar a ativação do usuário com 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 da página.

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

Desativar o preenchimento automático do histórico

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

O pop-up de preenchimento automático mostrando expressões do histórico.

Abra as configurações do console e desmarque a caixa de seleção Preenchimento automático do histórico para que as expressões do histórico parem de aparecer.

Selecionar o contexto do JavaScript

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

Menu suspenso &quot;Contexto do JavaScript&quot;.

Suponha que você tenha um anúncio na sua página incorporado em um <iframe>. Você quer executar o 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.

Selecionando um contexto JavaScript diferente.

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 Conferir as propriedades de objetos DOM.

Detectar propriedades próprias e herdadas

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

Mostrar propriedades do objeto.

As propriedades herdadas da cadeia de protótipos estão em fonte normal. O Console os exibe no próprio objeto avaliando os acessórios nativos correspondentes de objetos integrados.

Mostrar propriedades herdadas.

Avaliar os acessórios personalizados

Por padrão, o DevTools não avalia os acionadores que você cria. Acessório personalizado. Para avaliar um accessor personalizado em um objeto, clique em (...). Acessório personalizado avaliado.

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

As propriedades enumeráveis são coloridas. As propriedades não enumeráveis são silenciadas. Propriedades enumeráveis e não enumeráveis. As propriedades enumeráveis podem ser iteradas com o método Object.keys() ou o loop for … in.

Detectar propriedades particulares de instâncias de classe

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

Propriedade particular de uma instância de classe.

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

Preenchimento automático de propriedade privada.

Inspecionar propriedades internas do JavaScript

Usando a notação ECMAScript, o console inclui algumas propriedades internas do JavaScript em colchetes quadrados duplos. Não é possível interagir com essas propriedades no código. No entanto, pode ser útil inspecionar esses arquivos.

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

Inspecionar funções

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

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

Inspecionar as propriedades de uma função.

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 os escopos de função durante a depuração, consulte Visualizar e editar propriedades locais, de fechamento e globais.
  • As funções vinculadas têm as seguintes propriedades:
    • [[TargetFunction]]. O alvo de bind().
    • [[BoundThis]]. O valor de this.
    • [[BoundArgs]]: uma matriz de argumentos de função. Função vinculada.
  • As funções gerador são marcadas com uma propriedade [[IsGenerator]]: true. Função gerador.
  • 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. Objeto iterador.

Limpar o console

Você pode usar qualquer um dos seguintes fluxos de trabalho para limpar o console:

  • Clique em Limpar console Limpar..
  • 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 estiver em foco.