Outline View
The Outline view depicts a structured view of the functions and variables of a JavaScript editor, giving you a quick understanding of how the code is structured. Click an element in the outline to jump to that section in your code.
If the view is not visible in the current perspective, select Window>Show View>Other>General>Outline from the toolbar.
Outline view menu
Quick Outline
Press Ctrl+O while editing a JavaScript file to open the Quick Outline for easy navigation through your code.
Quick Outline
Mark Occurrences
Use Mark Occurences to highlight all occurences of a particular element in your file. This helps you understand the role of particular methods and variables in your code.
To enable Mark Occurrences, click the Mark Occurrences icon on the toolbar or press Alt+Shift+O.
Mark Occurences highlighting
Open Declaration
A reliable Open Declaration option is a real timesaver for the modern developer, especially when working with a large number of libraries and you really don’t recall where a given function is coming from. Jump to the declaration for the current object, whether a method, field, or function, including declarations in the current file or another file in the project.
Jump to declarations using any of the following methods:
- Press the Ctrl key and click an element.
- Select an element and press F3.
- Right-click from the element and select Open Declaration from the context menu.
Open Declaration
Call Hierarchy
The Call Hierarchy view enables you to easily visualize the flow of your JavaScript code by viewing all calls to and from a selected function.
Open the Type Hierarchy view using any of the following methods:
- Right-click an element and select Open Call Hierarchy from the context menu.
- Select Navigate>Open Call Hierarchy from the menu bar.
- Select an element and press Ctrl+Alt+H.
Call Hierarchy view
Type Hierarchy
The Type Hierarchy allows you to view hierarchies for methods, fields and variables. This view is especially useful if you are taking advantage of the classes capability in ES6.
Open the Type Hierarchy view using any of the following methods:
- Right-click an element and select Open Type Hierarchy from the context menu.
- Select Navigate>Open Type Hierarchy from the menu bar.
- Select an element and press F4.
Type Hierarchy view
Search
Use the JavaScript Search feature when you need to do advanced code analysis. Not only does it support searching for different types of constructs, our advanced JavaScript knowledge correctly identifies different types of references. No longer will you get a variable read if you are searching only for writes, or function references if you’re only looking for the declaration. The search also works well with OOP and understands ES6 syntax. You can search within OOP and ES6 classes too, and, at a more fundamental level, it understands the difference between methods and functions, or fields and variables. In the following example, the search results display only the write access to chromeWindow
while ignoring two other references to that variable because we limited the search to Write accesses.
JavaScript Search