🧠beginner

Debugging Like a Pro

Learn systematic debugging techniques — how to find and fix bugs without randomly changing code and hoping.

Everyone Has Bugs

Every programmer, from beginners to experts at Google, writes buggy code. The difference isn't writing perfect code — it's how quickly you find and fix the bugs. Debugging is a skill, and like any skill, it gets better with practice. Here's how to do it systematically instead of randomly changing things.

The Debugging Process

1. REPRODUCE — Can you make the bug happen consistently? What exact steps trigger it? 2. ISOLATE — Where is the bug? Use console.log() to check values at different points. The bug is between the last correct value and the first wrong value. 3. UNDERSTAND — Why is it happening? Read the error message carefully. Google the exact error text if needed. 4. FIX — Change the minimum amount of code needed. Don't rewrite everything. 5. VERIFY — Does the fix work? Did it break anything else?

Console.log() is Your Best Friend

javascript

// Buggy code: why is total wrong?
function calculateTotal(prices) {
  let total = 0;
  for (let i = 0; i <= prices.length; i++) { // BUG!
    total += prices[i];
  }
  return total;
}

// Add console.log to debug:
function calculateTotal(prices) {
  let total = 0;
  for (let i = 0; i <= prices.length; i++) {
    console.log(`i=${i}, prices[i]=${prices[i]}, total=${total}`);
    total += prices[i];
  }
  return total;
}

// Output shows: i=3, prices[3]=undefined!
// Fix: change <= to <
// for (let i = 0; i < prices.length; i++)

Common Bug Types

• Off-by-one: loops going one too far or one too short (i <= length instead of i < length) • Typos: variable name misspelled (total vs totla) • Type errors: adding a number to a string ("5" + 3 = "53" not 8) • Undefined: accessing something that doesn't exist yet • Logic errors: the code runs but gives wrong results (using + instead of -)

Pro Tip

Read the error message. Seriously. Most beginners skip it because it looks scary, but it tells you exactly what went wrong and which line it's on. The error message is trying to help you.

Try It Yourself

This code has 3 bugs. Find and fix them all: function avgScore(scores) { let sum = 0; for (let i = 1; i <= scores.length; i++) { sum += scores[i]; } return sum / scores.lenght; }

How to Solve Any Coding Problem

Ready to build?

Put what you learned into practice — pick a project and start coding.

Start Building Free