Maneiras de imprimir coisas em JavaScript

Se você programa em JavaScript, o console.log é provavelmente seu melhor amigo. Ele é o herói anônimo que nos ajuda a “espiar” o que está acontecendo por trás das cortinas do nosso código. Mas e se eu te disser que o console tem um arsenal de outras ferramentas poderosas que podem transformar seu processo de depuração?

Prepare-se para ir além do console.log e descobrir como o objeto console pode te ajudar a ser um debugger mais eficiente e um desenvolvedor mais organizado!

---

console.assert(): O Guardião da Lógica

Imagine que você precisa verificar uma condição crítica no seu código, mas só quer ser avisado se algo der errado. É para isso que o console.assert serve!

Ele recebe uma expressão booleana e uma mensagem. A mensagem só é exibida se a expressão for false, indicando um erro de assertion. Se for true, silêncio absoluto.

Exemplo:

JavaScript

let a = 4;
let b = 5;

console.assert(a === b, "Erro: 'a' e 'b' deveriam ser iguais!"); 
// Saída (se a !== b): Assertion failed: Erro: 'a' e 'b' deveriam ser iguais!

---

🔴 console.error(): Para os Erros que Precisam Gritar

Enquanto o console.log é discreto, o console.error é feito para chamar a atenção. Ele imprime a mensagem no console com uma formatação visual de erro, geralmente em vermelho e com um ícone de “X”, facilitando a identificação imediata de problemas.

Exemplo:

JavaScript

console.error("Oops! Algo crítico aconteceu e precisamos investigar!");

---

🟠 console.warn(): Um Alerta Amigável, mas Necessário

Similar ao console.error, mas com um tom menos alarmante. O console.warn é ideal para avisos que não são erros fatais, mas que merecem atenção. Geralmente, ele exibe a mensagem em amarelo, com um ícone de “triângulo de aviso”.

Exemplo:

JavaScript

console.warn("Atenção: A função X está depreciada e será removida em breve!");

---

📊 console.table(): Organize Seus Dados como Profissional

Cansado de ver objetos e arrays expandidos infinitamente no console? O console.table é a sua solução! Ele imprime objetos e arrays em um formato de tabela elegante e fácil de ler, perfeito para visualizar grandes volumes de dados.

Exemplo com Objeto:

JavaScript

let pessoa = {
  nome: "Pedro",
  idade: 14,
  pai: "Afonso",
  mae: "Josefina",
};

console.table(pessoa);

Exemplo com Array:

JavaScript

let numeros = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];

console.table(numeros);

Exemplo com Array de Arrays:

JavaScript

let matriz = [["a", "b"], [5, 4, 7, 10], ["bananas", "maçãs"]];
console.table(matriz);

---

🗂️ console.group() e console.groupEnd(): Organizando seu Console

Seu console está uma bagunça com tantas mensagens? Os métodos console.group() e console.groupEnd() são seus aliados para criar blocos de mensagens indentados e rotulados, tornando o debugging de funções ou módulos muito mais limpo.

Tudo o que for logado entre console.group() e console.groupEnd() pertencerá àquele grupo.

Exemplo Simples de Função:

JavaScript

function soma(a, b) {
  console.group("Detalhes da Função soma"); // Inicia um grupo
  console.log(`Parâmetros: a = ${a}, b = ${b}`);
  let resultado = a + b;
  console.log(`Resultado: ${resultado}`);
  console.groupEnd(); // Fecha o grupo
  return resultado;
}

soma(1, 7);
soma(2, 2);

Você verá dois grupos no console, um para cada chamada da função soma, com suas respectivas informações organizadas.

Exemplo de Grupos Aninhados:

É possível criar grupos dentro de outros grupos para uma organização ainda mais granular:

JavaScript

function f1() {
  console.group("Função 1");
  console.log("Executando Função 1");
  f2();
  console.groupEnd();
}

function f2() {
  console.group("Função 2");
  console.log("Executando Função 2");
  f3();
  console.groupEnd();
}

function f3() {
  console.group("Função 3");
  console.log("Executando Função 3");
  console.groupEnd();
}

f1();

---

➖ console.groupCollapsed(): Mantendo a Ordem por Padrão

O console.groupCollapsed() funciona exatamente como o console.group(), mas com uma diferença crucial: os grupos são iniciados colapsados por padrão no console do navegador. Isso significa um console mais limpo, onde você só expande os grupos que realmente quer inspecionar.

JavaScript

function f1Collapsed() {
  console.groupCollapsed("Função 1 (Colapsada)"); // Inicia colapsado
  console.log("Executando Função 1");
  f2Collapsed();
  console.groupEnd();
}

function f2Collapsed() {
  console.groupCollapsed("Função 2 (Colapsada)");
  console.log("Executando Função 2");
  f3Collapsed();
  console.groupEnd();
}

function f3Collapsed() {
  console.groupCollapsed("Função 3 (Colapsada)");
  console.log("Executando Função 3");
  console.groupEnd();
}

f1Collapsed();

Importante: No ambiente Node.js, a funcionalidade de colapsar grupos pode não ser renderizada da mesma forma que nos navegadores, aparecendo expandidos mesmo com console.groupCollapsed.

---

🎉 Conclusão: Um Console Cheio de Poderes!

O console.log é apenas a ponta do iceberg! Ao dominar métodos como assert, error, warn, table, group e groupCollapsed, você transforma seu console de um simples depurador em uma ferramenta analítica robusta.

Comece a integrá-los no seu fluxo de trabalho e veja como o debugging em JavaScript pode se tornar muito mais eficiente, organizado e até divertido!