Guilherme Toti

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? Heck yes, we can

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!

← Voltar para o início