facebook
  1. Genuitec Learning Center
    2.  > 
  2. Archives

AJAX Debugging in MyEclipse

Note: The current debugger is available only on Windows 32-bit and Linux 32- and 64-bit. The debugger also runs on OS X 32-bit Carbon in MyEclipse 2014 and earlier. However, because MyEclipse 2015 is supported only on 64-bit Cocoa, the debugger is not available for OS X in MyEclipse 2015. A new debugger that is available for all three OSs is a high priority for the MyEclipse team and is planned to be delivered during the 2015 calendar year.


1. AJAX Debugging

This document describes, at a high level, the steps for debugging a site with AJAX calls. If you’re new to AJAX development, debugging can shorten ramp-up time on a new project if you can analyze the application from a user’s perspective, as opposed to simply digging through source code and trying to learn it from the bottom up.

To begin, you connect to a site that has AJAX calls, either your own or any site on the internet. This document does not get into the complexities of JavaScript debugging. Rather, it describes the steps to debugging a site, providing you with enough information to enable you to start debugging your own projects.

1.1 Opening the AJAX Web Browser

The easiest way to start debugging AJAX calls is to connect the MyEclipse AJAX Web Browser to the site you want to debug. Start a debugging session by clicking the Launch AJAX Web Browser icon on the toolbar. The AJAX Web browser opens a separate MyEclipse workbench window. When you enter a URL in the browser Address field, information appears in the views.

AJAX browser views

After the AJAX browser opens, you might be confused by the views in the window, but the important thing to note is that until you start debugging, the most important views are the MyEclipse AJAX Web Browser view and the DOM Inspector view.

The Browser view is an instrumented web browser built for debugging. The DOM Inspector view is an outline of the DOM (Document Object Model) of the web page you are currently viewing. It shows you the layout of the page, based on the tag structure. If you haven’t done AJAX development, this might not seem that helpful. However, as you begin to write JavaScript to hide or show portions of a page in response to a user’s interaction with it, you will start to see why being aware of the page’s DOM is important.

1.2 Loading a Site for Debugging

Load a website into the browser to start the debugging session. Enter the URL in the Address field of the Browser view. After the page loads, click the Debug icon in the browser toolbar.

Site loaded for debugging

1.3 Triggering an Action

On the site, trigger an AJAX action such as submitting a vote, for example, and use the Request Monitor to watch the request occur in real-time to see the which JavaScript function is called. In the example below, LinkManager.incrementVoteCount is being called.

Viewing function called when AJAX action is triggered

After determining which function is called, find the function in the JavaScript Scripts Inspector view, and double-click the file to open it.

Finding the JavaScript file associated with the AJAX call

Set a breakpoint in the JavaScript function, and trigger the action again. This causes the breakpoint to be hit and gives you a chance to take a look at what the script is doing. In the following example, the breakpoint is set at the incrementVoteCount function.

Setting a breakpoint in the JavaScript

When you go back to the browser and trigger the AJAX call again, the breakpoint is hit, and the Debug perspective displays the breakpoint and variable values. Click the Resume icon to continue running the script.

Debug perspective when breakpoint is hit


2. FAQ

The JavaScript inspector, console, AJAX request monitor and other views are empty.
You are seeing this most likely because you have not clicked the Debug icon on the toolbar to load the current page into a debugging session. In debugging mode, all those views are populated.

I can’t find the method being called.  All I see is “Anonymous” when I expand the JavaScript files.
This is caused by anonymous function definitions in JavaScript. The good news is that you can still set breakpoints in the code, and those breakpoints are still hit when executed. You only need to determine which functions are getting called.

Debugging is extremely slow, how can I speed it up?
Slow debugging can occur when the site you are debugging uses a huge amount of JavaScript. Because every line of JavaScript becomes a valid target for a breakpoint, evaluation of the JavaScript at runtime gets more expensive and can seem slower. To help speed up a debugging session, you can tweak your memory settings.


3. Resources

Introduction to JavaScript

Background Information on AJAX

AJAX Resources, Sites and Tutorials

AJAX Frameworks