Note: MyEclipse 2015 CI 14 introduced a new JavaScript debugger that is available on the three major operating systems.  Prior to CI 14, the JavaScript debugger is available only on Windows 32-bit and Linux 32- and 64-bit, and OS X 32-bit Carbon in MyEclipse 2014 and earlier.

1. Install the Sample Application

1. Click js_mario.zip to download the archive containing the JS_Mario web project. Save the archive to your local file system.
2. In MyEclipse, select File>Import, expand General, and select Existing Projects into Workspace. Click Next.
3. Choose the Select archive file option, browse to the location of the downloaded js_mario.zip archive, and select it.
4. Click Finish to complete the import process.
   
   Importing the JS_Mario project
5. Because this project was created with an older version of MyEclipse, a Project Migration wizard opens. Complete the wizard to migrate the project.
   
   JS_Mario project structure

2. Set a JavaScript Breakpoint

You can set JavaScript breakpoints in the JavaScript editor, the HTML Web Designer or the JSP Web Designer. In any of these editors, JavaScript breakpoints are set in the left-hand margin (often referred to as the editor gutter).

Note: In an HTML or JSP file, JavaScript breakpoints can be set only on JavaScript source lines nested in a <script> element.

1. Double-click the runmario.html file in the Explorer to open it in the HTML Web Designer.
2. Right-click the editor margin at line #9, and select Toggle Breakpoints, or double-click the margin to create a JavaScript breakpoint.
   
   
   Double-clicking margin to set a JavaScript breakpoint

To remove a JavaScript breakpoint, double-click the breakpoint icon, or right-click the breakpoint, and select Toggle Breakpoints.

3. Launch and Debug the Source

1. Right-click runmario.html in the Explorer, and select Debug As>JavaScript Application.Debugging an HTML file as a JavaScript application
   
   The MyEclipse JavaScript Debugger is launched along with the MyEclipse AJAX Web Browser. The browser loads and begins executing the runmario.html file.
   
   The onload() method calls the runMario() JavaScript function. This activates the breakpoint set on line #9 and launches into the Eclipse Debug perspective.
   
   The Debug perspective includes a Call Stack view, a JavaScript Variables view and source editors, which open while viewing activated breakpoints.
   JavaScript breakpoint hit during execution in the AJAX browser
2. Click on the Debug view toolbar to move the execution context to the next executable source line. In this example, line #9 transfers control to the enableAnimation() function in the mario.js file.
   
   Initiating the Step Into debug actionThe debugger opens the mario.js file in the JavaScript editor and steps into it.
   
   Debug context opens the mario.js source file
3. Before advancing, set a breakpoint in the makeRun() function of mario.js.
4. Click to run to the next breakpoint. The Debugger stops in the makeRun() function.
   
   Debugger stopped at makeRun() function
5. Remove the breakpoint, and click to continue execution. Notice the animation occurs when execution completes.
   
   Animated Mario
6. Click to terminate the JavaScript debugging session. The MyEclipse AJAX Web Browser closes and the JavaScript process is terminated in the Debug view.

4. Setting Up for Debugging Deployed JavaScript Applications

The prior section covered JavaScript debugging basics using an application file. However, you can configure an advanced launch configuration to execute deployed web application resources containing JavaScript breakpoints.

1. Deploy the JS_Mario project to the MyEclipse Tomcat server.
2. Right-click runmario.html in the Explorer, and select Debug As>Debug Configurations.
3. Expand JavaScript Application, and select New_Configuration.
4. Type runmario on localhost in the configuration Name field, select the URL option, and type http://localhost:8080/JS_Mario/runmario.html in the Debug Target path field.
   
   Mario Launch configuration
5. Click Debug to launch the MyEclipse AJAX Web Browser for debugging, just as in section 3 while debugging the file locally.

From this point, debugging JavaScript in pages served from an application/web server behaves identically to the file-based debugging detailed in section 3. Additionally, although this particular server debugging example used an HTML file, a JSP file that contains or references JavaScript is handled the same way, as long as the URL in the launch configuration is updated appropriately.  

5. Debugging JavaScript Applications With No Local Source Files

Some JavaScript frameworks generate JavaScript based on another description language. Debugging these applications, as well as other applications for which there is no local source, requires special tactics. The Instant-On debugging feature allows you to debug these applications as well as investigate existing JavaScript applications to determine how they work without having to make a local copy. The steps below use Google Maps to illustrate this feature.

1. Click  to open the AJAX Web Browser, and type http://maps.google.com in the address bar.
2. Click on the AJAX Web Browser toolbar.
   
   Note: You must use the MyEclipse AJAX Web Browser to navigate to the web page you’d like to debug. Other Web browsers do not support instant-on debugging.
   
   Instant-on JavaScript debugging

In the Debug perspective, you can see a JavaScript debug session started for Google Maps. But, a debug session alone doesn’t help you understand the application. You still need to be able to set breakpoints and view the JavaScript scripts that comprise Google Maps. To facilitate this, bring the JavaScript Scripts Inspector view into focus. It is included in the default Debug perspective, so if you don’t see it, select Window>Reset Perspective to open it.

In the JavaScript Scripts Inspector view, you see the script files that comprise the Google Maps application. If you select one of these scripts and expand the tree, you see the individual functions that make up the file. By double-clicking or selecting one of the top level files or methods, you can open an editor on that method or file.

When you have an editor open on the remote script, you can add breakpoints to it like a local JavaScript application.

Using the JavaScript Scripts Inspector to open scripts in the editor