WebStorm 2021.1 Help

Examine suspended program

After the debugger session has started, the Debug tool window will appear, and the program will run normally until a breakpoint is hit or you pause the program manually.

After that, the program is suspended, allowing you to examine its current state, control its further execution, and test various scenarios at runtime.

Examine the call stack

When the program is suspended, the call stack that brought you to this point is shown in the Frames pane.

Frames tab

When you are debugging a multiprocess Node.js application or Service Workers, you can switch between threads. The Frames pane shows the call stack of the selected thread. Learn more from Multiprocess debugging and Debugging Workers.

Switching between threads

In other cases, when there is only one thread, the Frames panes still shows Main Thread in the Threads field.

Main Thread is shown for a single-thread application

A frame corresponds to the active method or function call. It stores the local variables of the called method or function, its arguments, and the code context that enables expression evaluation.

Each time a method or a function is called, a new frame is added to the top of the stack. When the execution of a method or a function is complete, the corresponding frame is removed from the stack (in the last in, first out fashion).

Examining frames helps you understand why particular parameters were passed to a method or a function and what the state of the caller was at the time of calling.

Hide frames from libraries

  • If your program uses external libraries, and you want to omit calls made in library classes, click the Hide Frames from Libraries button Hide Frames from Libraries button located in the top-right part of the Frames tab.

Copy stack to clipboard

  • To copy the call stack for the current thread, right-click anywhere on the Frames tab and select Copy Stack.

Examine/update variables

The Variables tab shows the list of the variables in the selected frame/thread. The examination of variables is instrumental to understanding why the program operates in a certain way.

The Variables tab shows you the variables visible from the current execution point

The icon on the left of each variable indicates its type.

Copy variables

When examining variables, you may need to copy a variable name or value to paste it somewhere else or to compare it with another variable.

  • To copy the value that a variable holds, right-click the variable and select Copy Value Ctrl+C. For types other than String, the toString representation is copied.

  • To copy the name of a variable, right-click the variable and select Copy Name.

Compare variables with clipboard

When you need to compare a variable value with some other value, use the Compare Value with Clipboard option. This is helpful, for example, when a variable holds a long string, and you need to compare it with another long string.

  1. Copy the content you are going to compare (for example, from a text file).

  2. In the Variables tab, right-click the variable which you are going to compare with and select Compare Value with Clipboard.

  3. Examine the differences in the Diff Viewer that opens. For additional information on how to efficiently use the Diff Viewer, refer to the Comparing Files and Folders topic.

View variables in a dedicated dialog

WebStorm allows you to inspect variables in a dedicated dialog. This is useful when you need to keep track of some variable (or the object whose reference it holds) and at the same time be able to navigate between frames and threads.

  • Right-click a variable on the Variables tab and select Inspect.

    Inspect dialog

Set variable values

If there is a need to test how the program would behave in certain conditions or fix its current behavior at runtime, you can do that by setting/changing the variable values.

  1. Right-click a variable on the Variables tab and select Set value, or select the variable and press F2.

  2. Enter the value for the variable and press Enter.

    Enter new value for the variable in the field right next to its name

If you need to look into the source code where some variable or class is declared, you can move there right from the Variables tab.

  • To navigate to the code where the variable is declared, right-click a variable and select Jump to Source F4.

  • To navigate to the class declaration of the variable type, right-click a variable and select Jump to Type Source Shift+F4.

Evaluate expressions

WebStorm lets you evaluate expressions during a debugging session to obtain additional details about the program state or test various scenarios at runtime.

Evaluate a simple expression in the editor

The simplest way to evaluate an expression is to point at it in the code. Although this is the quickest way, it cannot be used for evaluating method calls. This is done for safety as they may produce side effects.

Use this option when you need to quickly evaluate an expression from the editor.

  1. Point at the expression which you are going to evaluate. The result of the expression appears in the tooltip.

    Value tooltip
  2. If you need to view child elements, click the Expand button or press Ctrl+F1.

    Value tooltip with child group

If you find value tooltips distracting, you can increase the delay or disable them altogether. To do this, in the Settings/Preferences dialog Ctrl+Alt+S, go to Build, Execution, Deployment | Debugger | Data Views and set the Show value tooltip and Value tooltip delay options as required.

Evaluate a complex expression in the editor

If you want to evaluate an expression in the code that involves a method call, or you want to be specific about which portion of expression to evaluate, use the Quick Evaluate Expression option.

This option is available only if the program was suspended after hitting a breakpoint (not paused manually).

  1. Place the caret at the expression (to evaluate the closest matching expression) or select a portion of it (if you want to be specific about which part of a complex expression to evaluate).

  2. Click Run | Debugging Actions | Quick Evaluate Expression Ctrl+Alt+F8. Alternatively, hold Alt and click the selection.

    Value tooltip appears

You can configure Quick Evaluate to work for a piece of code on just selecting it (without using the menu/shortcut). Use this option carefully, as you can accidentally call methods when it is enabled.

To configure Quick Evaluate on code selection, go to Settings/Preferences | Build, Execution, Deployment | Debugger | Data Views and set the Show value tooltip on code selection option as preferred.

Evaluate arbitrary expressions

Evaluating arbitrary expressions is the most flexible evaluating option. It lets you evaluate any code as long as it is in the context of the current frame. Using it, you can evaluate declarations, method calls, loops, anonymous classes, arrow functions, and so on.

Use this feature to get additional information about the current state of the program and test various scenarios all within the same debugging session. This saves a lot of time by reducing the number of sessions you have to run.

This option is available only if the program was suspended after hitting a breakpoint (not paused manually).

  1. If you want to start with some expression or a variable, which is currently in front of you (for example, in the editor or on the Variables tab), select it.

    Select the expression to start from
  2. Click Run | Debugging Actions | Evaluate Expression Alt+F8. The shortcut may not work on Ubuntu (for correct operation, adjust the shortcut configuration).

  3. In the Evaluate dialog, modify the selected expression or enter a new one in the Expression field. If you are going to evaluate a code fragment, click Expand Shift+Enter.

    If necessary, adjust the filed size so your code fragments fits in.

    The expression is entered in the Code Fragment field: adjustung the field size
  4. Click Evaluate (Ctrl+Enter for multiline mode). The expression result appears in the Result field.

    The result of the expression is taken from the return statement. When there is no return statement, the result is taken from the last line of code (it does not even have to be an expression: a literal works too). When there is no valid line to take value from, the result is undefined. If the specified expression cannot be evaluated, the Result field indicates the reason.

    Expression result is calculated

The Evaluate dialog is non-modal, so you can switch the focus back to the editor to copy other variables and expressions. You can also open multiple Evaluate dialogs if necessary.

View values inline

WebStorm facilitates the debugging process by showing you the values of the variables right next to their usage.

Variable values are displayed at the lines where they are used

Once the variable value has changed, the inline view is updated with the new value and changes its color.

Inline values of the variables change with each step

If a line contains a reference to an object, you can examine its fields right in the editor. From this popup, you can also change the variable values and add inline watches.

Inline debugger hints

Inline values view is enabled by default. To turn it off, in the Settings/Preferences dialog Ctrl+Alt+S, go to Build, Execution, Deployment | Debugger | Data Views and disable the Show values inline option.

Add an Inline Watch

If you want the result of some expression to appear on a particular line, you can set up an inline watch for that. Inline watches are persistent and remain active after session restart.

  1. Click the inline hint referring to the object whose field you want to track.

  2. In the popup, select the field and click Add as Inline Watch.

    Adding an inline watch option
  3. Fine-tune the watch if needed. You can use any valid expression as a watch.

    Setting an inline watch

Inline watches you set in the editor are also shown under Inline Watches in the Variables pane of the Debug tool window:

Inline watch in the Debug tool window

To remove an inline watch, hover over the watch and click the cross near it.

Watches

If you want to keep track of some variable or the result of a more complex expression, set up a watch for this variable or expression. This is useful when you need to add something that is not regularly displayed on the list of variables, or to pin some instance variable thus eliminating the need to expand the tree after each step.

This option is available only if the program was suspended after hitting a breakpoint (not paused manually).

Watches are evaluated in the context of the selected frame. Watches cannot be evaluated when they are out of context or when they fail to compile. If this is the case, the watch is marked with the error icon Error icon.

By default, the Watches tab is hidden and watches are shown on the Variables tab. To hide/reveal the Watches tab, use the Show watches in variables tab button Show watches in variables tab on the Variables or Watches tab.

Add a watch

  1. Click New Watch New Watch button on the Variables tab.

  2. Enter the variable or expression to be evaluated. In expressions, you can evaluate method calls, arrow functions, declare variables and so on as long as this is in the local context.

    Watch expression

After you have added a variable/expression to Watches, it stays there and is evaluated for each step, providing you with the result in the current context.

Edit a watch

  • Right-click the desired watch and select Edit.

Copy a watch

  1. Select the watch you are going to copy.

  2. Click Duplicate Watch Duplicate Watch button on the Variables/ Watches tab or press Ctrl+D.

Change the order of watches

For convenience, you can change the order in which the watches appear on the Variables/ Watches tab.

  • Use the Move Watch Up/ Move Watch Down buttons on the Variables/ Watches tab or Ctrl+Up and Ctrl+Down keyboard shortcuts.

Delete a watch

  • To remove a single watch, right-click it and select Remove Watch Delete on the Variables/ Watches tab.

  • To remove all watches, right-click anywhere on the Variables/ Watches tab and select Remove All Watches.

Watches allow for the same actions as variables do. For example, you can view them in a dedicated dialog or use them to navigate to the source code.

Watches are a part of your project. This means you can stop and rerun the debugging session without risk of losing them.

Return to the current execution point

Examining the program state involves navigating in code, and you often need to return to the place where your program is suspended.

Do one of the following:

  • From the main menu, select Run | Debugging Actions | Show Execution Point.

  • Press Alt+F10.

  • Click The Show Execution Point button on the stepping toolbar of the Debug tool window.

The current execution point is indicated with a blue line. The code at this line has not been executed yet.

Blue line indicating the current execution point
Last modified: 02 August 2021