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.
The table below summarizes the possible breakpoint states:
Status | Line | Temporary Line | Exception | Description |
---|---|---|---|---|
Enabled | Shown at design-time or during the debugging session. | |||
Disabled | Indicates that nothing happens when the breakpoint is hit. | |||
Conditionally disabled | This state is assigned to breakpoints when they depend on another breakpoint to be activated. |
When the button is pressed in the toolbar of the Debug tool window, all the breakpoints in a project are muted, and their icons become grey: .