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.
tip
If you accidentally closed the Debug tool window, select View | Tool Windows | Debug from the main menu or press Alt+5 to reopen it.
Examine the call stack
When the program is suspended, the call stack that brought you to this point is shown in the Frames pane.
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.
In other cases, when there is only one thread, the Frames panes still shows Main Thread in the Threads field.
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 located in the top-right part of the Frames pane.
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.
tip
Be mindful of variable scope and lifetime. If a variable is not present on the list, this means the variable is out of scope for the current frame at 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 ValueCtrl+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.
Copy the content you are going to compare (for example, from a text file).
In the Variables tab, right-click the variable which you are going to compare with and select Compare Value with Clipboard.
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 pane and select Inspect.
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.
Right-click a variable on the Variables pane and select Set Value, or select the variable and press F2.
Enter the value for the variable and press Enter.
Navigate to source code
If you need to look into the source code where some variable or class is declared, you can move there right from the Variables pane.
To navigate to the code where the variable is declared, right-click a variable and select Jump to SourceF4.
To navigate to the class declaration of the variable type, right-click a variable and select Jump to Type SourceF4.
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.
note
When evaluating expressions, be mindful of variable scope and lifetime. All expressions are evaluated in the context of the current execution point.
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.
Point at the expression which you are going to evaluate. The result of the expression appears in a tooltip.
If you need to view child elements , click or press Ctrl+F1.
If you find value tooltips distracting, you can increase the delay or disable them altogether. To do this, in the Settings 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).
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).
Click Run | Debugging Actions | Quick Evaluate ExpressionCtrl+Alt+F8. Alternatively, hold Alt and click the selection.
note
If there are breakpoints inside the method called from the expression, they will be ignored.
tip
When calling methods, make sure you are aware of their possible side effects (for example, changes to an outside variable), as they may alter the program flow or result.
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 | 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, anonymous classes, arrow functions, loops, 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.
note
This option is available only if the program was suspended after hitting a breakpoint (not paused manually).
The quickest way to evaluate an arbitrary expression is to enter it in the expression field in the Variables pane and press Enter
The result is displayed right below. You can also add the expression to watches, using the button in the right-hand part of the expression field.
If you want to evaluate long code blocks, you may want to use a dedicated dialog for that:
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 pane, select it.
Click Run | Debugging Actions | Evaluate ExpressionAlt+F8. The shortcut may not work on Ubuntu (for correct operation, adjust the shortcut configuration).
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 ExpandShift+Enter.
note
Keep in mind that any variables declared in the body of the expression go out of scope after the expression has been evaluated.
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.
note
If there are breakpoints inside the method called from the expression, they will be ignored.
tip
When calling methods, make sure you are aware of their possible side effects (for example, changes to an outside variable), as they may alter the program flow or result.
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.
Once the variable value has changed, the inline view is updated with the new value and changes its color.
Inline values view is enabled by default. To turn it off, in the Settings 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.
Click the inline hint referring to the object whose field you want to track.
In the popup, select the field and click Add as Inline Watch.
Fine-tune the watch if needed. You can use any valid expression as a watch.
Inline watches you set in the editor are also shown under Inline Watches in the Variables pane of 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).
tip
When calling methods, make sure you are aware of their possible side effects (for example, changes to an outside variable), as they may alter the program flow or result.
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 .
By default, watches are shown together with variables in the Variables pane. To hide/reveal the Watches tab, use the Separate watches button in the Layout Settings menu.
Add a watch
Enter the expression in the top part of the Variables $tab$, then click Add to Watches.
tip
If the variable or expression that you are going to track is already in front of you (for example, in the code editor) you can just select and drag it to the Variables pane. For the variables in the current context, you can also right-click them in the Variables pane and select Add to Watches.
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
Select the watch you are going to copy.
Click Duplicate Watch on the Variables pane 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 pane.
Use the Move Watch Up/Move Watch Down buttons on the Variables/ Watches pane or Ctrl+Up and Ctrl+Down keyboard shortcuts.
Delete a watch
To remove a single watch, right-click it and select Remove Watch. Alternatively, select the watch and press Delete on the Variables/ Watches pane.
To remove all watches, right-click anywhere on the Variables/ Watches pane and select Remove All Watches.
located in the top-right part of the Frames pane.
or press Ctrl+F1.
.
in the Layout Settings menu.
on the Variables pane or press Ctrl+D.
on the stepping toolbar of the Debug tool window.