WebStorm 2025.1 Help

Search for usages

With the Find Usages actions you can search for the references of your code element throughout the whole codebase.

You can manage the search process and search only in a single file, extend your search to the whole project, or create a certain search scope. Moreover, you can configure the color of the usages highlighting or disable the automatic highlighting of usages altogether.

Searching for usages

Search for usages in a file

  • In the editor, select an element you want to find, WebStorm automatically highlights all found usages in the file.

    Highlight usages in file

    To turn this highlighting off, open the Settings dialog (Ctrl+Alt+S) , go to Editor | Code Editing, and clear the Usages of element at caret checkbox in the Highlight on Caret Movement area.

  • When automatic highlighting is disabled, press Ctrl+Shift+F7 to highlight all usages of a symbol at caret within the file and to remove this highlighting.

  • Use F3 and Shift+F3 to navigate between highlighted symbols.

Change the background color of highlighted usages

  1. In the Settings dialog (Ctrl+Alt+S) , go to Editor | Color Scheme | General.

  2. From the options on the right, open the Code node and select Identifier under caret.

  3. In the Background field, specify the color you need and save the changes.

Search for usages in a project

You can invoke search for usages in a project via a shortcut, via a context menu, via the Main menu, or by clicking a code vision hint.

Search via a menu or a shortcut

You can view the usages of classes, interfaces, methods, fields, variables, and other code elements in the dedicated Find tool window or right in the editor, in a popup window.

  • To open the usages of an element in the Find tool window, place the caret at the element and press Alt+F7 or select Find Usages from its context menu.

  • To open the usages of an element in a popup window, select the element in the editor and press Ctrl+Alt+F7 or go to Edit | Find Usages | Show Usages In Code.

    Show Usages popup

    To switch to the Find tool window, click the Open in Find Tool Window icon or press Alt+F7.

Search with code vision hints

You can configure WebStorm to display Show usages hints in the editor, next to classes, interfaces, methods, fields, variables, and other code elements in the editor. This lets you focus on your code, enriched with contextual information and navigation.

  1. To display Show usages inlay hints in the editor, open the Settings dialog (Ctrl+Alt+S) , go to Editor | Inlay Hints, expand the Code Vision section, and then select the Usages checkbox.

  2. To view the usages of an element, hover over the Show usages hint next to it. When the hint turns into a link, click this link.

    Inlay hints, code vision: jump to usages

    The search results are shown in a popup window where you can analyze the usages of elements and navigate to relevant ones.

    Usages popup window via show usages hint

Configure Show usages hints

  • Show usages inlay hints are enabled by default. To turn them off, hover over a hint and select Hide 'Code Vision: Show usages' Inlay Hints or Hide All 'Code Vision' Inlay Hints from the context menu.

    Disable Usages inlay hints in the editor
  • By default, Show usageshints are shown above classes and interfaces. To change this position, click Configure from the context menu of a hint.

    Configure Usages hints

    On the Inlay Hints page, that opens, select the appropriate setting from the Position list. Alternatively, select the Code vision node and change the Default position for metrics.

    Configure position for inlay hints in the Settings dialog

View and analyze found usages

Found usages can be shown in the Find tool window or in a popup window as described above. Most actions are available in both modes, except grouping which is available in the Find tool window only.

  1. Filter out irrelevant usages

    To make the list of found usages easier to view and analyze, filter out irrelevant items by toggling the toolbar icons.

    • To show or hide references to read access methods, toggle the Show Read Access button or press Ctrl+R.

    • To show or hide references to write access methods, toggle the Show Write Access button or press Ctrl+W.

    • To show or hide usages from generated code, toggle the Show Results in Generated Code button.

    • To show or hide usages from import statements, toggle the Show import statements button or press Ctrl+I.

    • To hide or show usages in strings, toggle the Show Dynamic Usages button.

  2. View source code of a usage

    Press the Preview Source toggle button on the toolbar to open the Preview area. As you scroll through the list of found usages, the Preview area shows the source code of the currently selected usage.

  3. Show file structure

    To display the names of classes and methods next to the names of files where they are declared, toggle the File Structure toggle button.

  4. Merge duplicates

    To merge duplicate usages found on the same line, press the Merge Usages from the Same Line toggle button.

  1. Group results

    To ensure efficient navigation through the list of found usages, usages are grouped by directories and files. To use other grouping criteria, click the Group By icon on the toolbar and set ticks next to appropriate options.

    You can also group found usages according to the code structures where they occur. To do that, click the Group By icon on the toolbar and set a tick next to the Usage Type option.

    Find tool window
  2. View source code of a usage

    Press the Preview Source toggle button on the toolbar to open the Preview area. As you scroll through the list of found usages, the Preview area shows the source code of the currently selected usage.

    Find tool window preview area

    Alternatively, select Jump to Source from the context menu of a usage. The file where the selected usage was found opens in the editor.

    If several usages of an element are found in a file, you can open that file in a split mode and analyze each usage independently, without having to scroll. To do that, select a usage and press Shift+Enter or select Open in Right Split from its context menu.

  3. View hierarchies

    To view the call hierarchy for a method or data flow for a field, select the usage to examine, open the Preview area and switch to the Call Hierarchy tab.

    Find tool window preview area: Call hierarchy
  4. Rerun searches

    To rerun the last search, click the Rerun icon on the toolbar or press Ctrl+F5.

  5. Filter out irrelevant usages

    To make the list of found usages easier to view and analyze, filter out irrelevant items by toggling the toolbar icons.

    • To show or hide references to read access methods, toggle the Show Read Access button or press Ctrl+R.

    • To show or hide references to write access methods, toggle the Show Write Access button or press Ctrl+W.

    • To show or hide usages from generated code, toggle the Show Results in Generated Code button.

    • To show or hide usages from import statements, toggle the Show import statements button or press Ctrl+I.

    • To hide or show usages in strings, toggle the Show Dynamic Usages button.

  6. Change Find Usages configuration

    To open the Find Usages dialog, click the Settings button on the toolbar.

View results of recent searches for usages

WebStorm remembers your Find Usages results, so you don't need to run the action again.

To re-run a search, go to Edit | Find | Recent Find Usages on the main menu and then select the usage query.

Manage the Find Usages scope

If a search results in too many entries, WebStorm shows the first hundred usages found and displays a more usages link. Click this link to display another hundred usages, and so on until the search is finished.

If no usages of an element are found, a message is displayed.

No results found: tooltip

If you have enabled usages hints, the Show usages hint turns into no usages.

No usages found: inlay hint and tooltip

In either case, it may be helpful to try changing the search scope.

Change the scope

  • Open the popup window by pressing Ctrl+Alt+F7 or by clicking a Show usages hint and select the relevant scope from the Scope list.

    Change find usages scope in a popup
  • Open the Find Usages dialog by pressing Ctrl+Alt+Shift+F7 or by clicking Settings icon on the toolbar in the Find tool window or in the popup window.

    Select the relevant scope from the list.

    Find Usages dialog (settings for Find Usages)

    To set a custom scope, click the ellipsis icon. When you are done setting a new scope, click Find.

Last modified: 26 March 2025