Muito mais do que console.log()

Quando se aprende JavaScript uma das primeiras coisas que nos ensinam é usar o console.log()

E até agora em muitos cursos foi a única maneira de fazer debug do código. Mas existem muitos outros métodos pouco conhecidos, que podem ser muito úteis.

Irei listar o que achei mais interessante, sugiro darem uma olhada na documentação do MDN que está bem completa.

Variáveis ​​dentro do log

Você sabia que pode usar partes do seu log como variáveis?

console.log("%s tem %d anos.", "Rodrigo", 7)

Neste exemplo, %s refere-se a uma opção de string incluída após o valor inicial. Isso se referiria a “Rodrigo”.

o %d refere-se a uma opção de dígito incluída após o valor inicial. Isso se refere a 7.

O resultado desta declaração seria: “Rodrigo tem 7 anos.”

console.count()

Mostra o número de vezes que esta linha foi chamada com a label fornecida.

console.error(object[, object...])

Emite uma mensagem de erro. Você pode usar substituição de string e outros argumentos adicionais com este método

console.table()

Exibe dados, como objeto e array, como uma tabela.

console.time(name)

Inicia um contador de tempo com o nome especificado no parâmetro name. Até 10.000 contadores de tempo podem ser rodados por página.

CSS

É possível aplicar estilo as mensagens no console do browser. Utilize um delimitador %c junto ao texto, em seguida, passe a estilização desejada como parâmetro.

console.log('%cOlá%c, seja bem vindo%c!', 'color: red;', 'font-weight: bold;', 'color: yellow;');

console.clear();

Por fim, para limpar a bagunça após várias mensagens de logs, use o método .clear() para limpar o console.

Dica:

Uma extensão interessante para usar no Visual Studio Code e que ajuda bastante nos console.log da vida é “Wrap Console Log”

Usem e me digam o que acham dessa extensão...