Viewing Definition

On this page:

• Basics
• Examples
• Viewing the definition of a symbol at caret
• Toolbar of the quick definition lookup

Basics

Quick Definition Lookup makes it possible to view definition of a symbol (tag, class, method/function, field, etc.) in a pop-up window.

Examples

For markup languages, WebStorm retrieves definitions of symbols from the specified DTD or schema. For details, see Markup Languages and StyleSheets.

In the JavaScript context, WebStorm retrieves the definition of a symbol from the source code and displays the name of the file where the symbol is defined:

Viewing the definition of a symbol at caret

Do one of the following:

• On the main menu, choose View | Quick Definition.
• Press Ctrl+Shift+I.
• Keeping the Ctrl key pressed, point with your mouse cursor to the symbol of interest, so that it turns to a hyperlink, with the definition of the symbol displayed in a tooltip. Clicking this hyperlink results in opening the respective definition page in the editor.

  Quick definition tooltip shows hyperlinks to the symbols involved.

  

  When you move your mouse pointer within the tooltip, a pin button appears. If you pin the tooltip, documentation for the symbol at caret is displayed in the Documentation Tool Window.

Toolbar of the quick definition lookup

Use the icons on the toolbar of the pop-up window to navigate to the source code of the definition and view its usages.

Icon	Keyboard shortcut	Action
	Shift+Alt+Left Shift+Alt+Right	Navigate to the previous/next screen in the definition pop-up window after using hyperlinks in the definition.
	F4	Open the source code of the definition for editing, and close the quick definition lookup window. If WebStorm cannot find the appropriate sources in your project, it will try to decompile the code. In this case the JetBrains Decompiler dialog with legal information is displayed.
	Ctrl+Enter	Open the source code of the definition, and preserve the quick definition lookup window opened.