Aba Console: vendo mensagens e inspecionando variáveis

A aba Console é como um painel de conversa com o seu código.
Você pode:

• ver mensagens e erros
• testar comandos rapidamente
• inspecionar valores de variáveis
• entender o que está acontecendo em cada etapa do programa

Para que serve o Console no dia a dia?

Imagine que você está cozinhando e quer provar o prato durante o preparo.
No código, o console é essa “provinha”: ele mostra como os dados estão naquele momento.

Você usa o Console para:

• diagnosticar bugs
• validar valores
• acompanhar fluxo de execução
• testar ideias sem alterar arquivos

Comandos mais usados

console.log()

Mostra uma mensagem informativa.

const nome = "Lia";
console.log("Nome do usuário:", nome);

console.error()

Mostra mensagem de erro com destaque visual.

console.error("Falha ao carregar dados");

console.warn()

Mostra aviso (alerta de atenção).

console.warn("Campo opcional está vazio");

console.table()

Exibe arrays/objetos em formato de tabela.

const usuarios = [
  { id: 1, nome: "Ana" },
  { id: 2, nome: "Bruno" }
];

console.table(usuarios);

Inspecionando variáveis

Uma prática muito útil é logar variáveis em pontos estratégicos:

function calcularTotal(preco, quantidade) {
  console.log("preco:", preco);
  console.log("quantidade:", quantidade);

  const total = preco * quantidade;
  console.log("total calculado:", total);

  return total;
}

Assim você identifica rapidamente onde o valor ficou diferente do esperado.

Dica moderna: log com objeto

Em vez de vários logs separados, você pode agrupar:

const preco = 10;
const quantidade = 3;
const total = preco * quantidade;

console.log({ preco, quantidade, total });

Fica mais legível para depuração.

Executando código direto no Console

Você também pode digitar JavaScript direto na aba Console:

2 + 2

Resultado imediato: 4.

Isso é ótimo para testes rápidos de expressão, funções e seletores.

Exemplo com DOM:

document.querySelector("h1")

Erros comuns ao usar Console

• Logar variável antes de ela existir.
• Colocar logs demais e não limpar depois.
• Depender só de console.log sem usar breakpoints quando necessário.

Boas práticas

• Use mensagens claras:
  • ruim: "aqui"
  • melhor: "valor de total antes do desconto:"
• Prefira logs em pontos críticos do fluxo.
• Remova logs desnecessários antes de finalizar.
• Evite logar dados sensíveis (token, senha, documento pessoal).

Mini exemplo completo

function aplicarDesconto(total, desconto) {
  console.log("entrada:", { total, desconto });

  if (typeof total !== "number" || typeof desconto !== "number") {
    console.error("Parâmetros inválidos");
    return null;
  }

  if (desconto < 0 || desconto > 100) {
    console.warn("Desconto fora do intervalo esperado (0 a 100)");
  }

  const totalFinal = total - (total * desconto) / 100;
  console.log("saida:", { totalFinal });

  return totalFinal;
}

aplicarDesconto(200, 10);

Resumo da lição

• O Console é essencial para visualizar mensagens, erros e valores.
• log, warn, error e table ajudam em cenários diferentes.
• Inspecionar variáveis em pontos estratégicos acelera correções.
• Use Console com clareza e responsabilidade (sem expor dados sensíveis).