Referência de recursos do console

Kayce Basques

Sofia Emelianova

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 Primeiros passos.

Se você está procurando a referência da API em funções como console.log(), consulte a Referência da API Console. Para acessar a referência sobre funções como monitorEvents(), consulte a Referência da API Console linha de ferramentas.

Abra o console

É possível 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 será exibida na parte de baixo 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 da gaveta ao lado.

Abrir configurações do console

Clique em Console Settings no canto superior direito do Console.

Importante:não confunda com as configurações do DevTools () acima e ao lado do menu de três pontos .

Os links abaixo explicam cada configuração:

• Ocultar rede
• Preservar registro
• Apenas o contexto selecionado
• Agrupar mensagens semelhantes no console
• Mostrar erros de CORS no console
• Registrar XMLHttpRequests
• Avaliação rápida
• Preenchimento automático do histórico

Abrir a barra lateral do console

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

Veja as mensagens

Esta seção contém recursos que mudam a forma 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 a opção Grupo semelhante para desativar o comportamento padrão de agrupamento de mensagens. Consulte Registrar solicitações XHR e buscar para ver um exemplo.

Ver mensagens de pontos de interrupção

O Console marca 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 de ponto de interrupção inline no painel Origens, clique no link de âncora ao lado da mensagem do ponto de interrupção.

Conferir stack traces

O Console captura automaticamente stack traces em busca de 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.

Conferir causas de erros em stack traces

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

Para facilitar a depuração, é possível especificar as causas de erros ao detectar e gerar erros novamente. À medida que o Console percorre a cadeia da causa, ele mostra cada pilha de erros com um prefixo Caused by: para que você possa encontrar o erro original.

Visualizar stack traces assíncronos

Se for compatível com o 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.

Importante:o DevTools implementa o recurso "Async Stack Tagging" com base no método da API console.createTask(). O DevTools incentiva frameworks e abstrações a usar essa API. Por exemplo, o Angular é compatível com esse recurso.

Mostrar frames de terceiros conhecidos em stack traces

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

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

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

Registrar XHR e solicitações de busca

Abra as configurações do console e ative Registrar XMLHttpRequests para registrar todas as solicitações XMLHttpRequest e Fetch no console à medida que elas ocorrerem.

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 é mantido depois da desativação do agrupamento de mensagens.

Manter as mensagens nos carregamentos de página

Por padrão, o console é apagado sempre que uma nova página é carregada. Para manter as mensagens nos 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 na parte de cima no exemplo abaixo representa o 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 eles forem encontrados, clique nos seguintes botões ao lado dos erros:

• para abrir a solicitação com um TypeError relacionado ao CORS no painel Network.
• para encontrar uma possível solução 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 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 registrada pelo navegador 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 em 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.

Também é possível 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 por 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, 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 destacar.

Filtrar mensagens de diferentes contextos

Suponha que haja um anúncio na sua página. O anúncio está incorporado em um <iframe> e gera muitas mensagens no seu 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.

Filtrar mensagens que não correspondam 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. Os espaços não são compatíveis. 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:

1. Para abrir uma barra de pesquisa integrada, pressione Command+F (Mac) ou Ctrl+F (Windows e Linux).
2. Na barra, digite sua consulta. Neste exemplo, a consulta é legacy. Também é possível fazer o seguinte:
   • Clique em Diferenciar maiúsculas de minúsculas para que a consulta diferencie maiúsculas de minúsculas.
   • Clique em Usar expressão regular para pesquisar usando uma expressão RegEx.
3. Pressione Enter. Para acessar o resultado anterior ou seguinte da pesquisa, 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 ver 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. Escapa caracteres especiais apropriados e agrupa a string entre aspas simples, aspas duplas ou acentos graves, 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 JSON literal. Formata a string para um JSON válido.

Executar novamente expressões do histórico

Pressione a seta para cima para navegar pelo histórico das expressões JavaScript executadas 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ê perceber que precisa digitar a mesma expressão JavaScript no Console repetidamente, talvez seja mais fácil criar uma Live Expression. Com o recurso Live Expressions, você digita uma expressão uma vez e a fixa na parte superior 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 em tempo real.

Desativar avaliação de prontidão

À medida que você digita expressões JavaScript no Console, a Avaliação Eager mostra 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 do 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. O 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 Avaliar os acionadores de 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 as expressões que você executou anteriormente. Essas expressões são prefixadas com o 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 das 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ê tem um anúncio incorporado a uma <iframe> na sua página. Você quer executar o JavaScript para ajustar o DOM do anúncio. Para fazer isso, primeiro você precisa selecionar o contexto de navegação do anúncio na lista suspensa Contexto do JavaScript.

Inspecionar propriedades do objeto

O Console pode exibir uma lista interativa de propriedades de um objeto JavaScript especificado por você.

Para navegar na 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 do protótipo estão em fonte normal. O Console os exibe no próprio objeto avaliando os acessadores nativos correspondentes dos objetos integrados.

Avaliar os 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 (...).

Propriedades enumeráveis e não enumeráveis

As propriedades de tipos enumerados têm cores claras. As propriedades não enumeráveis são silenciadas. As propriedades enumeração podem ser iteradas com o loop for … in ou o método Object.keys().

Detectar 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 avalia fora do escopo da classe.

Inspecionar propriedades internas do JavaScript

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 seu código. No entanto, pode ser útil inspecioná-los.

Você verá as seguintes propriedades internas em diferentes objetos:

• Qualquer objeto tem um [[Prototype]].
• Os wrappers primitivos têm uma propriedade [[PrimitiveValue]].
• Os objetos ArrayBuffer têm as seguintes propriedades:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]] e [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
    Importante:para inspecionar um ArrayBuffer de JavaScript a que um objeto de visualização se refere, clique no botão .
• Além das propriedades específicas de ArrayBuffer, os objetos WebAssembly.Memory têm uma propriedade [[WebAssemblyMemory]].
• As 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ído ou rejeitado
  • [[PromiseResult]]: undefined se pendente, <value> se cumprido, <reason> se recusado
• 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 o nome de uma função no Console, o DevTools a chamará em vez de exibir as propriedades.

Para exibir 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 de bind().
  • [[BoundThis]]: o valor de this.
  • [[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 ou running.
  • [[GeneratorFunction]]. O gerador que retornou o objeto.
  • [[GeneratorReceiver]]: um objeto que recebe o valor.

Limpar o console

Use qualquer 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() pelo JavaScript da página da Web.
• Pressione Control+L enquanto o console estiver em foco.