JavaScript Debugging Tools: Finding and Fixing Errors

Master the art of debugging to write better code, faster. Learn how to use your browser's built-in tools to become a bug-hunting expert.

🐞

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 Detective's Magnifying Glass: console.log()

The simplest debugging tool is `console.log()`. You can use it to print the value of variables, objects, or any message to the browser's developer console. It's like leaving clues for yourself to understand what the code is doing at any given moment.

The Pause Button: The 'debugger' Statement

The `debugger;` statement is a powerful command. When the browser's developer tools are open, this line of code acts as a deliberate breakpoint, pausing the execution of your script. This allows you to inspect everything at that exact point in time.

Visual Debugging: Setting Breakpoints

Instead of writing `debugger;`, you can set breakpoints directly in your browser's dev tools. By clicking on a line number in the 'Sources' panel, you tell the browser to pause execution whenever it reaches that line. This is cleaner than modifying your code.

Inspecting the Scene: The Scope Panel

When the code is paused, the 'Scope' panel is your best friend. It shows you all the variables and their current values that are accessible at that point—including local (within the function) and global variables. It's the key to finding out why a variable doesn't have the value you expect.

Practice Zone

Interactive Test 1: Assemble the Debugger

A user's `id` is `null` instead of a number. Drag the debugging tools into the function to investigate the problem.

Arrastra en el orden correspondiente.

Arrastra las opciones:

debugger;

console.log(user);

Completa el código:

function checkUser() {______const user = { id: null };

// Investigate here______

// And print the value______}

Unlock with Premium

Interactive Test 2: Fill in the Tools

Complete the code snippet below by filling in the blanks with the correct JavaScript debugging commands.

Rellena los huecos en cada casilla.

function calculateTotal(price, quantity) {
  const total = price * quantity;
  ("Calculating total:", total);

  if (isNaN(total)) {
     // Pause here if total is not a number
  }
  return total;
}

Unlock with Premium

Practice Example: Find the Bug

A function `findBug` is not working as expected. Use the `debugger;` statement to pause execution and find out what the value of `user.id` is before the `console.log` runs.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

function findBug() {
  const user = { name: "Alex", id: null };
  // What's the value of id?
  debugger;
  console.log("User ID is:", user.id);
}

findBug();

Unlock with Premium

Knowledge Check

What is the primary function of the 'debugger;' statement in JavaScript?

Unlock with Premium

Debugging in the Real World

Debugging isn't just a tool; it's a systematic process. Professional developers combine browser tools with a logical mindset to efficiently solve problems.

1. Replicate the Bug Consistently

You can't fix what you can't find. The first step is to identify the exact actions that cause the bug. Is it a button click? Page load? Specific user input? Once you can reliably reproduce it, you're halfway to solving it.

2. Isolate the Problem Area

Don't try to debug your entire application at once. Use your knowledge of the code to narrow down the search. If a shopping cart total is wrong, the bug is likely in the `calculateTotal` function, not the page footer. Use breakpoints to confirm your theory.

3. Analyze the State with Breakpoints

Set a breakpoint just before the suspected line of code. When the code pauses, inspect the 'Scope' panel. Are the variables what you expect? Is an object `null` or `undefined`? Is a number actually a string? This is where most bugs are revealed.

Browser developer tools showing a breakpoint and scope

Practical Takeaway: A good developer isn't someone who writes bug-free code—that's impossible. A good developer is someone who can find and fix bugs efficiently. Mastering your browser's debugger is a superpower.

JavaScript Debugging Glossary

console.log(): A function that writes a message or the value of a variable to the web console. The most fundamental debugging tool.
Breakpoint: An intentional stopping or pausing place in a script. It can be set with the "debugger;" statement or by clicking a line number in the browser's 'Sources' panel.
Scope: The context of the currently executing code. The 'Scope' panel in the debugger shows which variables are accessible (local, closure, global) and their current values.
Call Stack: A list of the functions that are currently being executed. It shows the "path" the code took to get to the current breakpoint. For example: "render() -> handleClick() -> updateUser()". Very useful for complex bugs.
Watch: A feature in the debugger that allows you to monitor the value of a specific variable or expression over time as you step through the code.
Step Over / Step Into / Step Out: Controls for moving through code once paused at a breakpoint. 'Step Over' executes the current line and moves to the next. 'Step Into' will enter any function call on the current line. 'Step Out' will finish the current function and return to where it was called.