WebStorm 2018.2 Help

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:

If you want to see the list of all currently debugging applications, select Run | Show Running List from the main menu. Refer to the Viewing Running Processes section for details.

Start a debugging session

  1. Configure the debugger.
  2. 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.
  3. Define a run/debug configuration for the application to be debugged.
  4. Create a breakpoint. To create a breakpoint, select the code line that you want to examine and click an area in the gutter near the line number.
  5. Click the Debug icon (icons actions startDebugger dark svg). Read more about debugging sessions in Starting the Debugger Session.

After you've started a debug session, the icons actions startDebugger svg icon that marks the Debug tool window toggles to debug active 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.

breakpointProperties

If you have any instance marked with a label, you can use it in the condition expression as well:

breakpointProperties label

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.

action breakpoint

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 Breakpoint types.

temporary breakpoint

Disable breakpoints

To disable a breakpoint, click the breakpoint while pressing Alt. Refer to the section Enabling, Disabling and Removing Breakpoints for details.

quick disable breakpoints

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

To stop code execution at the cursor position without adding another breakpoint, click the Run to cursor icon(icons actions runToCursor svg) or press Alt+F9.

run to cursor

The icon icons actions runToCursor svg 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.

mark object

The next time this instance appears in Watches, Variables or Evaluate expression, you will see the label:

mark object1

Evaluate expression

While in debug mode, you can evaluate any expression by pressing Alt+F8.

evaluate expression1

This tool provides code completion just as in the editor so it’s very easy to enter any expression:

evaluate expression2

If you have any instances marked with labels, code completion will offer you its names so you can evaluate them:

evaluate expression3

Refer to the section Evaluating Expressions for details.

Settings

Configuring debugger settings

To change debugger settings, click File | Settings. In the Settings menu, click Build, Execution, Deployment | Debugger.

Useful debugger shortcuts

ActionHotkey
Toggle breakpointCtrl+F8
Resume programF9
Step overF8
Step intoF7
StopCtrl+F2
View breakpoint details/all breakpointsCtrl+Shift+F8
Debug code at caretShift+F9 (within the main method), or Shift+Alt+F9
Last modified: 14 September 2018

See Also