WebStorm 2023.3 Help

Arrange tool windows

By default, tool windows are attached to the edges of the main window. You can detach them to use as separate windows, as described in Tool window view modes.

Move tool windows

  • Click and drag the tool window button or the tool window title bar.

    The option to move tool windows by dragging the title bar can be disabled in settings.

    Drag a tool window

    To drag tool windows with pressing Alt, open the Settings dialog (Ctrl+Alt+S) , go to Appearance and Behavior | Appearance, and select the Drag-and -drop with Alt pressed only checkbox in the UI Options area.

  • Right-click the toolbar icon of the tool window, navigate to Move to, and select where to attach the tool window.

  • Alternatively, you can click the tool window options menu The tool window options menu/ Options or right-click the tool window title bar and select where to attach the tool window under Move to.

    Tool window options menu: Move to

Resize tool windows

Resize a tool window

  • Click and drag the border of a tool window.

  • To resize the active tool window, press Ctrl+Alt+Shift+Left, Ctrl+Alt+Shift+Right, Ctrl+Alt+Shift+Up, Ctrl+Alt+Shift+Down or use the main menu actions under Window | Active Tool Window | Resize.

  • To stretch the tool window to the maximum width or height, press Ctrl+Shift+Quote or select Window | Active Tool Window | Resize | Maximize Tool Window from the main menu.

Save custom tool window sizes

If you prefer to adjust the size of each tool window individually, you can configure the IDE to remember your custom layout.

  1. Press Ctrl+Alt+S to open the IDE settings and then select Appearance & Behaviour | Appearance.

  2. In the Tool Windows section, select the Remember size for each tool window option.

    When this option is disabled, tool windows have the unified default width, and their sizes remain constant when you switch between them.

  3. Apply the changes and close the dialog.

Optimize for wide-screen monitors

WebStorm provides several options to optimize the positioning of tool windows on wide-screen monitors.

  1. In the Settings dialog (Ctrl+Alt+S) , select Appearance & Behavior | Appearance.

  2. Under Tool Windows, configure the following:

    • Widescreen tool window layout: Maximize the height of vertical tool windows by limiting the width of horizontal tool windows.

      The Widescreen tool window layout option is disabled
      The Widescreen tool window layout option is enabled
    • Side-by-side layout on the left and Side-by-side layout on the right: Display vertical tool windows that are attached to the top and bottom edges in two columns instead of stacked on top of each other.

      Side-by-side layout is off
      Side-by-side layout is on
  3. Click OK to apply the changes.

Move tool windows to separate frames

You can drag tool windows to separate frames and leave them floating, or dock them to editor tabs in other frames.

Arrange multiple tool windows in a separate frame

  1. Click an editor tab and drag it to a new frame.

  2. Click a tool window label, then drag and attach it to the new editor frame, repeat that for all tool windows that you want to have in a separate frame.

    Moving tool windows
  3. Optionally, drag the editor tab back to the original frame.

Last modified: 20 February 2024