JavaScript Debugging

Debugging means finding and fixing mistakes (bugs) in your code. Bugs are normal: every programmer writes them every day. The skill is not avoiding them, it is locating them quickly. The key idea of this whole section: when code fails, beginners guess; debuggers check facts.

// Why Code Does Not Work

Code fails for two broad reasons. A syntax error breaks the grammar rules, so the script never runs (JS Errors). A logic error runs fine but does the wrong thing, often with no message at all (JS Silent Errors). Logic errors are the hard ones, because nothing tells you where to look.

// A Debugging Habit: Read, Reproduce, Reduce, Fix

1. Read the error message, all of it: the type, the message, and the line number
2. Reproduce the problem: find the exact steps or input that make it happen every time
3. Reduce it: cut the code down to the smallest example that still fails
4. Fix it, one change at a time, and test after each change

// Step 1: Look in the Console

Every browser has built-in developer tools with a console that shows errors and messages from JavaScript. If your code "does nothing," the console almost always says why. Open it with:

// Step 2: Use console.log()

console.log() prints values to the console, so you can see what your code is really doing instead of what you think it is doing:

let price = 50;
let quantity = 3;
let total = price * quantity;
console.log("Total:", total);

// Step 3: Confirm Your Assumptions

Many bugs happen because you assume a value is something it is not. Check the value and its type:

let x = 5;
let y = "5";              // maybe it came from a text box

console.log(x + y, typeof (x + y));
console.log(x + Number(y));

The log shows the bug right away: y was a string, so + joined instead of adding (JS Type Coercion).

// Reading the Two Most Common Errors

Click the file and line number on the right of an error in the console to jump straight to the line. Debug Errors covers many more messages.

// A Common Beginner Mistake

Using = (assign) instead of === (compare) in a condition:

let x = 10;
if (x = 5) {
  console.log("This runs");
}
console.log(x);

Fixed: if (x === 5). If an if behaves strangely, check it for a lone = first.

// A Debugging Checklist

1. Check the console for errors
2. Read the whole error message, including the line number
3. Log values (and their types) with console.log()
4. Reduce the problem to a small example
5. Fix one thing at a time, and test after each change

The next lessons go deeper: Debug Console (more than console.log), Debug Breakpoints (pausing code to look inside), Debug Errors (what each message means), and Debug Async (code that runs later).

// Quick Check

let a = 5;
let b = document.getElementById("box").value;   // the user typed 5
console.log(a + b);

// Try It

▶ Open Playground

1. Click Open Playground. Calculate the total, log it with a label, and check it
2. Cause a ReferenceError on purpose and read the line number in the error
3. Recreate the if (x = 5) bug and fix it
4. Open your browser's own console with the keyboard shortcut from this lesson, and run one of your lines there too