Aprenda a explorar o potencial escondido do console em JS

Renan Castro — Tue, 06 Sep 2022 13:05:02 +0000

Um informação que muitas vezes passa desapercebido para muitos iniciantes é de que o console é um objeto e o seu tão usado log() é apenas um dos diversos outros métodos que esse objeto possui.

Hoje vou te mostrar quais são esses outros métodos e como explorar todo o potencial do console.

Console.group()

Já imaginou agrupar seus console.log() e conseguir organizar os dados no console do navegador?

console.group("My group");
console.log("#1");
console.log("#2");
console.log("#3");
console.groupEnd();

Com isso temos:

Console.assert()

Com esse comando é possível realizar uma checagem de alguma condição, retornando um erro caso seja false.

console.assert(2 > 1, "Mensagem de erro, 2 não é maior que 1");
console.assert(2 > 3, "Mensagem de erro, 2 não é maior que 3");

Temos então a mensagem de erro:

Se é um objeto...

Podemos usar também a desestruturação de objetos no nosso console e até renomear nossos métodos:

const { assert } = console;
assert(2>3,"Error");
const { log: message } = console;
message("Eu era o log");

Obtemos:

Console.table

O nome é bem sugestivo.

const frutas = ["maça", "banana", "laranja", "uva"];
console.table(frutas);

Console.error() e console.warn()

Você pode exibir mensagens de erro e alerta

console.error("ERROR");
console.warn("WARN");

Console.clear()

Limpe facilmente seu console com o clear

console.log("#1");
console.clear();
console.log("#2");

Console.time() e console.timeEnd()

O console.time() vai iniciar uma contagem que será finalizada quando chamarmos o console.timeEnd() com mesmo nome. Com esse método é possível ver o tempo, em milissegundos, decorrido desde a execução de alguma parte do seu código.

console.time("Tempo");
setTimeout(() => {
   console.timeEnd("Tempo");
}, 2000);

Console.count()

Conta o número de vezes que ele foi exibido.

const arr = [1,2,3,4]
console.count("contador");
for(let i in arr){
    console.count("contador");
}

Conclusão

Esses foram alguns dos métodos que o console possui e que podem facilitar seu trabalho no dia a dia. Espero que pelo menos um deles seja útil para você.

DEV Community: Renan Castro