WebStorm 2021.2 Help

Source code hierarchy

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, position the caret at the desired class or interface.

  2. From the main menu, select Navigate | Type Hierarchy or just press Ctrl+H.

    Class hierarchy shown in the Hierarchy Tool Window

Build a method hierarchy

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

  2. From the main menu, select Navigate | Method Hierarchy or press Ctrl+Shift+H.

    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. From the main menu, select Navigate | Call Hierarchy or press Ctrl+Alt+H.

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 Alt+Right/ Alt+Left.

  • 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.

Hierarchy tool window buttons

ItemDescriptionAvailable In
the Class Hierarchy button

Shows both the parent and child classes of the selected class, which is marked with an arrow in the tree of results.

Class hierarchies
the Supertypes Hierarchy buttonDepending on the hierarchy type:
  • Class hierarchies: shows the hierarchy of each supertype of the current class.

  • Call hierarchies: shows the callers of the selected method.

Class hierarchies

Call hierarchies

the Subtypes Hierarchy button

Depending on the hierarchy type:

  • Class hierarchies: shows all classes that extend the selected class.

  • Call hierarchies: shows the callees of the selected method.

Class hierarchies

Call hierarchies

the Sort Alphabetically buttonSorts all elements within a tree alphabetically.All hierarchies
Scope

Use this list to limit the scope of the current hierarchy:

  • Project: traces usages of the method across the project.

  • Test: traces usages of the method across the test classes.

  • All: traces usages of the method across the project and the libraries.

  • This class: limits the scope to the current class.

In addition to the preconfigured scopes, you can define your own one. To define a scope, select Configure from the list and define the required scope in the Scopes dialog.

Call hierarchies

In a method hierarchy, the tree views of the following classes are available:

  • the Plus icon: the method is defined.

  • the Minus icon: the method is defined only in the superclass.

  • the Exclamation mark icon: the method must be defined because the class is not abstract.

the Refresh buttonShows all updated classes or class structures.All hierarchies
the Navigate with Single Click buttonMoves to a file and a section in a source code that corresponds to the selected node in the hierarchy tree.All hierarchies
the Expand All buttonExpands all nodes.All hierarchies
the Pin buttonLocks the current tab from closing and reusing. Results of the next command are displayed in a new tab.All hierarchies
the Export to Text FileExports a hierarchy into a text file. You can specify a location for this file.All hierarchies
the Close buttonCloses the tool window.All hierarchies

Viewing the structure of a file

WebStorm can show you the structure of the file that is currently opened in the editor. You can examine the file structure in the Structure tool window Alt+7 or in the Structure popup Ctrl+F12.

  • Click The Show Fields button to show class fields.

  • Click The Show Inherited button to show inherited members.

Structure tool window
Last modified: 26 August 2021