Antes, para debugar código, enchiamos nosso código de alert(). Hoje temos várias ferramentas que nos auxiliam a melhor debugar, e entre elas estão o Console e a Command Line API.

Neste post vamos focar no Chrome. Mas a maior parte das APIs também foram implementadas por outros browsers, como o Firefox. Para chamar o Console no Chrome, vá no menu View > Developer > JavaScript Console, ou pelo atalho ⌘⌥J no Mac, Control + Shift + J no Windows e Linux. Com o console visível, vamos dar uma olhada nos métodos mais populares e úteis.

log, warn e error

Esses são os métodos básicos. Com eles imprimimos uma mensagem diretamente no console. A única diferença entre eles é o layout da mensagem. Com warn aparece um ícone amarelo de alerta ao lado da mensagem, com error um ícone e mensagem em vermelho. Com log apenas uma mensagem normal.

$$()

Funciona de modo similar à função $ do jQuery. Retorna um array de elementos de acordo com o seletor CSS passado.

$0, $1, $3 e $4

$0 funciona como um atalho para o último elemento selecionado na aba Elements. Já $1 é o atalho para o penúltimo elemento. E assim por diante até o $4.

$_

Atalho para o último valor computado, ou retornado. Mais fácil com um exemplo.

No exemplo acima, antes de chamarmos $_, o último valor computado foi o da expresssão $$(). Então quando chamamos $_.length, obtemos o mesmo valor que $$('.post-container h2').length.

Limpando o console

Para limpar o console o atalho é ⌘K no Mac e Control + L no Windows e Linux. Você pode também usar o método console.clear() caso queira limpar o console de tempos em tempos de forma programática.

Medindo tempo

Ótimo para verificar quanto tempo determinada parte do código está demorando para ser executada. Basta chamar console.time('100.000 objetos') e, quando quiser finalizar a medição, chamar o método console.timeEnd('100.000 objetos') com a mesma string passada anteriormente.

Monitorando eventos

A função monitorEvents() fica monitorando um objeto por um ou mais eventos especificados. Quando um evento ocorre, ela imprime o objeto Event no console.

Snippets para Sublime Text

E para facilitar ainda mais, eu acabei criando um package do Sublime Text. Ele pode ser instalado pelo próprio Package Control. O nome do pacote é JavaScript Console e as instruções de uso estão na página do projeto no GitHub. Qualquer dúvida, melhoria ou elogio, por favor, não hesitem de abrir uma issue ou falar aqui embaixo nos comentários.