Demos
Tutorials


Download free trial




Other Features:
Web 2.0 Tools
JavaScript Debugger
Swing UI Designer
Java Persistence Tools
Spring Tools
Struts Designer
XDoclet Support
Eclipse Ajax
Database Tools
Visual JSF
JSP Development
Visual Web Design
Eclipse Plugin
Web Services
Image Editor
HTML Editor
UML Tools
Application Server   Connectors
Struts Tools
MyEclipse SNAPs
CSS Designer
JavaScript Editor
JSP Development
MyEclipse Features

Eclipse JavaScript Debugger


First Native JavaScript Debugger for Eclipse | Instant-on JavaScript Debugging



MyEclipse is the first Eclipse-based product to provide the essential development features for programming and debugging Ajax web applications.  This advanced debugger is available only in the MyEclipse Professional Edition.  Other highly-productive Ajax features available in MyEclipse can be found on the Ajax Tools page.

The MyEclipse JavaScript Debugging System is integrated into the Eclipse debugging architecture and is an integral part of the MyEclipse Ajax Workbench.  As an example to orient you to the MyEclipse JavaScript debugging tools, below is a JavaScript debugging scenario, as well as links to the MyEclipse "Instant-on" JavaScript Debugger.

JavaScript Debugging scenario:



Setting Breakpoints

JavaScript breakpoints can be set in the JavaScript editor, the HTML Web Designer or the JSP Web Designer. Within any of these editors, JavaScript breakpoints are set in the left-hand margin (often referred to as the editor gutter) by double-clicking next to the source line or by right clicking and selecting Toggle Breakpoints.


Setting a JavaScript Breakpoint in a JS File

Breakpoints can also be added in JavaScript that is embedded in an HTML page.


Added Breakpoint in JavaScript inside HTML page

Both types of JavaScript breakpoints are shown in the standard Eclipse Debug breakpoints view.


JavaScript Breakpoints shown in Breakpoints view

Launching/Debugging JavaScript Applications

JavaScript Application launch configurations have been improved to support 2 different types of JavaScript applications: (Project file-based configuration and URL-based configuration).

Each launch configuration can also set 4 specific JavaScript debug preferences for suspending on various events. 

In previous MyEclipse releases, only URL based JavaScript configurations were possible.  Now project file-based configurations can be configured.


Stepping through JavaScript Code

When halted at a breakpoint the following actions are available from the toolbar of the Debug View.

Resume execution; runs to next breakpoint or end of program

Terminate debug process

Step Into next executable source line

Step Over next function

Step to Return of current function



Stepping in JavaScript

Inspecting Variables

When stopped at a breakpoint or stepping through JavaScript execution, JavaScript variable values may be inspected using the Variables view. This view allows you to expand functions that are in scope and browse their properties and corresponding values. As you step through JavaScript functions the Variables view dynamically updates and refreshes its variable values as they change in order to provide you an accurate view of the execution state of your application.


Inspecting JavaScript Variables

Watch Expressions / Evaluation

JavaScript debugging now supports watch expressions.  In the Expression view, you add watch expressions to monitor JavaScript variables.  When you stop at a breakpoint the expressions will evaluate and display their values in the Expression view.


JavaScript Expressions/Evaluation

JavaScript Scripts View

When debugging a JavaScript application, the Script view will show all of the currently executing JavaScript scripts that are running in the Ajax Web Browser.  Any of these scripts can be opened by just double-clicking on any script.  The children elements of each top script shows the JavaScript functions that are available, so you can jump straight to that function when you open the script.  Opening the script will allow you to inspect the code and set breakpoints accordingly.


JavaScript Scripts View

Debug Preferences

A new preference page has been added to support default options for JavaScript debugger settings.  The new page is available at the MyEclipse > Ajax > JavaScript Debug preference path.


JavaScript Debug Preferences



Instant-On Debugging


The Instant-On JavaScript Debugging action in the AjaxWeb Browser toolbar and MyEclipse Web Browser editor.  Clicking this action will begin debugging the current URL as a JavaScript application.


Instant-On JavaScript Debugging



Resources



MyEclipse Innovations

The innovation and application of Eclipse technology is Genuitec's sole business. With well over 4 million downloads, our MyEclipse Enterprise Workbench product has grown to be the most popular and successful Eclipse-based JEE IDE. Our long chain of Eclipse technology innovation includes: