facebook

Navigating JavaScript Code: MyEclipse 2015 CI 14–2020.9.16

This document covers JavaScript support in older versions of MyEclipse. For an improved experience, update to the latest MyEclipse and refer to this page.

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. 

jsoutline
Outline view menu

Quick Outline

Press Ctrl+O while editing a JavaScript file to open the Quick Outline for easy navigation through your code. 

jsquickoutline
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 markoccurencesbutton or press Alt+Shift+O.

markoccurences
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.

opendeclaration
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.

jscallhierarchy
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.

jstypehierarchy
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.

jssearch
JavaScript Search