WebStorm
 
2023.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Write and edit source code
  2. Source code navigation
  3. Source code hierarchy

Source code hierarchy

Last modified: 07 September 2023

With WebStorm, you can examine the hierarchy of classes, methods, and calls and explore the structure of source files.

Building hierarchies

  • Type hierarchies show parent and child classes of a class.

  • Method hierarchies show classes where a method:

    • Is defined.

    • Is not defined.

    • Should be defined if the class is not abstract.

  • Call hierarchies show callers (supertypes) or callees (subtypes) of a method.

When built, a hierarchy can be immediately viewed and examined in the Hierarchy tool window. By default, every new built hierarchy overwrites the contents of the current tab. You can retain the current tab and have the next hierarchy built in a new one.

Build a type hierarchy

  1. In the editor, place the caret at the desired class or interface.

  2. Go to Navigate | Type Hierarchy or just press Ctrl0H.

    Class hierarchy shown in the Hierarchy Tool Window

Different colors of elements stand for different scopes to which these files belong. For example, green by default is used for tests. For more information, refer to Associate scopes with colors.

Build a method hierarchy

  1. Open the file in the editor and place the caret at the declaration of the desired method.

  2. Go to Navigate | Method Hierarchy or press CtrlShift0H.

    Method hieraqrchy shown in the hierarchy tool window

Build a call hierarchy

Call hierarchies show callers or callees of a method or function.

  1. Open a file in the editor and place the caret at the declaration or usage of the desired method.

    Alternatively, select the desired method in the Project tool window.

  2. Go to Navigate | Call Hierarchy or press CtrlAlt0H.

Retain a hierarchy tab

  • In the Hierarchy tool window, click the Pin Tab button Pin button on the toolbar.

Viewing hierarchies

Open the Hierarchy tool window

  1. Make sure, you have already built hierarchies to show, see Building hierarchies above.

  2. Select View | Tool Windows | Hierarchy from the main menu.

Navigate between the tabs of the Hierarchy tool window

  • Right-click the currently displayed tab and select Select Next Tab/Select Previous Tab from the context menu.

  • Press Alt0→/Alt0←.

  • Click the currently displayed tab and select the next one to display from the list.

    Switching between pinned tabs in the Hierarchy tool window

Switch between callers and callees

  • With WebStorm, you can build and explore ascending or descending hierarchies, that is, callee or caller methods, parent or children classes, and so on.

    Click the Caller Hierarchy toolbar button or the Callee Hierarchy toolbar button to show caller methods or callee methods respectively.