JavaScript Debugging: Finding and Fixing Errors

Master the art of bug hunting. Learn to use the console, breakpoints, and scope to write flawless JavaScript.

Lesson ProgressStep 1 of 8
🐞
⭐ 0 EXP

Welcome! Let's hunt for some bugs. Every developer deals with them. The trick is knowing how to find them.

/* A wild bug appears... 🐞 */

The Magnifying Glass: `console.log()`

The console.log() method is the most fundamental tool in any JavaScript developer's belt. It allows you to print any value (variable, string, object, etc.) to the browser's console.

You can use it to check the value of a variable at a specific point in your code, or even just to confirm that a certain part of your code is being executed.

let user = "Alice";
console.log(user); // Outputs: "Alice"

let score = 95;
console.log("Current score:", score); // Outputs: "Current score: 95"

To see the output, you must open your browser's "Developer Tools" (usually by pressing F12 or right-clicking and selecting "Inspect") and clicking on the "Console" tab.

System Check

What is the primary purpose of `console.log()`?

Advanced Holo-Simulations

⭐ 0 EXP

Log in to unlock these advanced training modules and test your skills.

Achievements

🔦
Log Master

Use console.log() to inspect a variable's value.

⏸️
Breakpoint Pro

Pause code execution using the 'debugger' statement.

🔬
Scope Inspector

Correctly identify a variable's value from the scope.

Mission: Fix the Broken Function

The `calculateTotal` function sometimes returns `NaN` (Not a Number). Use `console.log()` or `debugger;` to investigate why. The AI will provide hints.

A.D.A. Feedback:

> System integrity looks stable. Code is valid.

Challenge: Order the Debugging Steps

Drag the steps into the correct logical order for finding and fixing a bug.

console.log(variable);
Identify the unexpected behavior (the bug).
Inspect variables in the Scope panel.
Set a breakpoint or add `debugger;`.

Challenge: Complete the Syntax

Fill in the missing parts of the commands to log a message and pause execution.

function findBug() {.("Checking...");; }

Consult A.D.A.

Community Holo-Net

Peer Project Review

Submit your "Broken Function" fix for feedback from other Net-Runners.

Support Us

Beyond `console.log`: A Developer's Guide to Efficient Bug Squashing

Every developer, from novice to veteran, writes bugs. It's a fundamental part of programming. A great developer isn't defined by writing bug-free code (which is impossible) but by their ability to find and fix bugs efficiently. Your most powerful ally in this fight is your browser's built-in debugger. While console.log() is a trusty sledgehammer, the full suite of tools is a scalpel.

Level 1: The `console.log()` Sledgehammer

This is where everyone starts, and for good reason. It's simple, effective, and non-intrusive.

  • Check Variable Values: The most common use. `console.log("User object:", user);`
  • Trace Execution: "Am I even in this function?" A simple `console.log("handleSaveClick called");` can save you hours.
  • Advanced Logging: Don't stop at `.log()`.
    • console.warn(): Prints a yellow warning.
    • console.error(): Prints an angry red error, complete with a stack trace.
    • console.table(myArrayOrObject): Prints a beautiful, sortable table. Incredibly useful for arrays of objects.
    • console.group() / console.groupEnd(): Indents your logs into collapsible groups.

The Limit: `console.log()` is passive. It tells you what happened in the past. It can't stop the code and let you look around at the *exact moment* of the crime.

Level 2: The `debugger;` Scalpel

This one-word statement is your pause button. When you write debugger; in your code, the browser will *automatically* pause execution on that line *if* the developer tools are open.

This is a game-changer. The code freezes, and the browser hands you control. You can now open the "Scope" panel and see the value of *every single variable* at that exact moment. You can check the "Call Stack" to see how you got there.

Level 3: Mastering the Debugger UI

Writing `debugger;` is great, but it requires changing your code. The "Sources" panel in your dev tools lets you do the same thing visually, and more.

Visual Breakpoints

Clicking a line number in the "Sources" tab sets a breakpoint. The code will pause just like debugger;, but without you having to modify your files.

The Scope & Call Stack

When paused, the Scope panel shows you all variables (Local, Closure, Global). The Call Stack shows the "path" of functions that led to this point.

Once paused, you can "step" through your code line by line:

  • Step Over: Executes the current line and moves to the next. (Won't go *inside* a function on that line).
  • Step Into: If the line calls a function, it jumps *into* that function, pausing at its first line.
  • Step Out: Finishes the current function and pauses at the line where it was called.
Key Takeaway: Stop guessing. Use `console.log` to get clues. When a clue is interesting, set a breakpoint (`debugger;` or visual) and inspect the scene. Check the Scope. Check the Call Stack. You will find the bug.

JavaScript Debugging Glossary

console
A global object that provides access to the browser's debugging console. Contains methods like `.log()`, `.warn()`, `.error()`, and `.table()`.
Breakpoint
An intentional stopping or pausing point in a script. It can be set by clicking a line number in the "Sources" panel or by using the debugger; statement.
debugger;
A keyword in JavaScript that, when encountered, will pause the execution of the code if the browser's developer tools are open.
Scope
The context of the currently executing code. The "Scope" panel in the debugger shows which variables are accessible and their current values, typically broken down into "Local", "Closure", and "Global" scopes.
Call Stack
A list of all the functions that are currently being executed, from the most recent function call at the top to the initial global script at the bottom. It shows the "path" the code took to get to the current breakpoint.
Step Over
A debugger control that executes the current line of code and pauses on the *next* line. If the current line contains a function call, it will execute the *entire* function and pause after it returns.
Step Into
A debugger control that will "step into" a function call on the current line, pausing at the *first* line inside that function.
Step Out
A debugger control that will continue execution until the current function finishes, pausing at the line *after* the original function call.
Watch
A feature in the debugger that allows you to "watch" a specific variable or expression. Its value will be continuously updated in the panel as you step through the code.

About the Author

Author's Avatar

TodoTutorial Team

Passionate developers and educators making programming accessible to everyone.

This article was written and reviewed by our team of senior JavaScript developers, who have collectively spent decades hunting bugs in complex web applications.

Verification and Updates

Last reviewed: November 2025.

We strive to keep our content accurate and up-to-date. This tutorial is based on the latest ECMA-262 specifications and reflects modern browser debugging best practices.

External Resources

Found an error or have a suggestion? Contact us!