WebStorm 2018.1 Help

Debug Tool Window

View | Tool Windows | Debug
Alt+5

Overview

This tool window becomes available when you start debugging.

It displays the output generated by the debugging session for your application. If you are debugging multiple applications, the output for each application is displayed in a separate tab named after the corresponding run/debug configuration.

For each application, there are the following nested tabs:

  • Console: displays system information and error messages, and the console input and output of your application.
  • Debugger: this tab is divided into the following areas:
  • Elements: appears if you are using Chrome browser for debugging.
  • When you are debugging a Node.js application, the tool window has an interactive Debugger Console where you can execute JavaScript code, view the console.log messages, jump to the location where console.log was called, and use other console features provided by the Chrome Debugging Protocol. Learn more from Using interactive Debugger Console.

Each area has a context menu that allows you to configure its behavior and navigate between tabs.

Each of the tabs and areas can be hidden/restored, or moved to a location of your choice.

WebStorm: Debug window

Debug toolbar

ItemTooltip and ShortcutDescription
stop and rerun Rerun
Ctrl+F5
Click this button to stop the current application and run it again. When an application is stopped, this button toggles to debug resume.
debug resume Debug
F9
When the current application is stopped, click this button to debug it again. When an application is running, this button toggles to stop and rerun.
run Resume Program
F9
When an application is paused, click this button to resume program execution.
pause Pause Program
Ctrl+Pause
Click this button to pause program execution.

Note that the button is not available for Run/Debug Configuration: Node.js, Run/Debug Configuration: Attach to Node.js/Chrome, and Run/Debug Configuration: NodeUnit.

stop Stop
Ctrl+F2
Click this button to terminate the current process externally by means of the standard shutdown script.

Clicking the button once invokes soft kill allowing the application to catch the SIGINT event and perform graceful termination (on Windows, the Ctrl+C event is emulated). After the button is clicked once, it is replaced with icon run tool window kill indicating that subsequent click will lead to force termination of the application, e.g. on Unix SIGKILL is sent.

debug view breakpoints View Breakpoints
Ctrl+Shift+F8
Click this button to open the Breakpoints dialog box where you can configure breakpoints behavior.
debug mute breakpoints Mute BreakpointsUse this button to toggle breakpoints status.

When the button debug mute breakpoints is pressed in the toolbar of the Debug tool window, all the breakpoints in a project are muted, and their icons become grey: muted breakpoint.

You can temporarily mute all the breakpoints in a project to execute the program without stopping at breakpoints.

debug layout Restore LayoutClick this button abandon changes to the current layout and return to the default state.
projectToolWindowSettingsIcon SettingsClick this button to open the menu with the following options available:
  • Show Values Inline: select this option to enable the Inline Debugging feature that allows viewing the values of variables right next to their usage in the editor.
  • Sort Values Alphabetically: select this option to sort the values in the Variables pane in the alphabetical order.
  • Unmute Breakpoints on Session Finish: select this option to re-enable all disabled breakpoints after the debugging session has been finished.
pin PinClick this button to pin or unpin the currently selected tab.
close Close
Ctrl+Shift+F4
Click this button to close the selected tab.
icon help Help
F1
Click this button to open the corresponding help page.

Stepping toolbar

ItemTooltip and ShortcutDescription
frames show execution point Show Execution Point
Alt+F10
Click this button to highlight the current execution point in the editor and show the corresponding stack frame in the Frames pane.
frames step over Step Over
F8
Click this button to execute the program until the next line in the current method or file, skipping the methods referenced at the current execution point (if any). If the current line is the last one in the method, execution steps to the line executed right after this method.
frames step into Step Into
F7
Click this button to have the debugger step into the method called at the current execution point.
frames force step into Force Step Into
Shift+Alt+F7
Click this button to have the debugger step into the method called in the current execution point even if this method is to be skipped.
frames step out Step Out
Shift+F8
Click this button to have the debugger step out of the current method, to the line executed right after it.
frames run to cursor Run to Cursor
Alt+F9

Click this button to resume program execution and pause until the execution point reaches the line at the current cursor location in the editor. No breakpoint is required. Actually, there is a temporary breakpoint set for the current line at the caret, which is removed once program execution is paused. Thus, if the caret is positioned at the line which has already been executed, the program will be just resumed for further execution, because there is no way to roll back to previous breakpoints. This action is especially useful when you have stepped deep into the methods sequence and need to step out of several methods at once.

If there are breakpoints set for the lines that should be executed before bringing you to the specified line, the debugger will pause at the first encountered breakpoint.

variables evaluate expr Evaluate Expression
Alt+F8
Click this button to open the Evaluate Expression dialog.

Hide/restore toolbar

IconTooltipDescription
debug_hide HideClick this button located in the upper-right corner of the Debug Console, Watches, Frames, or Variables pane to hide the corresponding area. When an area is hidden, its icon appears in upper-right corner of the Debugger.
show-console Restore 'Console' viewClick this button to make the Console area visible. This button becomes available after clickingdebug_hide.
show-frames Restore 'Frames' viewClick this button to make the Frames area visible. This button becomes available after clicking debug_hide.
show-watches Restore 'Watches' viewClick this button to make the Watches area visible. This button becomes available after clickingdebug_hide.
show-variables Restore 'Variables' viewClick this button to make the Variables area visible. This button becomes available after clicking debug_hide.

Moving tabs and areas

If you are unhappy with the default layout of the Debug tool window, you can always move the tabs and areas. To to that, just drag a tab or an area to the desired location. The possible target gets highlighted.

Drop the tab or area in the highlighted location.

To restore the default layout of tabs and area, click debug layout in the Debug toolbar.

Context menu of a tab

Use the context menu of the Frames, Variables or Watches areas to configure the behavior of these areas or navigate between tabs.

ItemDescription
HideClick this button to hide the corresponding area
Close OthersClick this button to hide all tabs except for the Console and Debugger tabs.
Focus On StartupIf this option is selected, the selected area gets the focus when you start a debugging session.
Focus On BreakpointIf this option is selected, the selected area gets the focus when a breakpoint is reached.
Select Next Tab / Select Previous Tab
Ctrl+Alt+Right / Ctrl+Alt+Left
Use these options to switch between the Console and the Debugger tabs.
Last modified: 20 July 2018

See Also

Procedures:

Reference: