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:
- Multiple simultaneous debugging sessions.
- Customizable breakpoint properties: conditions, pass count, etc.
- Frames, variables, and watches views in the debugger UI.
- Runtime evaluation of expressions.
If you want to see the list of all currently debugging applications, select Viewing Running Processes section for details.from the main menu. Refer to the
General debugging steps
- Configure the debugger.
- Define a run/debug configuration for the application to be debugged.
- Create breakpoints in the source code.
- Launch a debugging session.
- Pause or resume the debugging session as required.
- During the debugger session, step through the breakpoints, evaluate expressions, change values on-the-fly examine suspended program, and set watches.
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.
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.
Useful debugger shortcuts
Breakpoint details and condition
If you want to change details of a breakpoint, press Ctrl+Shift+F8. Here you can specify the breakpoint conditions.
If you have any instance marked with a label, you can use it in the condition expression as well:
To see all breakpoints in the project (with more advanced settings), press the same shortcut Ctrl+Shift+F8 again.
Another action might be useful if you want to evaluate something at a particular line of code without actually making a stop. You can do that by using the Action breakpoint. To create one, just click on the gutter while holding Shift.
To create a breakpoint that stops only once, click the left gutter while holding Shift+Alt.
Refer to the section Breakpoint types for details.
It's also useful to know that any breakpoint can be quickly disabled by clicking on the gutter while holding Alt.
Refer to the section Enabling, Disabling and Removing Breakpoints for details.
In case you want to “go back in time” while debugging 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.
The icon is described in the Debug tool window reference.
Run to cursor
Sometimes you need to resume the program and stop at another line of code, without adding another breakpoint. Easy: just press Alt+F9.
The icon is described in the toolbar reference of the Debug tool window.
The next time this instance appears in Watches, Variables or Evaluate expression, you will see the label:
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.
If you want to change the default debugger settings, choose Debugger in WebStorm Settings/Preferences.