Firefox Debugger: Conditional Breakpoints and Logpoints

This article provides a quick overview and guide to understanding and utilizing conditional breakpoints and logpoints within the Firefox JavaScript Debugger. By mastering these two advanced debugging features, developers can pause code execution only when specific criteria are met and log values directly to the console without cluttering their source code with temporary console.log() statements. Read on to learn the exact mechanics of these tools and how to implement them in your debugging workflow.

How Conditional Breakpoints Work

A standard breakpoint pauses code execution every single time the JavaScript engine reaches the specified line. In contrast, a conditional breakpoint attaches a custom JavaScript expression to that line of code.

When the browser executes the script and reaches the conditional breakpoint, the Firefox Debugger intercepts the execution and evaluates your expression in the current scope:

  • If the expression evaluates to a truthy value: The debugger pauses execution on that line, allowing you to inspect variables and the call stack.
  • If the expression evaluates to a falsy value: The debugger ignores the breakpoint and continues executing the script without interruption.

This mechanism is ideal for debugging loops, event listeners, or frequently called functions where pausing on every iteration is impractical.

Setting a Conditional Breakpoint in Firefox

  1. Open the Firefox Developer Tools (press F12 or Ctrl+Shift+I / Cmd+Option+I) and navigate to the Debugger panel.
  2. Open the JavaScript file you want to debug.
  3. Right-click on the line number in the left-hand gutter where you want to pause execution.
  4. Select Add condition from the context menu.
  5. An inline input box will appear. Type a valid JavaScript expression that evaluates to a boolean (for example, index === 99 or user.role === 'admin').
  6. Press Enter to save it. The line number will now be marked with an orange arrow, indicating an active conditional breakpoint.

How Logpoints Work

A logpoint is a specialized variation of a breakpoint that never pauses code execution. Instead, it instructs the Firefox Debugger to output information directly to the Web Console and immediately resume running the script.

When the JavaScript engine hits a line with a logpoint, the debugger evaluates the expression you provided—using the variables available in that specific scope—and prints the result to the console. It operates identically to writing console.log() in your code, with the major advantage that you do not have to modify your source files, rebuild your project, or refresh the browser.

Setting a Logpoint in Firefox

  1. Inside the Debugger panel, find the line of code where you want to inspect data.
  2. Right-click the line number in the left-hand gutter.
  3. Select Add log from the context menu.
  4. An inline input box will appear. Enter the variables or expressions you wish to output. You can pass multiple arguments separated by commas, just like a standard console log (for example, 'Current state:', this.state, userCount).
  5. Press Enter to activate it. The line number will be marked with a purple arrow.
  6. Press Esc while in the Debugger to open the split Console view at the bottom of the window. As your code runs, the output from your logpoint will appear here alongside the file name and line number.

Managing Your Breakpoints and Logpoints

Both conditional breakpoints and logpoints are tracked in the Breakpoints pane, located in the right-hand sidebar of the Firefox Debugger.

From this pane, you can:

  • Toggle: Use the checkbox next to any conditional breakpoint or logpoint to temporarily disable or re-enable it without losing your written expressions.
  • Edit: Right-click the marker in the code gutter and select Edit condition or Edit log to modify the expression.
  • Remove: Left-click the marker in the gutter, or click the close button next to the item in the Breakpoints pane, to delete it entirely.