WebStorm 2018.1 Help

Debug Tool Window. Variables

In this topic:

Overview

The Variables pane enables you to examine the values stored in the objects of your application.

When a stack frame is selected in the Frames pane, the Variables pane displays all data within its scope (method parameters, local and instance variables). In this pane, you can set labels for objects, inspect objects, evaluate expressions, add variables to watches and more.

Toolbar

This toolbar appears only when the Watches pane is hidden so the configured watches are displayed in the Variables pane. Hiding/showing the Watches pane is controlled through the show watches toggle button:

  • When the button is pressed, which is its default status, the Watches pane is hidden and the toolbar is shown in the Variables pane. So doing, the focus is with the Debugger tab.
  • When the button is released, the toolbar moves to the Watches pane.

ItemShortcutDescription
new watchInsertClick this button to create a new watch.
deleteDeleteClick this button to remove the selected watch from the list.
arrowUparrowDownAlt+UpAlt+DownUse these buttons to change the order of watches.
copy iconCtrl+DUse this button to create a copy of the selected watch.
show watchesShow watches in Variables tab Use this toggle button to have the Watches pane hidden or shown. By default, the button is pressed and displayed on the toolbar of the Variables pane. Consequently, the Watches pane is hidden and the watches are shown in the Variables pane.
  • To have the Watches pane displayed separately and view the configured watches in it, release the Show watches in Variables tab toggle button. The Watches pane appears with the Show watches in Variables tab toggle button on the toolbar.
  • To hide the Watches pane and view the watches in the Variables pane, press the show watches toggle-button on the toolbar of the Watches pane. The toggle button returns to the default location on the toolbar of the Variables pane.
ItemShortcutDescription
InspectN/AThis command is available for fields, local variables and reference expressions, and opens a non-modal Inspection window, where you can concentrate on a particular reference. You can open as many Inspection windows as required. The view in the Inspection window is the same as in the Watches pane, but requires less screen space.
Mark ObjectF11Use this command to add an object label.
Set ValueF2Use this command to change the runtime value of a field or a variable.
Copy ValueCtrl+CUse this command to copy the value of the selected variable to the Clipboard. If multiple items are selected, not only variables' values, but also their structure is copied, so that when you copy-paste the selection to a text file, the indentation mimics the tree output of the debugger to produce an easy-to-read output.

Alternatively, hover your mouse cursor over a value and view its contents in the tooltip.

Copy JSONThis menu item is available only in the JavaScript context. Choose this command to copy the selected value in the JSON format.
Compare Value with ClipboardN/AUse this command to compare the selected value with the value currently in the Clipboard.
Copy NameN/AUse this command to copy the name of the selected variable to the Clipboard.
evaluateExpressionIconEvaluate ExpressionAlt+F8Use this command to evaluate the selected variable in the dialog that opens.
Evaluate In ConsoleN/AThe option is available in the JavaScript context only.

Choose this option to have the selected variable copied as input in the Console pane. When you switch to the Console pane, the variable name is shown in green at > and its value is displayed below in blue.

Alternatively you can type the name of any variable at > in the Console manually and press Enter to have its value displayed. Code completion is at your disposal: as you type the name of a variable, WebStorm displays a suggestion list. Note that this functionality is available only when the Use Console Input toggle button is pressed.

To evaluate a previously evaluated variable without searching for it in the Variables pane, find the variable in question using the Up and Down arrows on you keyboard and press Enter.

watches addAdd to WatchesN/AThis command is available for all nodes except static ones. Use this command to create an expression that references the node and add this expression to the Watches pane.
Show Referring ObjectsN/AUse this command to display a list of objects referring to the currently selected variable.
Jump to SourceF4This command opens the source code of the selected variable or field in the editor and places the caret in the corresponding line.
Jump to Type SourceShift+F4 Use this command to navigate to the definition of the class of the selected variable or field.

Variable types

The icon on the left of each variable indicates its type:
  • 1_debuggerStatic.png: static
  • global variable: global
  • 1_debuggerField.png: field
  • 1_debuggerArray.png: array
  • 1_debuggerPrimitive.png: primitive
  • 1_debuggerObject.png: object
Last modified: 20 July 2018

See Also