Usar o Console

Aprenda a: abrir o DevTools Console, empilhar mensagens redundantes ou exibi-las nas próprias linhas, apagar ou forçar uma saída ou salvá-la em um arquivo, filtrar a saída e acessar configurações adicionais do Console.

TL;DR

  • Abra o Console como um painel dedicado ou como uma gaveta próxima a outro painel.
  • Empilhe mensagens redundantes ou exiba-as nas suas próprias linhas.
  • Apague ou force a saída entre páginas, ou salve-a em um arquivo.
  • Filtre a saída por nível de gravidade ocultando mensagens de rede ou por padrões de expressão regular.

Abrir o Console

Acesse o Console como um painel dedicado em tela inteira:

O painel do Console

Ou como uma gaveta que é aberta ao lado de qualquer painel:

A gaveta do Console

Abrir como um painel

Para abrir o painel dedicado Console:

  • Pressione Ctrl+Shift+J (Windows/Linux) ou Cmd+Opt+J (Mac).
  • Se o DevTools já estiver aberto, pressione o botão do Console.

Quando abrir o painel do Console, a gaveta do Console será recolhida automaticamente.

Abrir como uma gaveta

Para abrir o Console como uma gaveta próxima a qualquer outro painel:

  • Pressione Esc com o DevTools em foco.
  • Pressione o botão Customize and control DevTools e Show console.

Mostrar console

Empilhamento de mensagens

Se uma mensagem for repetida consecutivamente, em vez de gerar cada instância da mensagem em uma nova linha, o Console "empilha" as mensagens e exibe um número na margem esquerda. O número indica quantas vezes a mensagem foi repetida.

Empilhamento de mensagens

Caso prefira uma entrada de linha exclusiva para cada registro, ative Show timestamps nas configurações do DevTools.

Mostrar carimbos de data/hora

Como o carimbo de data/hora de cada mensagem é diferente, cada uma delas é exibida na própria linha.

Console com carimbo de data/hora

Trabalhar com o histórico do Console

Apagar o histórico

Você pode apagar o histórico do console seguindo qualquer um destes procedimentos:

  • Clique com o botão direito no Console e pressione Clear console.
  • Digite clear() no Console.
  • Chame console.clear() a partir do código JavaScript.
  • Digite Ctrl+L (Mac, Windows, Linux).

Manter o histórico

Marque a caixa de seleção Preserve log na parte superior do console para manter o histórico ao fazer atualizações ou mudanças na página. As mensagens serão armazenadas até que você apague o Console ou feche a guia.

Salvar o histórico

Clique com o botão direito no Console e selecione Save as para salvar a saída do console em um arquivo de registros.

Salvar Console em um arquivo de registros

Selecionar contexto de execução

O menu suspenso destacado em azul na captura de tela abaixo é chamado de Execution Context Selector.

Execution Context Selector

Geralmente, o contexto é definido como top (o frame superior da página).

Outros frames e extensões são operados nos próprios contextos. Para trabalhar com esses outros contextos, você precisa selecioná-los no menu suspenso. Por exemplo, se quiser ver a saída de registro de um elemento <iframe> e modificar uma variável que existe nesse contexto, você deve selecioná-lo no menu suspenso Execution Context Selector.

O contexto padrão do Console é top, a não ser que você acesse o DevTools inspecionando um elemento em outro contexto. Por exemplo, se você inspecionar um elemento <p> em um <iframe>, o DevTools definirá o Execution Context Selector para o contexto desse <iframe>.

Ao trabalhar em um contexto diferente de top, o DevTools destaca o Execution Context Selector em vermelho, como na captura de tela abaixo. Isso ocorre porque os desenvolvedores raramente precisam trabalhar em contextos diferentes de top. Pode ser bastante confuso digitar uma variável, esperando um valor, apenas para ver que esse valor é undefined (porque ele foi definido para um contexto diferente).

Execution Context Selector destacado em vermelho

Filtrar a saída do Console

Clique no botão Filter (botão filtrar) para filtrar a saída do console. Você pode filtrar por nível de gravidade, por uma expressão regular ou ocultando mensagens de rede.

Saída do Console filtrada

Filtrar por nível de gravidade é equivalente ao seguinte:

Opção & O que ela mostra
All Mostra toda a saída do console
Errors Mostra apenas a saída de console.error().
Warnings Mostra apenas a saída de console.warn().
Info Mostra apenas a saída de console.info().
Logs Mostra apenas a saída de console.log().
Depurar Mostra apenas a saída de console.timeEnd() e console.debug().

Configurações adicionais

Abra as configurações do DevTools, acesse a guia General e role a página até a seção Console para definir configurações adicionais do Console.

Configurações do Console

Configuração & Descrição
Hide network messages Por padrão, o console reporta problemas na rede. Ativar essa opção instrui o console a não exibir registros para esses erros. Por exemplo, erros das séries 404 e 500 não serão registrados.
Log XMLHttpRequests Determina se o console registra cada XMLHttpRequest.
Preserve log upon navigation Mantém o histórico do console durante atualizações de página ou navegação.
Show timestamps Adiciona um carimbo de data/hora ao início de cada mensagem do console exibida quando a chamada é feita. Útil para depurar quando determinado evento ocorre. Isso desativará o empilhamento de mensagens.
Enable custom formatters Controla a formatação de objetos JavaScript.

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.