Using the JavaScript Debugger & Breakpoints

Instead of printing values to the console using console.log(), you can use breakpoints and the debugger; statement to pause code execution, inspect memory state, and step through code line-by-line.

This guide covers code-based breakpoints, DevTools breakpoints, and conditional debugging.

1. The debugger; Statement (Code-Based Breakpoint)

JavaScript has a built-in statement designed specifically for triggering debugging sessions: the debugger; keyword.

When the browser or Node.js encounters this statement while Developer Tools are open, it automatically pauses execution at that line, acting exactly like a breakpoint.

Code Example

function calculateInvoice(price, taxRate) {
  const tax = price * taxRate;
  
  // The browser will pause here if DevTools is open
  debugger;
  
  const total = price + tax;
  return total;
}
 
calculateInvoice(100, 0.08);

2. Browser DevTools Breakpoints (UI-Based Breakpoints)

If you cannot or do not want to modify your source code to debug, you can set breakpoints directly in the browser's DevTools user interface.

Step-by-Step Guide

1. Open your page in the browser and open DevTools (F12 or Cmd + Option + I).
2. Go to the Sources tab (called Debugger in Firefox).
3. Find your JavaScript file in the left panel and click to open it.
4. Locate the line you want to pause on.
5. Click directly on the line number. A blue marker will appear, showing that a breakpoint is now active.
6. Trigger the action in your app (e.g., click a button). The browser will freeze execution at that line.

3. Conditional Breakpoints (Selective Pausing)

A conditional breakpoint will only pause code execution if a specific condition evaluates to true. This is incredibly useful for loops, animations, or event handlers that trigger frequently.

Step-by-Step Guide

1. Open your code in the DevTools Sources / Debugger panel.
2. Right-click on the line number.
3. Select Add conditional breakpoint....
4. Type your condition (which can be any valid JavaScript expression), for example:

   item.quantity === 0
   or:

   index === 49
5. Press Enter. An orange or yellow marker will appear on the line number.
6. The app will run smoothly and only pause when your condition is met.

4. Inspecting Scopes (Local, Closure, and Global)

When your code is paused, the right-hand panel of your browser's DevTools contains a Scope section. This is your command center for understanding where variables are defined and what values they hold.

Instead of scrolling through your code to find where a variable is declared, the Scope pane organizes all active variables into their specific scopes:

A. Local Scope

Contains variables declared within the currently active function.

• What you'll see: Function parameters, variables declared using let, const, or var inside that function, and the special this reference.
• Example: If you pause inside function greet(name) { let message = "Hi"; }, name and message will be under Local.

B. Closure Scope

If a function is defined inside another function, it remembers variables from the outer function even after the outer function finishes executing.

• What you'll see: Variables from the parent/outer scopes that the inner function accesses.
• Example: If you have an inner function inside a createCounter function, you will see a Closure (createCounter) item containing the counter's state variables.

C. Script and Global Scopes

• Script Scope: Contains variables declared at the top-level of a script file using let or const.
• Global Scope: Contains variables that are accessible from absolutely anywhere in your environment (like the window object in browsers or global in Node.js), plus variables declared globally using var.

5. Watch Expressions: Filtering Through Many Variables

If your application has hundreds of variables and the Scope list is too cluttered, you can use the Watch section in the right panel:

1. Expand the Watch pane in DevTools (usually located above the Scope pane).
2. Click the + (Add expression) button.
3. Type the exact variable or property name you want to track (e.g., user.profile.id or count).
4. Press Enter.
5. As you step through your code line-by-line, the Watch section will show you the real-time value of only that variable, ignoring all the rest.

6. How to Navigate Code While Paused (Debugger Controls)

Once your debugger pauses execution (either from a breakpoint or a debugger; statement), you will see control buttons in the top-right corner of the DevTools panel (or at the top of the screen).

Here is what each control button does: