WebStorm 2018.3 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, 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:

Status

Line

Temporary Line

Exception

Description

Enabled

db set breakpointbreakpointTemporaryicons debugger db exception breakpoint svg

Shown at design-time or during the debugging session.

Disabled

icons debugger db disabled breakpoint svgicons debugger db disabled breakpoint svgicons debugger db disabled exception breakpoint svg

Indicates that nothing happens when the breakpoint is hit.

Conditionally disabled

db dep line breakpointdb dep line breakpointicons debugger db exception breakpoint svg

This state is assigned to breakpoints when they depend on another breakpoint to be activated.

When the button icons debugger muteBreakpoints svg 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: 6 December 2018

See Also