Aprenda Noções Básicas de Depuração

Deslize para mostrar o menu

Depuração é uma habilidade fundamental para qualquer desenvolvedor JavaScript. Ao escrever e executar código, diversos tipos de erros podem surgir. Compreender como ler mensagens de erro e conhecer os equívocos mais comuns ajudará a corrigir problemas rapidamente e manter o andamento dos projetos.

Os erros mais frequentes em JavaScript incluem:

Erros de sintaxe: ocorrem quando a estrutura do código está incorreta, como parênteses ou chaves ausentes;
Erros de referência: acontecem ao tentar utilizar uma variável que não foi declarada ou está fora do escopo;
Erros de tipo: surgem quando um valor é utilizado de maneira inesperada, como chamar uma função em algo que não é uma função.

Quando um erro ocorre, o console do navegador exibirá uma mensagem de erro. Essa mensagem geralmente inclui o tipo do erro, uma breve descrição e o número da linha onde o problema foi detectado. Sempre leia essas mensagens com atenção—elas são a primeira pista para solucionar qualquer questão.


              1234567891011121314151617181920212223
            
// Example: Debugging with console.log and breakpoints

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    // Add a console.log to inspect each item
    console.log("Item at index", i, ":", JSON.stringify(items[i]));
    total += items[i].price; // Potential error if items[i] is missing 'price'
  }
  return total;
}

const cart = [
  { name: "Book", price: 12 },
  { name: "Pen", price: 2 },
  { name: "Notebook" } // Missing price property
];

const total = calculateTotal(cart);
console.log("Total:", total);

// To debug further, set a breakpoint on the line inside the loop in your browser's developer tools.
// Step through the code to watch how 'total' and 'items[i]' change with each iteration.

Para depurar de forma eficaz, siga uma abordagem sistemática:

Reproduza o erro de maneira consistente para poder observá-lo ao testar soluções;
Leia a mensagem de erro e anote o nome do arquivo e o número da linha;
Utilize console.log para exibir valores e acompanhar o fluxo do código;
Defina breakpoints nas ferramentas de desenvolvedor do navegador para pausar a execução e inspecionar variáveis;
Altere apenas um aspecto por vez e teste após cada modificação para isolar o problema;
Fique atento a armadilhas comuns como erros de digitação, erros de contagem em loops ou propriedades ausentes em objetos.

Ao praticar essas técnicas, será possível ganhar mais confiança e eficiência na identificação e correção de bugs em código JavaScript.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 1. Capítulo 18

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Seção 1. Capítulo 18