Demos
	Tutorials

Download free trial

Eclipse JavaScript Debugger

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

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.

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

• Download the MyEclipse 6.0 30-day trial edition
• To learn more about JavaScript visit the following site:
  • http://www.w3schools.com/js/default.asp
  • http://www.wdvl.com/Authoring/JavaScript/Tutorial/
• Visit the MyEclipse Educational Material page for more MyEclipse tutorials.

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:

• First JSR-045 compliant source-level JSP debugger for Eclipse
• First public article explaining that Eclipse could be used as a rich-client platform in early 2002
• First commercial RCP applications shipped on Eclipse 2.0, well before the Eclipse 3.0 RCP
• First and most comprehensive suite of application server connectors for Eclipse
• First 'hot sync' JEE application deployer to enable continuous web development without server restarts
• First native JavaScript debugger for Eclipse
• First Web 2.0 / Ajax feature-set for Eclipse
• Most database connectors supported on Eclipse
• First IDE to fully support Hibernate / Spring integration
• First full-featured image editor for Eclipse
• First Eclipse IDE to offer a low-cost, all-inclusive subscription pricing model
• First IDE to integrate NetBeans features into Eclipse
• First to create platform-independent RCP applications with SNAPs