WebStorm 2019.1 Help

Breakpoints

Breakpoints are source code markers that let you suspend program execution at a specific point and examine its behavior.

Breakpoints

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

  1. Place the caret at an executable line of code where you want to set a breakpoint.

  2. 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.

Multiple breakpoints in a line for an arrow function

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 Build, Execution, Deployment | Debugger 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

  1. Press Ctrl+Shift+F8 or select Run | View Breakpoints from the main menu.

  2. In the Breakpoints dialog, press Alt+Insert or click the Add button, and select JavaScript Exception Breakpoint.

  3. In the Enter Exception Class dialog, specify an exception class from the library or from your project.

Remove an exception breakpoint

  1. Press Ctrl+Shift+F8 or select Run | View Breakpoints from the main menu.

  2. In the Breakpoints dialog, select the breakpoint you want to delete under JavaScript Exception Breakpoints or Dart Exception Breakpoints and click the Remove button 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 true. This Boolean expression must be written in the language of the code you are debugging and must be valid at the line where the breakpoint is set.

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:

  • "Breakpoint hit" message: a log message will be displayed in the console output when the breakpoint is hit.

  • Stack trace: the breakpoint's stack trace will be printed to the console when it's hit.

    This is useful if you want to check what paths have led to this point without interrupting the program's execution.

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).

breakpoint intentions

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 Move to group | <group_name>/Create new 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.

Last modified: 16 May 2019

See Also