Source code navigation
You can quickly navigate through code in the editor using different actions and popups.
You can start with watching a video tutorial to check what navigation options are available in WebStorm.
Find a file path
In the editor, press Ctrl+Alt+F12 or in the context menu, select Reveal in Finder.
In the Reveal in Finder popup, select a file or a directory to open in a path finder and press Enter.
Navigate with the Select In popup
You can automatically locate a file in the Project tool window.
If the file is opened in the editor, press Alt+F1 to open the Select In popup.
In the popup, select Project View and press Enter. WebStorm locates your target in the Project tool window.
Use Autoscroll to locate a file
You can use the Autoscroll to Source and Autoscroll from Source actions to locate your file in the Project tool window.
In the Project tool window, right-click the Project toolbar and from the context menu select Autoscroll from Source. After that WebStorm will track the file that is currently opened in the active editor tab and locate it in the Project tool window automatically.
You can also select the Autoscroll to Source option. In this case, when you click a file in the Project view, WebStorm will automatically open it in the editor.
Use bookmarks for navigation
To create an anonymous bookmark, place the caret at the needed code line and press F11.
To create a bookmark with mnemonics, place the caret at the needed code line, press Ctrl+F11 and select a number or a letter for the mnemonics.
To open the Bookmarks dialog, press Shift+F11. You can use this dialog to manage bookmarks, for example, delete, sort bookmarks, or supply them with a brief description.
To navigate to an existing bookmark with letter mnemonics, press Shift+F11 and then press a letter you need. WebStorm returns you to the editor and to the corresponding bookmark.
To navigate to an existing bookmark with number mnemonics, press Ctrl and the bookmark's number.
Every created bookmark is reflected in the Favorites (Alt+2) tool window which you can also use for navigation to your bookmarks.
Go to declaration and its type
You can navigate to the initial declaration of a symbol and symbol's type from its usage.
Place the caret at the desired symbol and press Ctrl+B.
Alternatively, keeping Ctrl (⌘ for macOS) pressed, hover your mouse pointer over the symbol. When the symbol turns into a hyperlink, its declaration will be displayed in the tooltip. Click the hyperlink without releasing the key to open the declaration in the editor.
For a type declaration, press Ctrl+Shift+B.
Alternatively, keeping Ctrl+Shift (⌘+⇧ for macOS) pressed, hover your mouse pointer over the symbol. When the symbol turns into a hyperlink, its type declaration will be displayed in the tooltip. Click the hyperlink without releasing the keys to open the type declaration of the symbol in the editor.
Go to Implementation
You can keep track of class implementations and overriding methods either using the gutter icons or pressing the appropriate shortcuts.
Click one of the / , / gutter icons and select the desired ascendant or descendant class from the list.
To navigate to the super method, press Ctrl+U.
To navigate to the implementation, press Ctrl+Alt+B.
Navigate between changes
Press Ctrl+Shift+Alt+Down/ Ctrl+Shift+Alt+Up.
From the main menu, choose.
Click a change marker, and then click or .
Navigate between errors or warnings
To jump to the next or previous found issue in your code, press F2 or Shift+F2 respectively. Alternatively, from the main menu, select.
WebStorm places the caret immediately before the code issue.
Configure the way WebStorm navigates between code issues: it can either jump between all code issues or skip minor issues and only navigate between detected errors. Right-click the code analysis marker in the scroll bar area and choose one of the available navigation modes from the context menu:
To have WebStorm skip warnings, infos, and other minor issues, choose Go to high priority problems only.
To have WebStorm jump between all detected code issues, choose Go to next problem.
Locate a code element with the Structure view popup
You can use the structure view popup to locate a code element in the file you are working on.
To open the structure view popup, press Ctrl+F12.
- In the popup, locate an item you need. You can start typing a name of the element for WebStorm to narrow down the search. Press Enter to return to the editor and the corresponding element.
While in the popup, you can sort file members and see inherited members.
Browse through methods
To visually separate methods in code, in the Settings/Preferences dialog (Ctrl+Alt+S), go to and select the Show method separators option.
Use the Lens mode
The lens mode lets you preview your code without actually scrolling to it. The mode is available in the editor by default when you hover your mouse over the scrollbar.
To disable the lens mode, right-click the code analysis marker located on the right side of the editor and in the context menu clear the Show code lens on the scrollbar hover checkbox.
As an alternative, in the Settings/Preferences dialog (Ctrl+Alt+S), go to and clear the Show code lens on the scrollbar hover checkbox.
Use breadcrumbs for navigation
You can navigate through the source code with breadcrumbs that show names of classes, variables, functions, methods, and tags in the currently opened file. By default, breadcrumbs are enabled and displayed at the bottom of the editor.
To change the location of breadcrumbs, right-click a breadcrumb, in the context menu select Breadcrumbs and the location preference.
To edit the breadcrumbs settings, in the Settings / Preferences dialog (Ctrl+Alt+S), go to .
Navigate to a file with the Navigation bar
Use the Navigation bar as a handy tool to find your way across the project.
Press Alt+Home to activate the Navigation bar.
Use the arrow keys or the mouse pointer to locate the desired file.
Double-click the selected file, or press Enter to open it in the editor.
Find a line or a column
In the Go to Line/Column dialog, specify a line or column number, or both, separating them with: and click OK.
If you don't want to see the line numbers in the editor, in the Settings/Preferences dialog (Ctrl+Alt+S), go to and clear the Show line numbers checkbox.
Find the caret, edited line, or edited location
To find the current caret location in the editor, press Ctrl+M>. This action might be helpful if you do not want to scroll through a large file.
However, you can press the Up and Down arrow keys to achieve the same result.
To highlight a word at the caret you are trying to locate, selectfrom the main menu.
To see the previous caret position, selectfrom the main menu or press Ctrl+Alt+Left. To move forward, select or press Ctrl+Alt+Right.
To move the caret forward to the next paragraph or backward to the previous one, press Ctrl+Shift+A and search for the Move Caret Forward a Paragraph or Move Caret Backward a Paragraph action.
You can also select a text and then move the caret forward or backward to a paragraph. Press Ctrl+Shift+A and search for the Move Caret Forward a Paragraph with Selection or Move Caret Backward a Paragraph with Selection action.
If you need, you can assign shortcuts to these actions. Refer to Configuring keyboard shortcuts for details.
To toggle between the starting and ending code block braces, press Ctrl+Shift+M.
To navigate between code blocks, press Ctrl+Shift+[ or Ctrl+Shift+].
To navigate to the last edited location, press Ctrl+Shift+Backspace.
Find recent files
You can search for the recent and recently edited files with the Recent Files popup.
To open the Recent Files popup with the list of recent files, press Ctrl+E.
To see only the recently edited files, press Ctrl+E again or select the Show changed only checkbox.
To search for items in the popup, start typing the search query. WebStorm displays the results based on your search.
Find recent locations
You can also check your recently viewed or changed code using the Recent Locations popup.
To open the Recent Locations popup, press Ctrl+Shift+E. The list starts with the latest visited location at the top and contains code snippets.
While in the popup, use the same shortcut or select the Show changed only checkbox to see only the locations with changed code.
To search for a code snippet, in the Recent Locations popup, start typing your search query. You can search by the code text, filename, or breadcrumbs.
To delete a location entry from the search results, press either Delete or Backspace.
Keep in mind that the deleted location is also removed from the list of entries that you access with the Ctrl+Alt+Left shortcut.