Use the PSI viewer to explore internal structure of the various files or fragments of source code, as they are interpreted by WebStorm. The dialog box is non-modal and enables you to keep on working with WebStorm while being opened.
To view PSI structure of the source code:
On themenu, click .
In the PSI Viewer dialog box, type or paste the fragment of source code to be analyzed in the Text area, select file type, and specify other options.
Click Build PSI Tree and preview the generated PSI tree in the PSI Structure pane.
Show PSI structure for
Use this drop-down list to specify file type, or language constructs to be explored. The set of recognized file types depends on the supported languages and installed plugins.
If this checkbox is selected, the generated tree view will contain
Show Tree Nodes
|Use this pane to enter source code to be explored. WebStorm suggests the following ways to supply code: |
|This read-only pane displays the PSI structure tree view, generated on clicking the Build PSI Tree button, according to the file type selected in the Show PSI structure for drop-down list. |
Navigating though the tree view highlights the corresponding fragments of source code in the Text pane. If currently selected tree node has references, they are also displayed in the References pane.
|This read-only field shows references to the nodes of the PSI Structure tree view (if any). |
Unresolved references are shown red; the corresponding fragments of source code are also highlighted with a red frame.
Build PSI Tree
|Click this button to generate PSI structure tree view of the code in Text pane, according to the file type selected in the Show PSI structure for drop-down list. |
If source code in the Text pane has been modified, use this button to refresh the tree view.