How to Set Conditional Breakpoints in VS Code

Conditional breakpoints in Visual Studio Code (VS Code) allow you to pause code execution only when specific conditions are met, saving you from manually stepping through loops or repetitive function calls. This guide provides a straightforward, step-by-step walkthrough on how to set, configure, and manage conditional breakpoints in VS Code using expressions, hit counts, or log messages.

Step 1: Locate the Target Line of Code

Open your project in VS Code and navigate to the source file you want to debug. Locate the specific line of code where you want to pause execution.

Step 2: Access the Breakpoint Menu

Instead of left-clicking to set a standard breakpoint, access the conditional options: 1. Hover your mouse cursor over the gutter (the blank space to the left of the line numbers). 2. Right-click on the gutter next to your target line. 3. Select Add Conditional Breakpoint… from the context menu.

(Alternatively, if you already have a standard red breakpoint set, you can right-click it and select Edit Breakpoint…).

Step 3: Choose Your Condition Type

A small dropdown menu will appear over your code. Click the dropdown to choose one of three condition types:

• Expression: The debugger will pause execution only when the expression you enter evaluates to true.
  • Example: user.id === 42 or count > 10
• Hit Count: The debugger will pause execution only after the line has been executed a specified number of times. You can use operators like =, >, >=, or % (for multiples).
  • Example: 5 (pauses on the 5th hit), or >10 (pauses every time after the 10th hit).
• Log Message: Rather than pausing execution, this creates a “Logpoint” that prints a message to the Debug Console when hit. You can interpolate variables using curly braces.
  • Example: Current index is {i}

Step 4: Save the Breakpoint

After selecting the type and typing your condition in the text box, press Enter to apply it.

You will notice the standard red breakpoint circle is replaced by an orange circle with an equal sign (=) or a white play icon inside, indicating that a conditional breakpoint or logpoint is active.

How to Edit or Remove a Conditional Breakpoint

To modify or remove your condition: * To edit: Right-click the conditional breakpoint icon and select Edit Breakpoint… to change the expression. * To disable: Right-click the icon and select Disable Breakpoint to temporarily ignore it without deleting your condition. * To remove: Click directly on the breakpoint icon, or right-click and select Remove Breakpoint.