WebStorm
 
2023.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Configuring the IDE
  2. Tool windows

Tool windows

Last modified: 20 September 2023

View | Tool Windows

Tool windows provide access to development tasks: viewing your project structure, running and debugging your application, integration with version control systems and other external tools, code analysis, search, navigation, and so on. By default, tool windows are attached to the bottom and sides of the main window. However, you can rearrange and even detach them to use as separate windows, for example, on another monitor.

WebStorm tool windows

  1. Editor

  2. Project tool window

  3. npm tool window

  4. Debug tool window

. Some tool windows are always available (for example, Project, Structure, or Terminal), some are activated when a specific plugin is enabled or your project has a specific structure (for example, TypeScript, Grunt, npm, or Spy-js), others appear only when you perform a certain action (for example, Debug or Find).

Open a tool window

To show or hide a tool window, do one of the following:

  • Go to a tool window under View | Tool Windows.

  • Use the corresponding shortcut, for example, Alt01 to open the Project tool window . If there is no shortcut for a tool window, you can assign it as described in Configure keyboard shortcuts.

  • Click the corresponding tool window button on the tool window bar.

    Tool window bar

  • In the Classic UI, hover over the quick access button Icon for quick access to tool windows / the Tool windows icon in the lower left corner of the main window and select a tool window.

    Quick access to tool windows

Hide the active tool window

  1. Press ShiftEsc or select Window | Active Tool Window | Hide Active Tool Window from the main menu.

    To show the hidden tool window, use the shortcut assigned to it (go to View | Tool Windows to see the full list of tool windows with shortcuts).

  2. Right-click the tool window's icon on the toolbar and select Hide.

  3. Click the Hide button (the Hide icon) on the tool window's title bar.

To focus your attention on the editor, you can hide all tool windows and then when necessary, quickly restore all windows that were open when you've hidden them.

Hide or restore all tool windows

  • Press CtrlShiftF12.

  • Double-click the editor tab that you want to maximize. This will only work if Perform 'Hide All Tool Windows' / 'Restore Windows' with double-click on editor tab is enabled on the Advanced Settings page of the IDE settings CtrlAlt0S.

  • Select Window | Active Tool Window | Hide All Windows/Restore Windows from the main menu.

  • To change focus from a tool window to the last caret location in the editor, press Esc.

  • If you selected a code item in a tool window, for example, a search result, a code issue, or a bookmark, press F4 to open the corresponding file and locate this item in the editor.

  • To change focus from the editor back to the last active tool window, press F12 or select Window | Active Tool Window | Jump to Last Tool Window from the main menu.

Tool window bars and buttons

Tool window bars on the sides of the main window contain the icons of tool windows. Click an icon to show or hide the tool window. Right-click a tool window icon to open the context menu, where you can hide or move the tool window. You can also drag tool window icons to rearrange tool windows.

Show or hide tool window icons

  • Select or clear Tool Window Bars from the main menu under View | Appearance.

When the tool window bars are hidden, you can double-press and hold Alt to show them.

Tool window components

Generally, all tool windows have a title bar, a toolbar, and a content pane.

Components of a tool window

Some tool windows are also separated using tabs or a dropdown selector in the title bar, based on the functionality that it covers. Select Window | Active Tool Window | Group Tabs to show tabs. Disable this option to show a dropdown menu.

The Project tool window with the Group Tabs option enabled

The title bar contains the tool window options menu The tool window options menu / Options for changing the viewing mode and the position of the tool window. You can also access these options by right-clicking the title bar or the tool window button. Some tool windows can have other options in this menu, depending on the functionality (for example, to sort, filter, and group items listed in a tool window).

Click the Hide button to hide the tool window and use other buttons that may be on the title bar, for example:

  • The Expand All button and The Collapse All button to expand and collapse the contents of the tool window

  • The Select Opened File button to locate and select the file from the editor in the tool window

Actions from the tool window toolbar are usually also available in the main menu and context menus. Some of them can also be executed with a default shortcut. You can assign shortcuts for actions as described in Configure keyboard shortcuts.

For all tool windows that display tree-like structures (for example, Project tool window) you can display vertical lines that mark indent levels in tree views and help you better understand the hierarchy of the components in your project. To display these lines, enable Show tree indent guides on the Appearance and Behavior | Appearance page of the IDE settings CtrlAlt0S.

You can use the following shortcuts to manage WebStorm's tool windows:

Hide Active Tool Window

ShiftEsc

Hide All Tool Windows

CtrlShiftF12

Jump to Last Tool Window

F12

Stretch to Left

CtrlAltShift0←

Stretch to Right

CtrlAltShift0→

Stretch to Top

CtrlAltShift0↑

Stretch to Bottom

CtrlAltShift0↓

Show Project window

Alt01

Show Bookmarks window

Alt02

Show Find window

Alt03

Show Run window

Alt04

Show Debug window

Alt05

Show Problems window

Alt06

Show Structure window

Alt07

Show Services window

Alt08

Show Version Control window

Alt09

Show Commit window

Alt00

Show Terminal window

AltF12

Show Database window