Esta página é uma referência de recursos relacionados ao Console do Chrome DevTools. Ele pressupõe que você já esteja familiarizado com o uso do Console para visualizar mensagens registradas e executar o JavaScript. Caso contrário, consulte Começar.
Se você estiver procurando a referência da API sobre funções como console.log()
, consulte a Referência da API
Console. Para ter a referência de funções como monitorEvents()
, consulte a Referência da API Console Utilitários.
Abra o Console
Você pode abrir o console como um painel ou uma guia na gaveta.
Abrir o painel do console
Pressione Control + Shift + J ou Command + Option + J (Mac).
Para abrir o Console no Menu de comando, comece a digitar Console
e execute o comando Show
Console que tem o selo Panel ao lado.
Abrir o console na gaveta
Pressione Esc ou clique em Customize And Control DevTools e selecione Show Console Drawer.
A gaveta aparece na parte inferior da janela do DevTools, com a guia Console aberta.
Para abrir a guia Console no Menu de comando, comece a digitar Console
e execute o comando Mostrar
Console que tem o selo Gaveta ao lado.
Abrir configurações do console
Clique em Console Settings no canto superior direito do Console.
Os links abaixo explicam cada configuração:
- Ocultar rede
- Preservar registro
- Apenas contexto selecionado
- Agrupar mensagens semelhantes no console
- Mostrar erros de CORS no console
- Registrar XMLHttpRequests
- Avaliação ansiosa
- Preenchimento automático do histórico
Abrir a barra lateral do console
Clique em Show Console Sidebar para mostrar a barra lateral, que é útil para filtragem.
Veja as mensagens
Esta seção contém recursos que alteram como as mensagens são apresentadas no Console. Consulte Visualizar mensagens para um tutorial prático.
Desativar o agrupamento de mensagens
Abra as configurações do Console e desative Grupo semelhante para desativar o comportamento padrão de agrupamento de mensagens do Console. Consulte Registrar XHR e buscar solicitações 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 rosa
..
Para acessar o editor in-line do ponto de interrupção no painel Origens, clique no link de âncora ao lado da mensagem do ponto de interrupção.
Ver stack traces
O Console captura automaticamente stack traces para erros e avisos. Um stack trace é um histórico de chamadas de função (frames) que levaram ao erro ou aviso. O Console as exibe na ordem inversa: o frame mais recente fica no topo.
Para conferir um stack trace, clique no ícone de expansão ao lado de um erro ou aviso.
Ver stack traces assíncronos
Se tiver suporte do framework que você está usando ou ao usar diretamente os primitivos de programação do navegador, como setTimeout
, o DevTools poderá 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.
Mostrar frames de terceiros conhecidos nos stack traces
Quando os mapas de origem incluem o campo ignoreList
, por padrão, o Console oculta os stack traces dos frames de terceiros de origens geradas por bundlers (por exemplo, webpack) ou frameworks (por exemplo, Angular).
Para ver o stack trace completo, incluindo frames de terceiros, clique em Mostrar mais N frames na parte de baixo do stack trace.
Para sempre ter acesso ao stack trace completo, desative a configuração Configurações > Lista de ignorados > Adicionar automaticamente scripts de terceiros conhecidos para ignorar a lista.
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 à medida que elas ocorrerem.
A primeira mensagem no exemplo acima mostra o comportamento de agrupamento padrão do console. O exemplo abaixo mostra como o mesmo registro cuida depois de desativar o agrupamento de mensagens.
Manter as mensagens nos carregamentos de página
Por padrão, o console é apagado sempre que você carrega uma nova página. Para manter as mensagens nos carregamentos de página, abra as configurações do console e marque 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 na parte de cima do exemplo abaixo representa o erro 404.
Para ocultar mensagens de rede, faça o seguinte:
- Abra as configurações do console.
- 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:
- Abra as configurações do console.
- 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ê os encontrar, clique nos botões ao lado dos erros:
- para abrir a solicitação com um
TypeError
relacionado ao CORS no painel Network. - para acessar uma possível solução na guia Problemas.
Filtrar mensagens
Há várias 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 provenientes do JavaScript da página.
Filtrar por nível de registro
O DevTools atribui 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.
Toda 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 seja do seu interesse. Por exemplo, se você
tiver interesse apenas em mensagens Error
, poderá ocultar os outros três grupos.
Clique no menu suspenso Log Levels para ativar ou desativar as mensagens Verbose
, Info
, Warning
ou Error
.
Você também pode filtrar por nível de registro abrindo a barra lateral do console e clicando em Erros, Avisos, Informações ou Verbose.
Filtrar mensagens por URL
Digite url:
seguido de um URL para visualizar apenas as mensagens provenientes desse URL. Depois de digitar url:
, o DevTools mostra todos os URLs relevantes.
Os domínios também funcionam. Por exemplo, se https://example.com/a.js
e https://example.com/b.js
estiverem registrando mensagens, o url:https://example.com
permitirá que você se concentre nas mensagens desses dois scripts.
Para ocultar todas as mensagens de um URL especificado, 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 que você quer focar.
Filtrar mensagens de diferentes contextos
Digamos que você tem um anúncio na sua página. O anúncio é incorporado a uma <iframe>
e gera
muitas mensagens no console. Como esse anúncio está em um contexto JavaScript diferente, uma maneira
de ocultar as mensagens é abrir as configurações do console e marcar a caixa de seleção
Somente contexto selecionado.
Filtre as 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 Filtrar 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 comando a seguir filtra todas as mensagens que não correspondem a /[gm][ta][mi]/
.
Pesquisar texto em registros
Para pesquisar texto em mensagens de registro:
- Para abrir uma barra de pesquisa integrada, pressione Command+F (Mac) ou Ctrl+F (Windows e Linux).
- Na barra, digite sua consulta. Neste exemplo, a consulta é
legacy
. Você também pode fazer o seguinte:- Clique em Diferenciar maiúsculas de minúsculas para que sua consulta diferencie maiúsculas de minúsculas.
- Clique em Usar expressão regular para pesquisar usando uma expressão RegEx.
- Pressione Enter. Para voltar ao resultado anterior ou ao próximo, pressione o botão para cima ou para baixo.
Executar JavaScript
Esta seção contém recursos relacionados à execução do JavaScript no Console. Consulte Executar o JavaScript para conferir um tutorial prático.
Opções de cópia de string
O console gera strings como literais JavaScript válidos por padrão. 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. Escapa dos caracteres especiais apropriados e envolve a string entre aspas simples, aspas duplas ou acentos graves, dependendo do conteúdo.
- Copie 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 JSON literal. Formata a string como um JSON válido.
Executar novamente expressões do histórico
Pressione a seta para cima para percorrer o histórico de expressões JavaScript que você executado anteriormente no Console. Pressione Enter para executar essa expressão novamente.
Observar o valor de uma expressão em tempo real com o Live Expressions
Se você digitar repetidamente a mesma expressão JavaScript no Console, poderá ser mais fácil criar uma Live Expression. Com o recurso Live Expressions, 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 Assistir valores de expressões em JavaScript em tempo real com expressões em tempo real.
Desativar avaliação antecipada
À medida que você digita expressões JavaScript no Console, a avaliação antecipada exibe uma visualização do valor de retorno dessa expressão. Abra as configurações do console e desmarque a caixa de seleção Avaliação antecipada para desativar as visualizações de valores 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 dela.
Para acionar a ativação do usuário em qualquer avaliação, abra as configurações do console e marque Avaliar a ativação do usuário.
Desativar o preenchimento automático do histórico
À medida que você digita uma expressão, o pop-up de preenchimento automático do Console mostra expressões que você executou
anteriormente. Essas expressões são anexadas ao caractere >
. No exemplo a seguir, o DevTools avaliou document.querySelector('a')
e document.querySelector('img')
.
Abra as configurações do Console e desative a caixa de seleção Preencher automaticamente do histórico para interromper a exibição de expressões do seu histórico.
Selecionar contexto do JavaScript
Por padrão, o menu suspenso Contexto do JavaScript é definido como superior, o que representa o contexto de navegação do documento principal.
Imagine que você tenha um anúncio incorporado na sua página (<iframe>
). Você quer executar o JavaScript para
ajustar o DOM do anúncio. Para fazer isso, primeiro é preciso selecionar o contexto de navegação do anúncio no menu suspenso JavaScript Context.
Inspecionar propriedades do objeto
O Console pode exibir 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 Visualizar as propriedades de objetos DOM.
Propriedades próprias e herdadas do Spot
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 os exibe no próprio objeto avaliando os acessadores nativos correspondentes de objetos integrados.
Avaliar acessadores personalizados
Por padrão, o DevTools não avalia os acessadores criados por você.
Para avaliar um acessador personalizado em um objeto, clique em (...)
.
Identificar propriedades enumeráveis e não enumeráveis
As propriedades de enumeração têm cores claras. As propriedades não enumeráveis são silenciadas.
As propriedades de enumeração podem ser iteradas com o loop for … in
ou o método Object.keys()
.
Identificar propriedades particulares de instâncias de classe
O console designa propriedades particulares de instâncias de classe com um prefixo #
.
O Console também pode preencher automaticamente as propriedades particulares, mesmo quando você as avaliar fora do escopo da classe.
Inspecionar propriedades JavaScript internas
Usando a notação ECMAScript, o Console inclui algumas propriedades internas do JavaScript entre colchetes duplos. Não é possível interagir com essas propriedades no código. No entanto, pode ser útil inspecioná-los.
Talvez você veja as seguintes propriedades internas em objetos diferentes:
- Qualquer objeto tem uma
[[Prototype]]
. - Os wrappers primitivos têm uma propriedade
[[PrimitiveValue]]
. - Os objetos
ArrayBuffer
têm as seguintes propriedades: - Além das propriedades específicas de
ArrayBuffer
, os objetosWebAssembly.Memory
têm uma propriedade[[WebAssemblyMemory]]
. - Coleções com chave (mapas e conjuntos) têm uma propriedade
[[Entries]]
que contém as entradas com chave. - Os objetos
Promise
têm as seguintes propriedades:[[PromiseState]]
: pendente, concluída ou recusada[[PromiseResult]]
:undefined
se pendente,<value>
se atendida,<reason>
se rejeitada.
- Os objetos
Proxy
têm as seguintes propriedades:[[Handler]]
,[[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 a chamará em vez de exibir as propriedades.
Para ver as propriedades da função internas ao 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 aos quais 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]]
. A meta debind()
.[[BoundThis]]
: o valor dethis
.[[BoundArgs]]
: uma matriz de argumentos de função.
- As funções de gerador são marcadas com uma propriedade
[[IsGenerator]]: true
. - Os geradores retornam objetos de iterador e eles 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
ourunning.
[[GeneratorFunction]]
. O gerador que retornou o objeto.[[GeneratorReceiver]]
. Um objeto que recebe o valor.
Limpar o console
Você pode usar qualquer um dos seguintes fluxos de trabalho para limpar o Console:
- Clique em Clear Console .
- Clique com o botão direito do mouse em uma mensagem e selecione Clear Console.
- Digite
clear()
no console e pressione Enter. - Chame
console.clear()
pelo JavaScript da sua página da Web. - Pressione Control+L enquanto o console estiver em foco.