Using Debuggers

A debugger is a special tool built into your IDE (like VS Code or IntelliJ) that allows you to pause your program while it’s running. This gives you a “snapshot” of your code at a specific moment in time.

If print statements are breadcrumbs, a debugger is a microscope.

Key Debugger Concepts

1. Breakpoints

A breakpoint is a “pause button.” You place it on a line of code, and when the program reaches that line, it stops and waits for you.

2. The Variable Panel

While the program is paused, you can see the current value of every variable in your code. No more console.log()!

3. Step Commands

Once paused, you can control the program’s flow:

Step Over: Go to the next line.
Step Into: Go inside a function call.
Step Out: Finish the current function and go back to the caller.
Continue: Run until the next breakpoint.

Architecture Diagram (The Debugging Interface)

Most modern debuggers look like this:

    +------------------------------------------+
    | [ Call Stack ] | [ Source Code ]         |
    | at login()     | 10: function login(u) { |
    | at main()      | 11: ● if (!u) {         | ← Breakpoint (●)
    |----------------| 12:     return;         |
    | [ Variables ]  | 13: }                   |
    | u: {id: 123}   |                         |
    | price: null    | [ Debug Toolbar ]       |
    |                | [ > ] [ -> ] [ ↓ ] [ ^ ]| ← Step Tools
    +------------------------------------------+

Real-World Scenario: A “Missing Discount” Bug

The Problem: The total price is wrong. The $10 discount isn’t being applied.

The Debugging:

Place a breakpoint on the line where the total price is calculated.
Run your app in “Debug Mode.”
Trigger the checkout process.
When the app pauses, check the variables panel.
You see discount = 0. But you expected it to be 10.
Use Step Into to go inside the calculateDiscount() function.
You discover a logic error: if (user.isNewMember) is checking a property that doesn’t exist!

Why Use a Debugger Instead of Prints?

1. No Code Changes Required

You don’t have to keep adding and removing console.log() lines. Just click to add a breakpoint.

2. Inspecting “Complex” Objects

Printing a 1,000-line object to the console is messy. In a debugger, you can expand and collapse parts of the object easily.

3. Modifying Variables on the Fly

Most debuggers allow you to change the value of a variable while the app is paused. You can “force” an if statement to be true to see what happens!

Common Beginner Mistakes

Not Using the Debugger at All: Many beginners think debuggers are “too complex.” They aren’t! Once you learn them, you’ll never go back to only using prints.
Stepping “Into” Library Code: If you click “Step Into” on a standard function (like Array.map()), you’ll find yourself reading thousands of lines of complicated internal code. Use Step Over for libraries!
Forgetting You Have a Breakpoint: Sometimes your app will “freeze” because you left a breakpoint active in another file. Always check the “Breakpoints” panel!

Advice for Beginners

Learn the Hotkeys: (F5 to Continue, F10 to Step Over, F11 to Step Into). This will make you much faster.
Use “Conditional” Breakpoints: You can set a breakpoint to only pause if a certain condition is true (e.g., if (userId === 99)).
Try it Today: The next time you have a bug, spend 10 minutes trying to find it with a debugger before you add any print statements.

Next Lesson

Now let’s look at the hardest bugs of all—when the code doesn’t crash, but it’s still wrong:

➡ Debugging Logic Errors