WebStorm 2018.1 Help

Using Breakpoints

Breakpoints are source code markers used to trigger actions during a debugging session.

Breakpoint types

WebStorm lets you create breakpoints of several types. Each breakpoint type supported by WebStorm addresses different debugging needs and has its own individual settings.

Depending on the context, WebStorm distinguishes between the following types of breakpoints:

  • JavaScript line breakpoints can be set in the JavaScript context inside *.js or *.html files.
  • JavaScript exception breakpoints

WebStorm enables you to set the following types of breakpoints:

Line breakpoint

These breakpoints are assigned to lines of source code and are used to target a particular section for debugging.

Line breakpoints are triggered when the program reaches the specified line of source code, before it is executed. The line of code that contains a set breakpoint, is marked with a red stripe; once such line of code is reached, the marking stripe changes to blue.

If a file with breakpoints was modified externally (e.g. updated from a VCS, or changed in an external editor) so that line numbers are changed, breakpoints will be moved accordingly. Note that WebStorm should be running when changes are made, otherwise, otherwise they will pass unnoticed.

Temporary line breakpoint

These breakpoints are assigned to lines of source code and are used to target a particular section for debugging. When hit, such breakpoints are immediately removed.

Exception breakpoint

Exception breakpoints are triggered when the specified exception is thrown. Unlike the line breakpoints, which require specific source references, exception breakpoints apply globally to the exception condition, rather than to a particular code reference.

Breakpoints icons and statuses

When a breakpoint is set, the editor displays a breakpoint icon in the gutter area to the left of the affected source code. A breakpoint icon denotes status of a breakpoint, and provides useful information about its type, location, and action.

The icons serve as convenient shortcuts for managing breakpoints. Clicking an icon removes the breakpoint. Successive use of Alt - click on an icon toggles its state between enabled and disabled. The settings of a breakpoint are shown in a tooltip when a mouse pointer hovers over a breakpoint icon in the gutter area of the editor.

ws breakpoints

The table below summarizes the possible breakpoint states:

StatusLineTemporary LineExceptionDescription
Enableddb set breakpointbreakpointTemporaryexception breakpointShown at design-time or during the debugging session.
Disableddisabled breakpointdisabled breakpointdisabled exception breakpointIndicates that nothing happens when the breakpoint is hit.
Conditionally disableddb dep line breakpointdb dep line breakpointdb dep exception breakpointThis state is assigned to breakpoints when they depend on another breakpoint to be activated.

When the button debug mute breakpoints is pressed in the toolbar of the Debug tool window, all the breakpoints in a project are muted, and their icons become grey: muted breakpoint.

Last modified: 11 May 2018

See Also