WebStorm 2017.1 Help

PSI Viewer

Tools | View PSI Structure

Use this 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.

Show PSI structure forUse 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.
Show PsiWhiteSpaceIf this check box is selected, the generated tree view will contain PsiWhiteSpace nodes, corresponding to the spaces in the source code. When you select of clear this check box, the tree view of the PSI structure changes accordingly.
Show Tree Nodes
DialectThis drop down list becomes available for the languages that support dialects, for example, SQL, JavaScript etc.
TextUse this pane to enter source code to be explored. WebStorm suggests the following ways to supply code:
  • Type immediately within the text area.
  • Paste from clipboard. If you have copied some text from the editor, and then open the PSI viewer, the previous contents of the Text pane is selected, which enables you to overwrite it from the clipboard using Ctrl+V, or Ctrl+Shift+V.
Note that some editing features are also available: removing line at caret Ctrl+Y, duplicating text Ctrl+D, and adding line with Shift+Enter .
PSI StructureThis 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.

ReferencesThis 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 TreeClick 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.

See Also

Last modified: 28 April 2017