new features
version comparison
features: php tools
php debugger
php profiler
php frameworks
php scripts
features tour
php testing
PhpED difference
PhpED on Mac/Linux

JavaScript Code Explorer

JavaScript Code Explorer is part of Web 2.0 support in PHP IDE designed to help the developer to navigate through and explore JavaScript Code. JavaScript mode is available next to PHP mode in PhpED's Code Explorer to provide an easy navigation through all JavaScript and PHP Files in the current Project. You can also use JavaScript Code Navigator to navigate through JavaScript code in any open JavaScript file. In this tutorial you will learn how to use JavaScript Code Explorer tab in PhpED.

JavaScript mode in Code Explorer tab

PhpED's Code Explorer has PHP and JS tabs. The functionality of PHP Code Explorer is available here. JavaScript mode of the Code Explorer provides the powerful ability to view and search JavaScript functions ,classes and even variables for any files of your project. The tab displays a list of JavaScript classes, functions, constants and variables present in the current project.
3 different modes are available:

  • Class View. In this mode JavaScript objects are grouped by types (constants, variables, classes and functions). This provides the general overview of your JavaScript files in project.
  • Project list. Lists all files in the current project with their contents grouped by type. If you click on a file, an explorer-style view of the classes and functions available from that file will open, including the expected arguments for each.
  • Project Tree. Represents the project structure with folders, files and file contents grouped by type. If you click on a file, an explorer-style view of the classes and functions available from that file will open, including the expected arguments for each.
For example, the picture below displays JS Code Explorer in Project List View mode:
JavaScript Code Explorer List

How to use JavaScript Tab in Code Explorer

Use the context menu (right-click on the JS Code Explorer area opens it) to switch between view modes.
JS Code Explorer displays the information about the object - e.g. where is it defined and the lines where the object is first used.
Two numbers in brackets next to the object's name shows the number of modules using this object (if there is more than 1 module).
JavaScript Code Explorer Object Use

How to perform search in JS Code Explorer

JS Code Explorer allows you to search through the contents of the project to find specific objects (classes, functions and variables).
Type the object name (or part of it) into the search field and click the binocular icon or hit Enter
JS Code Explorer Search

Double-click on the function / variable /class name in JS Code explorer opens the selected file and places the cursor on the line containing it (for constants and variables it will be first line, where they appear. If the variable appears in multiple files, 1 double-click opens 1 file, starting with the first in the list). Right-click on the file / function name brings up the contextual menu with the following options:

  • Go to definition. Select it to open file / to move the cursor to the line containing the selected function.
  • Find next. Jumps to the next object relevant to the search. Active when the search field is not empty.
  • Find previous. Jumps to the previous search result. Active when the search field is not empty.
  • Sort by name. Select it to sort items in the Code Explorer window by name.
  • Sort by definition. Select it to sort items in the Code Explorer window by definition.
  • Project list. Select it to display the tree of all the JavaScript files and their code structures containing in the active project.
  • Project tree. Select it to display the active project structure tree (identical to that in the Workspace tab) with all the JavaScript files and their code structures.
  • Class View. Select it to display constants, variables, classes and functions sorted by type

Note: JavaScript files are designated with the extensions specified in the Associations tab.

 Download NuSphere PHP IDE

Download a free trial of the fast PHP EDitor and robust Integrated Development Environment for PHP.

 Buy NuSphere PhpED® now

Best PHP Editor and complete PHP IDE.
NuSphere PhpED 19.5 is available from our online store front.
"To be honest its bloody awesome, I have looked at loads of PHP editors and this is THE only one that actual works straight out of the box!!! Brilliant, well done."
Andrew Breward,
Director of Technology


Walk through NuSphere PhpED interface
PhpED video tutorial: Webservices
Learn how to add webservices to your code in less than 5 minutes (a flash demo).

 Special Team4 Offer

Get 4 copies of PhpED for the price of 3!

Optimum solution for development teams.
PhpED 19.5 Team4
Need more than 4 licenses? Contact Us for more quantity discounts, please use "Ordering/Payment issue" subject on the form.

 Dr. Dobb's

Dr. Dobb's

Dr. Dobb's Magazine covers NuSphere PhpED in New and Noteworthy section.

PhpED is a proper, world-class IDE for PHP code. It is the only IDE worth considering if PHP development is your primary job