DEV Community

Cover image for Aprenda a explorar o potencial escondido do console em JS
Renan Castro
Renan Castro

Posted on

Aprenda a explorar o potencial escondido do console em JS

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();
Enter fullscreen mode Exit fullscreen mode

Com isso temos:

Image description

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");
Enter fullscreen mode Exit fullscreen mode

Temos então a mensagem de erro:

Image description

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");
Enter fullscreen mode Exit fullscreen mode

Obtemos:
Image description

Console.table

O nome é bem sugestivo.

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

Image description

Console.error() e console.warn()

Você pode exibir mensagens de erro e alerta

console.error("ERROR");
console.warn("WARN");
Enter fullscreen mode Exit fullscreen mode

Image description

Console.clear()

Limpe facilmente seu console com o clear

console.log("#1");
console.clear();
console.log("#2");
Enter fullscreen mode Exit fullscreen mode

Image description

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);
Enter fullscreen mode Exit fullscreen mode

Image description

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");
}
Enter fullscreen mode Exit fullscreen mode

Image description

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ê.

Top comments (0)