Você conhece o verdadeiro poder do console do seu navegador?

O console é uma ferramenta fantástica que auxilia a nós, desenvolvedores web, todos os dias. Quem nunca utilizou o console.log() para validar o funcionamento do seu site e/ou aplicação web?

Mas o que mais impressiona é que o console vai muito além da função log() e pouca gente sabe disso. Neste artigo, vou te mostrar algumas funcionalidades que poderão a vir ser úteis na utilização do console e que tenho certeza que vão te deixar com a mesma cara do Vegeta.

Exibindo conteúdo na tela

Todo mundo conhece a função log(), mas existem outras três funções bem bacanas para exibir mensagens:

• info
• warn
• error

Todas elas funcionam de forma semelhante, basta invocá-las passando um ou mais argumentos que deverão ser exibidos. A diferença na forma como elas são exibidas:

Exibição das mensagens de log, info, warn e error

Essas diferenças visuais te ajudam a identificar rapidamente quaisquer erros ou avisos no seu console só de bater o olho.

Exibição de array em tabela

Outra tarefa muito comum é pedir para que o console exiba um array. Normalmente o que fazemos é algo muito parecido com isso:

O jeito de exibir um array no console

Isto funciona, mas existe uma outra maneira muito mais elegante. Podemos utilizar o método table(). Veja:

Agrupamento de mensagens

Outra funcionalidade interessante é o agrupamento de mensagens. Em termos de organização, podemos querer agrupar as nossas mensagens para que seja mais fácil encontrá-las no console. Para isso, utilizamos a função group() e groupEnd(), passando para ambas como parâmetro o nome do grupo correspondente.

Agrupamento de mensagens no console através do group() e groupEnd()

Também podemos utilizar a função groupCollapsed() ao invés do group() no início. Como o próprio nome já indica, o grupo vem fechado.

Fazendo medições

Um jeito de medir a eficiência de nossos algoritmos é medindo o tempo que ele demora para ser executado. O console tem uma função exatamente para isso, a time(). Seu funcionamento é muito semelhante a função anterior. Passamos como argumento o nome do identificador daquela medida no time() e ao final na função timeEnd(). Veja:

Utilizando a função time() para medir o tempo de execução do loop

Template Strings

Uma das novidades mais bacanas trazidas na es6 foram as Template Strings. Com ela, conseguimos montar mensagens de forma muito mais fácil e legível. Como por exemplo:

Utilizando o Template Strings da ECMAScript 6

Podemos fazer a mesma construção diretamente no console:

Template Strings diretamente no console

Conclusão

Estes foram só alguns exemplos de funcionalidades que o console do navegador possui e que poucos conhecem. Ainda há algumas outras funções que não foram abordadas neste artigo e podem ser encontradas nos links a seguir:

Console

Console Standard

Espero que daqui em diante você também comece a utilizar todo o potencial do console para facilitar o seu dia-a-dia.

Gostou deste artigo? Recomende ❤, comente e compartilhe!