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.

Search for usages in a file

In the editor, select a symbol you want to find, WebStorm automatically highlights all found usages in the file.

To turn this highlighting off, open the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | General, and clear the Highlight usages of element at caret checkbox.
When automatic highlighting is disabled, press Ctrl+Shift+F7 to highlight all usages of a symbol at caret within the file.
From the main menu, select Edit | Find | Find Usages in File Ctrl+F7. WebStorm selects the first usage occurrence in the file.

Use the F3 and Shift+F3 shortcuts to navigate between highlighted symbols.

You can also use the N/A and N/A shortcuts for navigation between usages.

Search for usages in a project

Select a symbol for which you want to find usages, right-click the symbol, and select Edit | Find | Find Usages from its context menu or press Alt+F7.
Check the results in the Find tool window.

To open the Find Usages dialog, click on the toolbar in the Find tool window or press Ctrl+Shift+Alt+F7.

While in the Find tool window, you can also use the Preview area to check the places where the usages were found, to see a call hierarchy for methods, data flow for fields, and so on.

You can use the Find Usages action as an alternative to the Call Hierarchy actions.

Show usages in a separate window

You can view usages of the selected symbol in a separate window that you can move to different parts of your screen and use for quick navigation.

In the editor, select a symbol for which you want to see the usages.
From the main menu, select Edit | Find | Show Usages Ctrl+Alt+F7.

Click to move the search results to the Find tool window.

The usages window shows the current scope. If you want to quickly switch to the default scope, press Ctrl+Alt+F7.

View results of recent searches for usages

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

From the main menu, select Edit | Find | Recent Find Usages and then select the usage query.

Manage the Find Usages scope

If WebStorm doesn't find any usages of a symbol, it displays a message.

Click or press Ctrl+Shift+Alt+F7 to open the Find Usages dialog and set a new scope for your search, for example, Open Files or Project Test Files.

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

Disable automatic highlighting of usages

When you place the caret at a symbol, the IDE highlights all usages of this symbol in the current file. Use the F3 and Shift+F3 shortcuts to navigate between highlighted symbols.

To disable automatic highlighting, open the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | General, and clear the Highlight usages of element at caret checkbox.

When automatic highlighting is disabled, place the caret at the necessary symbol and press Ctrl+Shift+F7. This will highlight all usages of the symbol in the current file.

Change the background color of the highlighted usages

In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Color Scheme | General.
From the options on the right, open the Code node and select Identifier under caret.
In the Background field, specify the color you need and save the changes.

Last modified: 17 February 2020