Lesson 3 of 6 · 12 min · 1 hands-on step

Debugging Like a Professional

A systematic way to find bugs quickly, without guessing.

Bugs are normal

Professional developers spend a large part of their time debugging. What separates juniors from seniors isn't fewer bugs. It's finding them faster.

The debugging method

  1. Reproduce: find exact steps or inputs that trigger the bug.
  2. Compare: what did you expect, and what actually happened?
  3. Hypothesize: where could the difference come from?
  4. Verify: add a console.log or a breakpoint to test your guess. Don't change code yet.
  5. Fix, then re-run your reproduction and your tests.

Tools

  • Read the error message. The type (TypeError, ReferenceError) and the line number are usually enough.
  • console.log your assumptions: console.log({ i, total }) labels each value.
  • Browser DevTools: set breakpoints in the Sources tab and step through code line by line.
  • Rubber duck: explain the code out loud, line by line. You'll often hear the bug.

Debugging AI-written code

When an AI assistant writes code for you, debug it exactly the same way. Don't paste the error back and accept whatever comes out. Understand why it broke. Interviewers increasingly ask "tell me about a bug you fixed", and "the AI fixed it" isn't an answer.

🧪 Practice

This average function returns wrong answers. Find and fix the bug.

Use the scientific method: run it, compare actual vs expected, form a hypothesis, then add a console.log to confirm before changing anything.

Also make it return 0 for an empty array instead of NaN.

JavaScript
function average(nums) {
  let total = 0;
  for (let i = 1; i < nums.length; i++) {
    total += nums[i];
  }
  return total / nums.length;
}

console.log(average([10, 20, 30])); // expected 20

Output appears here. Press Run or Ctrl/⌘ + Enter.

✅ Check your understanding

  1. What's the first thing to do when you find a bug?

Create a free account to track your progress.