Vá além do console.log. Conheça seus irmãos.

Muitos desenvolvedores recorrem ao console.log() quando querem debugar qualquer coisa envolvendo JavaScript, node, e suas variações.

O uso do console.log para debug

O uso do console.log é quase sempre utilizado para testar, verificar valor de variáveis, ou mesmo se determinado trecho de código foi atingido.

Não rara são as vezes que esquecemos um console.log em nossa aplicação, gerando mensagens desnecessárias e sem sentido no console do navegador.

Dependendo do que adicionamos ao console.log e a dificuldade de buscar estes dados, também tornamos a página mais lenta. Se este debug incluir requisições ajax, também consumiremos recursos de servidor sem necessidade.

Conheça outras formas de depuração. E elas já estão no seu console.

Embora eu e muitos desenvolvedores frequentemente usem o console.log pra exibir qualquer coisa (avisos, erros, etc), há métodos feitos para cada uma destas finalidades.

O próprio objeto console já fornece alguns desses:

• console.error -> Mostra uma mensagem de erro
• console.warn -> Mostra um aviso
• console.info -> Mostra uma mensagem informativa (e tem um visual diferente no Firefox, mas tecnicamente é a mesma coisa que o console.log)
• console.log -> Mostra uma mensagem global
• console.debug -> Mostra uma mensagem com um nível de debug.
• console.table -> Mostra dados de um objeto ou array como uma tabela
• console.time (em conjunto com console.timeEnd) -> Permite setar um timer pra ver quanto tempo uma tarefa levou pra ser concluída.

Veja alguns exemplos:

console.time('Console.Time') //inicia o timer
console.log('Este é o console.log')
console.warn('Este é o console.warn')
console.info('Este é o console.info')
console.debug('Este é o console.debug')
console.table(['Este é o console.table', 'segundo objeto do array'])
console.timeEnd('Console.Time') //vê quanto tempo levou até aqui

E veja como eles são exibidos nos principais navegadores:

No Firefox

No Chrome

O método debug

O console.debug pode ser mais interessante. Ele não é exibido no nível padrão de depuração. Logo não é mostrado sem que haja um real interesse em vê-lo.

Na minha opinião, o console.debug é a melhor opção a ser usada. Além de evitar que a mensagem seja exibida pra usuários com o console no modo padrão, me sinto mais seguro de removê-la em um script automático de deploy por exemplo.

Removendo códigos de debug e outras “porcarias” automaticamente

O UglifyJS é uma ferramenta simples que pode ser usada para remover códigos de debug, métodos não utilizados, minificar, compactar e formatar códigos JavaScript.

Na sua execução, ao informar --compress drop_console=true, ele automaticamente removerá os métodos console.* de seus arquivos além de torná-los menores.

O UglifyJS também pode remover códigos obsoletos, formatar códigos JavaScript e muito mais.

Vale a pena conhecer esta ferramenta.

Espero que tenha gostado do artigo. Se puder, compartilhe e/ou comente. 😉

Referência: Artigo Stop using console.log escrito por Ben Lmsc

• Sobre
• Últimos Posts

Ricardo Martins

É desenvolvedor web há 16 anos e um dos primeiros certificados pela Magento no Brasil. Instrutor de mais de 11 cursos Magento (os principais no magenteiro.com/cursos) com mais de 14 mil alunos de 105 países, é também criador do módulo PagSeguro Transparente, usado em mais de 12 mil lojas.

Últimos posts por Ricardo Martins (exibir todos)

• PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
• Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
• Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023