Using Conditional Breakpoints and Logpoints in Chromium

This article provides a straightforward guide on how web developers can optimize their debugging workflow using conditional breakpoints and logpoints within the Sources panel of Chromium-based browsers. It covers how to access the Sources panel, set up conditional breakpoints that only pause execution when specific criteria are met, and utilize logpoints to output messages to the console without cluttering the actual codebase with temporary logging statements.

Accessing the Sources Panel

Before setting any breakpoints, you must locate the file you want to debug in the Chromium Developer Tools.

1. Open the Chromium browser and navigate to your web application.
2. Open Developer Tools by pressing F12, or Ctrl+Shift+I on Windows/Linux, or Cmd+Option+I on macOS.
3. Click on the Sources tab at the top of the Developer Tools window.
4. Use the Page pane on the left side to navigate the file tree and select the JavaScript file you need to debug. (Alternatively, press Ctrl+P or Cmd+P to quickly search for and open a file by name).

How to Use Conditional Breakpoints

A standard breakpoint pauses code execution every time a specific line is reached. A conditional breakpoint only pauses execution when a custom JavaScript expression you provide evaluates to true. This is ideal for debugging loops or frequently called functions.

To set a conditional breakpoint:

1. In the code editor pane of the Sources panel, find the line of code where you want to pause execution.
2. Right-click on the line number in the left-hand gutter (the column showing the line numbers).
3. Select Add conditional breakpoint... from the context menu.
4. An inline text box will appear below the line of code.
5. Type your condition into the box. This must be a valid JavaScript expression that uses variables in the current scope (for example, i === 50 or user.isAuthenticated === false).
6. Press Enter to save and activate the breakpoint.

An orange icon with a question mark will appear over the line number. Now, when your application runs, the debugger will ignore this line unless your specified condition is met.

How to Use Logpoints

Developers often add console.log() statements directly into their source code to inspect variables, which requires saving the file, reloading the page, and remembering to delete the logs later. Logpoints solve this by allowing you to inject console logs directly through the browser without modifying your code or pausing execution.

To set a logpoint:

1. Locate the line of code where you want to log information.
2. Right-click the line number in the gutter.
3. Select Add logpoint... from the context menu.
4. An inline text box will appear, similar to the conditional breakpoint input.
5. Enter the expression you want to log. You do not need to type console.log(). Simply type the exact arguments you would pass into a console log. You can combine strings and variables separated by commas (for example, 'Current user ID:', user.id, 'Status:', status).
6. Press Enter to save and activate the logpoint.

A pink icon with two dots will appear over the line number. Every time the browser executes that line of code, it will output your specified message to the Console panel without interrupting the application's execution flow.

Managing Breakpoints and Logpoints

Once you have set conditional breakpoints and logpoints, you can manage them using the Breakpoints pane, located on the right-hand side of the Sources panel (or at the bottom, depending on your layout).

• Edit: Right-click the icon in the line number gutter and select Edit condition... or Edit logpoint... to change the expression.
• Disable temporarily: Uncheck the box next to the specific breakpoint or logpoint in the Breakpoints pane, or hold Shift and click the icon in the gutter.
• Delete: Left-click the icon in the gutter, or right-click it and select Remove breakpoint. You can also right-click inside the Breakpoints pane and select Remove all breakpoints to clear everything at once.