WebStorm 2021.1 Help

Step through the program

Stepping is the process of controlling step-by-step execution of the program.

WebStorm provides a set of stepping actions, which are used depending on your strategy (for example, whether you need to go directly to the next line or enter the methods invoked on your way there).

The stepping buttons are located on the Debug window toolbar.

Debug tool window: stepping buttons on the toolbar

Step over

Steps over the current line of code and takes you to the next line even if the highlighted line has method calls in it. The implementation of the methods is skipped, and you move straight to the next line of the caller method.

  • Click the Step over button Step Over button or press F8.

In the example, line 11 is about to be executed. If you step over, the debugger will move straight to line 12 without jumping into the multiplication() method.

Step over

If there are breakpoints inside the skipped methods, the debugger will stop at them.

Step over: stopping at a breakpoint within the skipped method

To skip any breakpoints on the way, use Force step over Alt+Shift+F8.

Step over: ignoring a breakpoint in the called method with Force step over

Step into

Steps inside the code of a called function.

  • Click the Step into button Step Into button or press F7.

In the example, line 11 is about to be executed. If you step into, the debugger will jump into the implementation of the multiplication() method allowing you to examine in detail how its result is produced.

Stepping into a called method

If there are several method calls on the line, WebStorm asks you which method to enter. This feature is called Smart step into.

Step into on a line with multiple method calls: automatic smart step into

By default, Smart step into is used automatically every time you invoke Step into F7 on a line with multiple method calls. You can turn off automatic Smart step into and enter each called method in the order they are called using the Step into and Step out buttons.

Automatic Smart step into off: entering called methods in the order they are called using Step into and Step out

Some scripts are skipped by Step into as you normally don't need to debug them.

  1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Build, Execution, Deployment | Debugger | Stepping. The Debugger. Stepping page opens.

  2. To suppress automatic Smart step into, clear the Always do smart step into checkbox.

  3. To skip all library scripts, select the Do not step into library scripts checkbox.

  4. To suppress stepping into some specific scripts, select the Do not step into scripts checkbox and create a list of such scripts using the toolbar buttons.

Smart step into

Smart step into is helpful when there are several method calls on a line, and you want to be specific about which method to enter. This feature allows you to select the method call you are interested in.

Smart step into: manual invocation
  • By default, Smart step into is used automatically every time you invoke Step into on a line with multiple method calls.

  • To suppress automatic Smart step into, open the Settings/Preferences dialog Ctrl+Alt+S, go to Build, Execution, Deployment | Debugger | Stepping, and clear the Always do smart step into checkbox.

    After that, the Smart step into button appears on the toolbar of the Debug tool window. The icon is only available when the debugger stops at a line with multiple calls.

  • To invoke Smart step into manually, click the Smart step into button on the toolbar of the Debug tool window, or press Shift+F7, or select Run | Debugging Actions | Smart Step Into from the main menu.

Step out

Steps out of the current method and takes you to its call.

  • Click the Step out button Step Out button or press Shift+F8.

In the example, stepping out skips all iterations of the loop and takes you straight to its call.

Stepping out from a method to its caller

Run to cursor

Continues the execution until the position of the caret is reached.

  • Place the caret at the line where you want the program to pause and click the Run to Cursor button or press Alt+F9.

    Run to cursor: set the cursor at the line to stop at
  • Click the line number in the gutter.

    Run to cursor: click line number in the gutter

    Run to Cursor on clicking the line number is active by default. To turn it off, open the Settings/Preferences dialog Ctrl+Alt+S, go to Build, Execution, Deployment | Debugger, and clear the Click line number to perform run to cursor checkbox.

In the example, Run to cursor will continue the execution and stop at line 23 as if there were a breakpoint.

Run to cursor: click the line number

If there are breakpoints in the print_chart() method, the program will be suspended there.

Run to cursor: the debugger stops at the breakpoint in the skipped code

To skip any breakpoints on the way, use Force run to cursor.

Force step into

Steps in the method even if this method is skipped by the regular Step Into.

  • Click the Force step into button Force Step Into icon or press Alt+Shift+F7.

In the example, the debugger skips a library method console.log() with regular Step into at line 4 but enters this method at line 10 with Force step into.

Force step into overrides the list of ignored scripts

Force run to cursor

Continues the execution until the position of the caret is reached. All breakpoints on the way are ignored.

  1. Place the caret at the line where you want the program to pause.

  2. From the main menu, select Run | Debugging Actions | Force Run to Cursor or press Ctrl+Alt+F9.

In the example, Force run to cursor will continue the execution and stop at line 24 as if there were a breakpoint. The breakpoint inside print_chart() will not have any effect.

The caret is at the line where we want to go

Force step over

Steps over a line with a call of a method where breakpoints are set. The breakpoints are ignored.

  • From the main menu, select Run | Force Step Over or press Alt+Shift+F8.

In the example, force stepping over takes you to the print statement on line 24 even though there is a breakpoint in the print_chart() method, which would otherwise, with Step over, suspend the application in all iterations of the loop.

Force Step Over: the breakpoint at the call of a method is ignored

Restart frame

Allows you to undo the last frame and restore the previous frame in the stack. When debugging JavaScript and Node.js, this can be helpful to re-enter a function if you missed a critical spot you would like to see again.

  1. Click the Restart Frame button Restart Frame button.

  2. To restore the dropped frame, click the Resume Program button or press F9.

When you resume the program, WebStorm reverts the local variables to their values before the restarted frame was executed. Note that values of static and instance variables are not restored, which may alter the entire program flow.

In the example, restarting the frame returns you to the call of count() as if count () has never been executed. However, when you resume the program, the initial values of local variables result and i are restored.

Restarting frame and resuming the program: the variables are reverted to their initial values
Last modified: 31 March 2021