Debugging
This section describes the procedures that are common for various types of applications.
WebStorm provides a full range of facilities for debugging your source code:
Breakpoints in HTML and JavaScript.
Multiple simultaneous debugging sessions.
Customizable breakpoint properties: conditions, pass count, and so on.
Runtime evaluation of expressions.
If you want to see the list of all currently debugging applications, select from the main menu. Refer to the Viewing Running Processes section for details.
Start a debugging session
To debug CoffeeScript, TypeScript, and Dart code, you need to generate a source map for it. This will set the correspondence between lines in your original code and in the generated JavaScript code. If no source map is generated, your breakpoints will not be recognized and processed correctly.
Define a run/debug configuration for the application to be debugged.
Create a breakpoint.
Click the
icon. Read more about debugging sessions in Starting the Debugger Session.
After you've started a debug session, the 
icon that marks the Debug tool window toggles to 
to indicate that the debug process is active.
Debug
After you have configured a run configuration for your project, you can launch it in debug mode by pressing Shift+F9.
In the Debug tool window you can see the list of frames and threads with their states, variables and watches. When you select a frame, you see the variables corresponding to the selected frame.
Breakpoints
Customize breakpoint settings
To customize breakpoint settings, press Ctrl+Shift+F8. To see all breakpoints in the project (with additional settings), click More or press the same shortcut Ctrl+Shift+F8 again.
If you have any instance marked with a label, you can use it in the condition expression as well:
Do not suspend code execution
Use action breakpoints to evaluate a variable at a particular line of code without suspending code execution. To create an action breakpoint, click the gutter while pressing Shift.
Create a temporary breakpoint
To create a breakpoint that stops only once, click the left gutter while holding Shift+Alt. For more information, refer to the section Breakpoints.
Disable breakpoints
To disable a breakpoint, click the breakpoint while pressing Alt. Refer to the section Breakpoints for details.
Debugger session
Drop frame
In case you want to “go back in time” while debugging JavaScript or Node.js you can do it via Drop Frame action. This is a great help if you mistakenly stepped too far. This will not revert the global state of your application but at least will get you back by stack of frames.
Run to cursor
Create a breakpoint.
Run a debugging session. To run a debugging session, click the Run Application icon (
) in the gutter area and select Debug <configuration_name>.
To stop code execution at the cursor position without adding another breakpoint, click the Run to cursor icon (
) or press Alt+F9. Alternatively, you can click the line number in the gutter area.
The icon is described in the toolbar reference of the Debug tool window.
Mark object
To add a colored label to an instance, press F11 or the context menu in the Variables and Watches tabs.
The next time this instance appears in Watches, Variables or Evaluate expression, you will see the label:
Evaluate expression
While in debug mode, you can evaluate any expression by pressing Alt+F8.
This tool provides code completion just as in the editor so it’s very easy to enter any expression:
If you have any instances marked with labels, code completion will offer you its names so you can evaluate them:
Refer to the section Evaluating Expressions for details.
Settings
Configuring debugger settings
To change debugger settings, click . In the Settings menu, click .
Useful debugger shortcuts
Action | Hotkey |
|---|---|
| Toggle breakpoint | Ctrl+F8 |
| Resume program | F9 |
| Step over | F8 |
| Step into | F7 |
Stop | Ctrl+F2 |
| View breakpoint details/all breakpoints | Ctrl+Shift+F8 |
Debug code at caret | Shift+F9 (within the main method), or Shift+Alt+F9 |