Viewing Structure and Hierarchy of the Source Code
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 children 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.
To build a hierarchy of types
Select the desired class in the Project tool window or open it in the editor.
From the main menu, select
or just press Ctrl+H.
To build a method hierarchy
Open the file in the editor and place the caret at the declaration of the desired method. Alternatively, select the desired method in the Project view.
From the main menu, select
or press Ctrl+Shift+H.
To build a hierarchy of method calls
Open the 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 view.
From the main menu, select
or press Ctrl+Alt+H.
To retain a hierarchy tab
In the Hierarchy tool window, click the Pin Tab button on the toolbar.
Viewing hierarchies
Open the Hierarchy tool window
-
Make sure, you have already built hierarchies to show, see Building hierarchies above.
Select
from the main menu or press N/A.
Navigate between the tabs of the Hierarchy tool window
-
Right-click the currently displayed tab and select
/ from the context menu. -
Press Alt+Right/Alt+Left.
-
Click the currently displayed tab, and select the next one to display from the list.
Toggle between views
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 or to show caller methods or callee methods respectively.
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 to show class fields.
Click to show inherited members.