Breakpoints
Breakpoints are source code markers that let you suspend program execution at a specific point and examine its behavior.
Once set, a breakpoint remains in your project until you remove it explicitly (except for temporary line breakpoints). If a file with breakpoints was modified externally, for example, updated through a VCS or changed in an external editor, and the line numbers have changed, breakpoints will be moved accordingly. Note that WebStorm must be running when such changes are made, otherwise they will pass unnoticed.
Line breakpoints
Line breakpoints can be set on executable lines of code. Thread execution is suspended before the line with such breakpoint, and WebStorm displays the stack frames on that thread's stack.
Set a line breakpoint
-
Place the caret at an executable line of code where you want to set a breakpoint.
-
Click the left gutter next to that line or press Ctrl+F8.
To set a temporary line breakpoint, press Ctrl+Shift+Alt+F8. It will be removed from your project right after it has been hit.
For arrow functions, you can set multiple breakpoints within a single line. Click the left gutter and select the functions where you want to set a breakpoint.
Remove a line breakpoint
Click the breakpoint icon in the left gutter.
To avoid accidentally removing a breakpoint and losing its parameters, you can choose to remove breakpoints by dragging them to the editor, or by clicking the middle mouse button: in the Settings/Preferences dialog (Ctrl+Alt+S) go to and select Drag to the editor or click with middle mouse button. Clicking a breakpoint will then toggle its state (enabled/disabled).
Exception breakpoints
Exception breakpoints are triggered when the specified exception is thrown. They apply globally to the exception condition and do not require a particular source code reference.
Set an exception breakpoint
Press Ctrl+Shift+F8 or select
from the main menu.In the Breakpoints dialog, press Alt+Insert or click , and select JavaScript Exception Breakpoint.
In the Enter Exception Class dialog, specify an exception class from the library or from your project.
Remove an exception breakpoint
Press Ctrl+Shift+F8 or select
from the main menu.In the Breakpoints dialog, select the breakpoint you want to delete under JavaScript Exception Breakpoints or Dart Exception Breakpoints and click or press Alt+Delete.
Breakpoints properties
Depending on the breakpoint type, you can configure additional properties, such as:
actions to be performed when hitting a breakpoint
a suspend policy that defines whether the application must be suspended when a breakpoint is hit
dependencies on other breakpoints
conditions that define when a breakpoint must be hit
To edit breakpoint properties press Ctrl+Shift+F8, or right-click a breakpoint in the editor gutter.
Option | Description | Breakpoint type |
---|---|---|
Enabled | Clear to temporarily disable a breakpoint without removing it from the project. Disabled breakpoints will be skipped during the debugging process. | All types |
Suspend | Select to pause the program execution when a breakpoint is hit. Suspending an application is useful if you need to obtain logging information or calculate an expression at a certain point without interrupting the program. If you need to create a master breakpoint that will trigger dependent breakpoints when hit, choose not to suspend the program at that breakpoint. | All types |
Condition | Specify the Boolean expression to evaluate on hitting the breakpoint and the actions to perform if the expression evaluates to You can enter multi-line expressions, for example:
if (i%2==0) {
document.write("Even: ");
}
else {
document.write("Odd: ");
}
| Line breakpoints |
Log | Select if you want to log the following events to console:
| All types |
Evaluate and log | Select to evaluate an expression when the breakpoint is hit, and show the result in the console output. | Line breakpoints |
Remove once hit | Select to remove the breakpoint from your project right after it has been hit. | All types |
Disable until breakpoint is hit | Select the breakpoint that will trigger the current breakpoint. Until that breakpoint is hit, the current breakpoint will be disabled. You can also select if you wish to disable it again or leave it enabled once it has been hit. | All types |
Productivity tips
- Quick access to most common settings
-
Right-click a breakpoint in the editor gutter to quickly disable or suspend it, or set a condition.
- Breakpoints intentions
-
You can get access to the most common breakpoint actions and filters through intention actions (Alt+Enter).
When a breakpoint is hit, more intention actions are available.
- Group breakpoints
-
You can organize breakpoints into groups, for example, if you need to mark out breakpoints for a specific problem.
In the Breakpoints dialog (Ctrl+Shift+F8), select a breakpoint you want to place in a group and choose from the context menu.
- Move breakpoints
-
To move a line breakpoint, drag it to the target line.
- Copy breakpoints
-
To copy a breakpoint, press Ctrl and drag it to the target line.
- Disable breakpoints
-
To temporarily disable a breakpoint without removing it from the project, hold down the Alt key and click the breakpoint icon in gutter.
- Quick search
-
If you have many breakpoints in your project, you can add short descriptions to them to search for them easily: right-click a breakpoint in the Breakpoints dialog (Ctrl+Shift+F8) and select Edit description from the context menu. Now when you start typing a breakpoint's name, it gets the focus.
- Jump to source
-
To jump from the Breakpoints dialog to the line of code where the selected breakpoint is set, press F4.