MyEclipse Logo
 

MyEclipse AJAX Debugging Tutorial

Table of Contents
download the latest MyEclipse version

help and support
 

1. Introduction

Welcome to the AJAX Debugging tutorial for MyEclipse. In this tutorial we are going to show you how the AJAX debugging functionality in MyEclipse works by walking you through a remote debugging example. Hopefully, this will give you enough of an introduction so you can start debugging your own AJAX code or continue learning by debugging someone else's.


 

2. Suggested Audience

This tutorial is intended for developers who are somewhat familiar with MyEclipse or Eclipse so you recognize navigation within the IDE, and understand some of the more common views like the debugger.  It is also helpful if you have done some JavaScript programming in the past, or have a basic understanding of it, so the method calls and arguments make sense when you see them and inspect their values.

If you are just getting started in programming in general, you are certainly welcome to quickly get an overview of what MyEclipse is capable of when performing with AJAX development, but some of the mechanisms mentioned below, like breakpoints, debuggers and variable inspection, may seem a bit foreign at first. To help get introduced to JavaScript and AJAX please have a look at our introductory links in our Resources section. To get a better feel for MyEclipse and learning more about it, please check out our product Documentation for more material.


3. System Requirements

The only requirement is an installation of MyEclipse. However, if you notice portions of this tutorial looking different than the screens you are seeing within the version of MyEclipse you're using, please let us know and we will make sure to resolve any inconsistencies.


4. AJAX Debugging

In this tutorial we are going to connect to the community-moderated developer site dzone.com. For those of you that are not familiar with Dzone (or Digg.com), the way the site works is that users submit stories and everyone else votes on the stories either adding 1 or subtracting 1 from the vote total. At any time, the number of votes a story has is used to determine how "important" that story is and determines whether or not the story is shown on the front page of the site.

The interesting part about this site for this tutorial is that the developers of Dzone use AJAX calls and the DWR AJAX framework to handle the voting. In this tutorial we are going to debug the method call that increases a story's vote count to see how that particular AJAX call works.

For the purpose of this introductory tutorial, we will not get into all the complexities of JavaScript debugging.  Rather, we intend to show a simple example with enough information to enable you to start debugging your own projects. If you have any questions about the tools while you are working, please post them to our AJAX support forums.

Step 1

The easiest way to start debugging AJAX calls is to simply connect the MyEclipse AJAX Web Browser to the site you want to debug.  We will start our debugging session by opening the AJAX Web Browser. This is done by selecting the AJAX Web Browser button in the MyEclipse toolbar and clicking it as shown below (NOTE: Click "Play" to see a demonstration):

Figure 1. Click the AJAX Web Browser  button in the toolbar to get started

After clicking the AJAX Web Browser toolbar button, the browser window will open. You may be confused about all the views in this window but the important thing to note is that until you start debugging the only two views that are going to be important are the MyEclipse AJAX Web Browser view and the DOM Inspector view.

The browser view is fairly straight forward; it's simply 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 before then this may not seem that helpful.  However, as you start to write JavaScript to hide or show portions of a page in response to a user's interaction with it, you can start to see why being aware of the page's DOM will be important.

Step 2

Next, we'll load the Dzone website into the browser and start our debugging session. The first part is simply typing in the URL and hitting enter in the browser view.  After the page loads, we can start the debugging session simply by clicking the Instant-On debugging button in the toolbar as shown below (NOTE: Click "Play" to see a demonstration):

Figure 2. Navigate to the Dzone website and then start the debugging session

Step 3

After the debugging session has started, what we want to do now is get used to the interface a little bit and see a quick description of what all the different views do (now that they are all loaded up with information).

NOTE: To vote on a news story on dzone.com, you must have a Dzone account. You can register for your free Dzone account here.

The next step is to trigger a vote action and use the AJAX Request Monitor to watch the request occur in real-time to understand what JavaScript function is getting called.

Once we've determined which function is being called, we'll set a breakpoint in that JavaScript function and then vote again.  This will cause the breakpoint to be hit and give us a chance to take a look at exactly what the script is doing (NOTE: Click "Play" to see a demonstration):

Figure 3. After starting the debugging session, setting and hitting a breakpoint is easy

5. Conclusion

We hope you now have a good idea of how AJAX debugging works in MyEclipse. We've worked hard to make the debugging fast and easy for not only your own work, for which you have the source code, but for debugging other applications to learn how some of the more advanced AJAX work is done. An additional benefit of debugging is that you 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. If you have any suggestions for us to help make it more informative, please let us know.

Below we would like to provide you with some more information pertaining to the topic covered in this tutorial. We offer the FAQ section for quick references to common questions and the Resources section with links to other helpful resources online that you may want to become  familiar. We realize we can't cover every question you may have in one tutorial, but between this tutorial contents and our additional learning resources we hope you are far on your way to feeling comfortable with the technology.


6. FAQ

This section will list some of the more common questions that can come up while performing the tasks outlined in this tutorial.

  1. The JavaScript inspector, console, AJAX request monitor and other views are empty.
    • The reason you are most likely seeing this is because you have forgotten to click the Instant-On debugging button in the toolbar that tells MyEclipse to load the current page into a debugging session. After that, all those views will be populated.
  2. I can't find the method being called.  All I see are "Anonymous" when I expand my 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 will still be hit when the debugger when executed. You just need to determine which functions are getting called by hand.
  3. 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 some debugging session you can tweak your memory settings as outlined here.

7. Resources

In this section we want to provide you with additional links to resources that will make learning about AJAX and AJAX debugging easier. While this is not an exhaustive list, we do make an effort to point to the more popular links that should provide you with diverse, high-quality information.

For developers that don't quite understand the "JavaScript" part of "AJAX", we strongly suggest you have a look at our Introduction to JavaScript section of links below. Those articles will introduce you to basic JavaScript programming so you'll understand how JavaScript works to enable you to more easily understand where "debugging" stands in that process.

For the people that want to learn more about AJAX in general and get some examples right away, skip down to the AJAX Resources, Sites and Tutorials section for some great links.

Introduction to JavaScript

Background Information on AJAX

AJAX Resources, Sites and Tutorials

AJAX Frameworks


8. Feedback

We would like to hear from you! If you liked this tutorial, has some suggestions or even some corrections for us please let us know. We track all user feedback about our learning material in our Documentation Forum.  Please be sure to let us know which piece of MyEclipse material you are commenting on so we can quickly pinpoint any issues that arise.