WebStorm
 
2023.2
Shortcuts: Windows
Get WebStorm
You are viewing the documentation for an earlier version of WebStorm.
  1. Advanced WebStorm features
  2. PSI Viewer

PSI Viewer

Last modified: 24 August 2023

With the PSI viewer, you can explore the internal structure of your source code, as it is interpreted by WebStorm.

PSI Viewer

Enable the PSI Viewer

  1. Select Edit Custom Properties from the Help menu or click Configure on the Welcome screen and then select Edit Custom Properties.

    WebStorm creates an empty idea.properties file in the configuration directory and opens it in a new editor tab. Learn more from Configuring platform properties.

  2. In the idea.properties file, type idea.is.internal=true.

  3. Restart WebStorm.

View the PSI structure of your source code

  1. From the Tools menu, select View PSI Structure.

  2. In the PSI Viewer dialog, type or paste the fragment of source code to be analyzed in the Text area, select a file type, and specify other options.

    • From the Show PSI structure for list, select the file type or the language construct to be explored. The set of recognized file types depends on the supported languages and installed plugins.

    • Select the Show PsiWhiteSpace checkbox to show the PsiWhiteSpace nodes that correspond to the spaces in the source code.

    • In the Text pane, enter the source code to be explored. Type the text manually or paste it from the 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 Ctrl0V, or CtrlShift0V.

      As you enter the code, you can remove line at caret by pressing Ctrl0Y, duplicate text with Ctrl0D, and add lines using ShiftEnter.

  3. Click Build PSI Tree to generate a PSI structure tree view and preview the generated PSI tree in the PSI Structure pane.

    If the source code in the Text pane is modified, click Build PSI Tree to refresh the tree view.

    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.

    The References 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.