JavaScript: Erros e Depuração em JavaScript

Última atualização: 2026-10-13

Escrever código sem bugs é impossível — até o criador do JavaScript produziu o bug typeof null === "object" em apenas 10 dias. Então aprender a encontrar bugs e tratar erros é até mais importante do que aprender a escrever código.

Métodos BOM relacionados：console.error() console.table() console.log() try...catch JSON.parse finally return Error catch

1. Tratamento de Erros e Depuração

SyntaxError é capturado antes da execução do código (fase de parsing). Os outros três são erros de execução.

(2) try...catch...finally

Use try...catch para capturar erros de execução e impedir que seu programa trave:

<script>
try {
  const dados = JSON.parse('{json invalido}');
} catch (erro) {
  console.log("Falha no parsing:", erro.message);
} finally {
  console.log("Trabalho de limpeza");
}
</script>

O objeto erro no catch tem duas propriedades comumente usadas:

• erro.message — uma descrição do erro
• erro.name — o nome do tipo de erro

(3) throw — Lançando Erros Manualmente

try...catch só pode capturar erros de execução, mas erros de lógica de negócio precisam ser lançados manualmente:

<script>
function definirIdade(idade) {
  if (typeof idade !== "number" || idade < 0) {
    throw new Error("Idade deve ser um número positivo");
  }
  console.log("Idade definida como: " + idade);
}

try {
  definirIdade(-5);
} catch (e) {
  console.log(e.message);
}
</script>

throw pode lançar qualquer valor, mas usar new Error() ou suas subclasses é recomendado — elas incluem informações de stack trace.

(4) Mensagens de Erro Personalizadas

Use subclasses de Error ou propriedades personalizadas para fornecer informações de erro mais ricas:

<script>
class ErroValidacao extends Error {
  constructor(campo, mensagem) {
    super(mensagem);
    this.name = "ErroValidacao";
    this.campo = campo;
  }
}

try {
  throw new ErroValidacao("email", "Formato de email inválido");
} catch (e) {
  console.log(e.name + " [" + e.campo + "]: " + e.message);
}
</script>

(5) DevTools do Navegador (F12)

Depuração com breakpoints é a técnica de depuração mais poderosa: clique em um número de linha no painel Sources para definir um breakpoint, atualize a página, e o código pausa naquele ponto — percorra linha por linha, inspecione variáveis e examine a pilha de chamadas.

(6) A Família console

console.table é especialmente útil para exibir arrays de objetos — muito mais legível que log.

(7) Dicas de Depuração

• Comente metades: Comente metade do código, veja qual metade tem o problema, e vá reduzindo passo a passo
• console.log em todo lugar: Imprima valores de variáveis em pontos-chave — primitivo, mas eficaz
• Depuração com breakpoints: Mais poderoso que console.log — pause a execução e modifique variáveis em tempo real
• Depuração com pato de borracha: Explique seu código linha por linha para um pato de borracha (ou colega). Frequentemente, você encontra o bug no meio da explicação.

▶ Exemplo: try/catch para Parsing de JSON

▶ Exemplo: Erros Personalizados e Validação de Formulário

▶ Exemplo: Referência Rápida de Tipos de Erro e Métodos de Console

Métodos BOM relacionados：console.error() console.table() console.log() try...catch JSON.parse finally return Error catch

❓ Perguntas Frequentes

📖 Resumo

• try/catch captura erros em tempo de execução; finally sempre executa, perfeito para limpeza
• throw levanta erros manualmente — prefira throw new Error("mensagem")
• Objetos Error têm propriedades name e message; o console mostra o stack trace completo
• DevTools (F12): Painel Sources para breakpoints, Watch para variáveis, execução passo a passo
• Métodos do console: log/warn/error/table/group/time/timeEnd aumentam a eficiência de depuração

📝 Exercícios

1. Escreva uma função divisaoSegura(a, b) que use try...catch para tratar divisão por zero (dica: dividir por zero em JS não lança erro — você precisa verificar e lançar você mesmo). Retorne o resultado ou uma mensagem de erro.
2. Escreva uma função parseJSONSeguro(str) que faça parsing de uma string JSON. Em caso de falha, retorne { sucesso: false, erro: <mensagem de erro> }. Em caso de sucesso, retorne { sucesso: true, dados: <resultado do parsing> }.
3. Escreva uma função tentarNovamente(fn, vezes): execute fn, e se lançar erro, tente novamente até vezes vezes. Se todas as tentativas falharem, lance o último erro. Implemente com try...catch.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós