Pare de usar console.log!
Publicado em:
Tags: Javascript, Programação
Então você tá usando console.log
em todo lugar da sua aplicação?
Nesse artigo eu vou te mostrar algumas outras alternativas que vão melhorar e turbinar a forma como você debuga sua aplicação!
Interpolação
Como você tá fazendo a interpolação do seu console.log
com variáveis? Você tá fazendo algo tipo assim?
const a = 'World';
console.log('Hello ' + a);
Se você tá fazendo assim, não que esteja errado, mas existem formas melhores de fazer, olha só:
O operador %
A primeira forma é usando o operador %. Aliás, várias linguagens de programação atualmente fazem interpolação exatamente igual!
Nesse caso, você pode fazer algo assim:
console.log('Hello %s', a);
Existem outras opção também, como por exemplo: %i para números inteiros, %f para floats, etc. Isso é algo bacana para você pesquisar no Google e ver todas as outras opções!
Template String
Eu não sei como fica a tradução de Template String
para o português, então vai assim mesmo, hahaha!
Então, Template String é quando você cria uma string, mas ao invés de usar aspas simples ou duplas, vc usa essa aspas caída pra esquerda (eu não lembro o nome desse tipo de aspas hahaha), mas é isso aqui:
const a = `This is a template string`;
Mas é desnecessário criar uma string com essas aspas se você não for fazer interpolação, nesse caso é melhor usar as aspas normais mesmo.
Mas para fazer a interpolação usando essas aspas tortas, você precisa "encapsular" a variável dentro de ${}
.
Parece complicado, mas não é, vou te mostrar como ficaria usando o mesmo exemplo do começo:
const a = 'World';
console.log(`Hello ${a}`);
Desse jeito parece que o código fica até mais clean, né?
Estilizado
Você fazia idéia de que era possível adicionar estilo CSS ao console.log
?
Para fazer isso você só precisa começar o seu console.log
com %c
e o segundo argumento deve ser o CSS inline, saca só um exemplo:
console.log('%c I am a great text!', 'font-size: 26px; color: blue;');
Copia e cola isso no console do seu navegador aí pra você ver como fica. Muito louco, né?
Warnings, Errors, Infos
Aqui são outras formas de você gerar logs na sua aplicação em diferentes níveis, que você pode até filtrar depois no seu console do navegador.
Por exemplo, para gerar simples warnings, você faz da seguinte forma:
console.warn('This is some warning');
Para gerar erros e facilitar o seu debug da aplicação você pode fazer:
console.error('This is some error');
As vezes você quer gerar algum log somente de informação, mas que seja diferente do console.log
normal.
Fazendo dessa forma, você vai ter um ícone diferente no console, aliás:
console.info('Just a simple information');
E os testes, estão como?
Assert
Pois é! Você sabia que é possível rodar uns testes assim diretão? E sim! Você pode e é muito simples!
O primeiro argumento você passa o que você deseja testar e no segundo argumento você passa a mensagem que vai aparecer no caso de o teste falhar. Se o teste passar, não vai mostrar nada no console. Mas se liga como ele ficaria:
console.assert(1 !== 1, '1 is equal to 1');
Elementos do DOM
Vamos supor que você tenha algo assim no seu código:
const p = document.querySelector('p');
Então você tem na variável p
, o primeiro <p>
que aparecer na sua página.
Se você der um console.log(p)
você vai receber o elemento DOM, mas fica meio complicado de descobrir suas propriedades.
Mas exatamente para isso, temos o bravo console.dir
para nos salvar!
console.dir(p);
O console.dir
vai logar o elemento DOM como um objeto, facilitando de você ver suas propriedades, eventos, etc... FANTÁSTICO! \o/
Agrupando
Você já se viu na situação de por exemplo, colocar um console.log
dentro de um for
ou um outro loop qualquer e seu console começar a encher de spam?
Vamos ver um exemplo:
const dogs = [
{ name: 'Ricota', age: 2 },
{ name: 'Gorgonzola', age: 8 }
];
dogs.forEach(dog => {
console.log(`Dog: ${dog.name}`);
console.log(`Dog: ${dog.name} is ${dog.age} years old`);
console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
})
Se você executar esse código, vai te gerar 6 logs no console, nesse exemplo até dá pra ler e entender, mas imagina se tivéssemos uma lista com mais de 60 cachorros? Se tornaria totalmente ilegível! Mas nós podemos agrupar isso! Saca só!
Existem duas opções pra fazer isso:
console.group()
O console.group
vai agrupar isso tudo e inicialmente mostrar o grupo aberto (mas você pode fechar ele).
Ficaria algo assim:
dogs.forEach(dog => {
console.group(dog.name); // This is the group title
console.log(`Dog: ${dog.name}`);
console.log(`Dog: ${dog.name} is ${dog.age} years old`);
console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});
console.groupCollapsed()
A segunda forma é usar o console.groupCollapsed
. Ele vai agrupar da mesma forma, porém, nesse caso, os grupos começarão fechados e você pode abrir qual você quiser.
Veja um exemplo:
dogs.forEach(dog => {
console.groupCollapsed(dog.name); // This is the group title
console.log(`Dog: ${dog.name}`);
console.log(`Dog: ${dog.name} is ${dog.age} years old`);
console.log(`Dog: ${dog.name} is ${dog.age * 7} years old for real`);
console.groupEnd(dog.name); // To end the group, you MUST pass the same as you are using in your group title
});
Alguns detalhes para o agrupamento funcionar:
- Você precisa fechar o grupo com
console.groupEnd()
; - O nome do grupo precisa ser o mesmo quando cria o grupo e quando fecha o grupo;
Tabela
Hoje em dia a gente foge de uma tabelinha, não é mesmo? hahaha Mas, sim, você pode logar uma tabela no seu console! (e muitas vezes é muito útil)
Usando o mesmo exemplo dos cachorros (o exemplo anterior), podemos fazer algo assim:
const dogs = [
{ name: 'Ricota', age: 2 },
{ name: 'Gorgonzola', age: 8 }
];
console.table(dogs);
E no console poderíamos ver uma tabela com o cabeçalho contendo: index
, name
e age
.
Bacana, e pra limpar o console?
Vamos supor que você tem uma aplicação e você tá enchendo de console.log
nela e em um certo momento você quer limpar todos os logs, por serem desnecessários ou algo do tipo.
Nesse caso, você pode usar o console.clear()
, da seguinte forma:
console.clear();
E agora você vai ter um console novo e limpinho para sua debugação
, hahaha.
E é isso! Espero que esse artigo te ajude de alguma forma!