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.
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.
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, thetoStringrepresentation 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 Source F4.
To navigate to the class declaration of the variable type, right-click a variable and select Jump to Type Source 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.
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 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 Ctrl+Alt+F8. Alternatively, hold Alt and click the selection.
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 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.
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 Alt+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 Expand Shift+Enter.
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.
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.
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 values view is enabled by default. To turn it off, in the Settings dialog (Ctrl+Alt+S), go to 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).
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.
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.
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 .
Press Alt+F10.
Click
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.
