Usar o Console

Aprenda a: abrir o DevTools Console, empilhar mensagens redundantes ou exibi-las em suas 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 Console dedicado:

  • Pressione Ctrl+Shift+J (Windows/Linux) ou Cmd+Opt+J (Mac).
  • Se o DevTools já estiver aberto, pressione o botão 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

Se preferir uma entrada de linha exclusiva para cada registro, ative Show timestamp nas configurações do DevTools.

Mostrar timestamp

Como o timestamp de cada mensagem é diferente, cada uma delas é exibida em sua própria linha.

Console com timestamp

Trabalhar com o histórico do Console

Apagar o histórico

Você pode apagar o histórico do console realizando qualquer um dos procedimentos a seguir:

  • 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 do console entre atualizações ou mudanças de 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 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 em seus próprios contextos. Para trabalhar com esses outros contextos, você precisa selecioná-los no menu suspenso. Por exemplo, se você 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 Filter) 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 & 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().
Debug 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 fazer configurações adicionais.

Configurações do Console

Configuração & Descrição
Ocultar mensagens de rede Por padrão, o console reporta problemas na rede. Ativar isso 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.
Registrar XMLHttpRequests Determina se o console registra cada XMLHttpRequest.
Manter registro após navegação Mantém o histórico do console durante atualizações de página ou navegação.
Mostrar timestamps Adiciona uma marcação de data e 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.
Ativar formatadores personalizados Controla a formatação de objetos JavaScript.