Debugging

Bugs are a normal part of programming—even experienced developers make mistakes! The key skill isn't avoiding all bugs, but knowing how to find and fix them efficiently.

What Is Debugging in Programming?

Debugging is the process of working out why a program does not do what you expected, and then fixing it. The thing you are hunting is a bug: code that crashes with an error, produces the wrong answer, or behaves strangely.

Debugging is not guesswork. It is a loop you repeat until the cause is cornered: observe what actually happened, form one guess about why, make the smallest change that would prove or disprove that guess, and run it again. Beginners get stuck mostly because they change several things at once and can no longer tell which change did what.

Types of Errors

// Missing closing parenthesis
console.log("Hello"  // SyntaxError!

// Missing quotes
let name = Alice;    // SyntaxError!

// Using undefined variable
console.log(userName);  // ReferenceError!

// Calling method on undefined
let user;
console.log(user.name);  // TypeError!

// Wrong divisor: two numbers, divided by three
let a = 4, b = 6;
let average = (a + b) / 3;  // 3.333… — should be / 2, giving 5

// Off-by-one: <= runs one iteration too many
let arr = ["a", "b", "c"];
for (let i = 0; i <= arr.length; i++) {'{'}
  console.log(arr[i]);      // "a", "b", "c", then undefined
{'}'}
// Fix: i < arr.length — valid indexes stop at length - 1

Reading Error Messages

Error messages are your friends! They tell you:

• What went wrong (the error type)
• Where it happened (file and line number)
• Why (the error message)

Uncaught ReferenceError: userName is not defined
    at script.js:5:13

// Breaking this down:
// • Error type: ReferenceError
// • Problem: userName is not defined
// • Location: script.js, line 5, column 13

Try It Yourself

Debugging Techniques

1. console.log() - The Classic

Print values at different points to see what's happening:

function findMax(numbers) {
  console.log("Input:", numbers);  // What did we receive?

  let max = numbers[0];
  for (let num of numbers) {
    console.log("Checking:", num, "Current max:", max);
    if (num > max) {
      max = num;
      console.log("New max found:", max);
    }
  }

  console.log("Final result:", max);
  return max;
}

2. Check Your Assumptions

When code doesn't work, ask yourself:

• Is this variable what I think it is?
• Is this condition evaluating as I expect?
• Is this function being called at all?
• Am I accessing the right index/property?

3. Isolate the Problem

Comment out code to find exactly where things break:

// Comment out suspicious parts
function processData(data) {
  // Step 1
  let cleaned = cleanData(data);
  console.log("After step 1:", cleaned);

  // Step 2 - does it break here?
  // let transformed = transform(cleaned);
  // console.log("After step 2:", transformed);

  // Step 3
  // return format(transformed);
}

4. Browser Developer Tools

Common Bugs and Fixes

Debugging Mindset

Quick Quiz

Key Takeaways

• Bugs are normal—every programmer deals with them
• Read error messages carefully—they tell you what's wrong and where
• console.log() is your best friend for tracking values
• There are three types of errors: syntax, runtime, and logic
• Isolate problems by testing small pieces of code
• Browser developer tools are powerful debugging helpers

Congratulations!

You've completed all the core programming concepts! You now understand variables, data types, operators, conditionals, loops, functions, arrays, objects, and debugging. These fundamentals apply to every programming language!