Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

Exclusive offer: get 50% off this eBook here
Microsoft AJAX Library Essentials: Client-side ASP.NET AJAX 1.0 Explained

Microsoft AJAX Library Essentials: Client-side ASP.NET AJAX 1.0 Explained — Save 50%

A practical tutorial to enhancing the user experience of your ASP.NET web applications with the final release of the Microsoft AJAX Library

$23.99    $12.00
by Bogdan Brinzarea Cristian Darie | October 2007 | .NET AJAX Microsoft Web Development

Developing AJAX applications that involve complex client-side programming and communication with the server side raises the need for equally complex debugging tools and techniques.

Most of today’s AJAX frameworks, including the Microsoft AJAX Library, offer built-in capabilities for debugging and tracing.

In this article by Cristian Darie and Bogdan Brinzarea, we will learn about the capabilities built in the Microsoft AJAX Library, and we’ll also learn about third-party debugging and tracing tools.

AJAX Debugging Overview

Unfortunately, today’s tools for client-side debugging and tracing aren’t as evolved as their server-side counterparts. For example, things such as capturing ongoing communication traffic between the client and the server, or client-side debugging, aren’t usually supported by today’s IDEs (Integrated Development Environments) such as Microsoft Visual Studio 2005. The next version of Visual Studio (code-named Orcas at the time of writing) promises a lot of improvements in this area:

  • Improved IntelliSense technology with support for JavaScript code, which provides coding hints based on specially-formatted comments in the code
  • Breakpoints in inline JavaScript code

These are only the most important new coming features; there are others as well. For more information we suggest that you browse and keep an eye on Scott Guthrie’s blog at http://weblogs.asp.net/scottgu/, the JScript blog at http://blogs.msdn.com/jscript/, Bertrand Le Roy’s blog at http://weblogs.asp.net/bleroy/.

Until this new edition of Visual Studio is released, we can rely on third-party tools that can do a very good job at helping us develop our AJAX applications. You’ll find a number of tools for Internet Explorer and Mozilla Firefox for this purpose.

Debugging and Tracing with Microsoft AJAX Library

The common practices for debugging JavaScript code are:

  • Putting alert messages throughout the code to get notified about the values of the variables
  • Logging tracing messages in a <div> element

While the first option is straightforward, the second option offers a centralized place for storing different messages and could be considered more appropriate. Nevertheless both options can come in quite handy depending on the circumstances.

Microsoft AJAX Library offers the Sys.Debug object that has a series of methods that you can use for debugging and tracing. The diagram of this class is presented in figure below.

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

The Debug class

As we can easily see in the diagram, Sys.Debug offers the most common features that we can find also in other languages: assert(), trace(), traceDump(), fail(), and clearTrace().

assert(), trace(), and fail() automatically send the messages to the debugging console of the browser. To see the messages in IE you need to have the Web Development Helper, and for Firefox you need the Firebug plugin. Both of these tools are presented later in this article. Internally assert() calls fail() if the expression evaluates to false. fail() simply logs the message passed in by assert to the debugging console.

trace() offers an interesting feature beside logging to the debugging console: it offers the possibility to log the trace message in a <textarea> element with the ID TraceConsole. If such an element is found, trace() will log this message in this element too.

The clearTrace() function simply clears the TraceConsole element, if found.

The traceDump() function traces all the information about an object including its properties. Internally this function uses the trace() function so that we can have the information logged in the browser’s debugging console, and in the TraceConsole element (if it exists).

MicrosoftAjax.debug.js

You might have wondered why the Microsoft AJAX Library comes with both release and debug version of the JavaScript file. The major features of the debug version of the library files are: 

  • The script is nicely formatted.
  • The names of variables are not obfuscated.
  • The script contains code comments.
  • Some of the functions have the optional summary data that will be used by Visual Studio “Orcas” for code auto-completion.
  • The script outputs debugging-friendly information.
  • Parameters are validated.

Once the development stage is finished, you can switch your application to the release version of the script (MicrosoftAjax.js), which is smaller and doesn’t contain the debugging features presented above.

Perhaps the most interesting features of the debug version are the last two: debugging-friendly information and parameter validation.

Anonymous Functions vs. Pseudo-Named Functions

We will explain these two concepts by taking a look at how different functions are defined in the debug and release version of the library. The debug version of the library contains:

function Sys$_Debug$assert(condition, message, displayCaller) {
   ...
}

Sys._Debug.prototype = {
  assert: Sys$_Debug$assert,
  ...
}

and:

String.format = function String$format(format, args) {...}

In the release version of the library we have:

Sys._Debug.prototype = {
  assert: function(c, a, b) {
  ...
}

and:

String.format = function() {...}

In the release version, we have methods that are anonymous functions. This means that within a debugger stack trace the method name will read JScript anonymous function. This is not very useful for debugging purposes, is it?

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

Call Stack showing anonymous functions

However, the debug version of the library uses the dollar-syntax to provide alias names for our functions: String$format for String.format and Sys$Debug$assert for Sys.Debug.assert. When using the debug version of the file, the stack trace would look like:

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

Call Stack showing named functions

We can still notice some anonymous functions as they are the result of creating callback or delegate functions. The example shows two different ways of coding: 

  • In the debug version, the function is declared outside the prototype and then referenced in the prototype declaration.
  • In the release version, the declaration is done directly where the function is declared (outside or inside the prototype).

Parameters Validation

Another interesting feature that has not been documented in the Microsoft AJAX Library documentation is that of parameters validation.

Type safety is one of the typical problems when it comes to using JavaScript. Although the dynamic type features are really useful, sometimes we might really want to make sure that a parameter or object is of a certain type. To check the data type of an object, you can try converting the object to the desired type, or using the methods defined by Type. Fortunately the Microsoft AJAX Library has a function that does the dirty work for us: Function._validateParams(). The class diagram in figure below shows the _validateParameter() and _validateParams() methods of the Function class.

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

The Function class

The Function._validateParams() function, even if it is declared as private (by convention, using the leading underscore), can be used by our scripts as it is used throughout the debug version of the Microsoft AJAX Library. Here’s an example of using this function:

function Sys$_Debug$fail(message) {
/// <param name="message" type="String" mayBeNull="true"></param>
   var e = Function._validateParams(arguments,
         [ {name: "message", type: String, mayBeNull: true} ]);
   if (e) throw e;

This shows how the parameter for the fail() function is validated as a String. We can also see the additional code comments inside the function, which are meant to be used by the IntelliSense feature in Visual Studio “Orcas” to check for the correctness of the parameter types.

While the first parameter of _validateParams() represents an array of parameters to be checked, the second parameter is an array of JSON objects describing the validation rules for the array of parameters. Each JSON object contains a validation rule for a parameter. The JSON object is a dictionary of keys and values. The list of keys that can be used is described in the table that follows.

Key Description
name The name of the parameter
type The allowed type for this parameter (ex: String, Array, Function, Sys.Component, etc.)
mayBeNull Boolean value indicating whether this parameter can be passed as null or not
domElement Boolean value indicating whether this parameter is a DOM element or not
integer Boolean value indicating whether this parameter should have an integer value or not
optional Boolean value indicating whether this parameter is optional or not
parameterArray Boolean value indicating whether this parameter should be an Array or not
elementType The allowed type for each element of an array (type must be Array)
elementMayBeNull Boolean value indicating whether an array element could have null or not (type must be Array)
elementDomElement Boolean value indicating whether each element of an array is a DOM element (type must be Array)
elementInteger Boolean value indicating whether each element of an array should have an integer value (type must be Array)

The function returns an error message if the parameters don’t validate and the error is typically thrown like this:

if (e) throw e;

This exception could be caught and the appropriate measures taken programmatically. If the exception is not caught, the error will pop up in the debugging console of the browser.

Microsoft AJAX Library Essentials: Client-side ASP.NET AJAX 1.0 Explained A practical tutorial to enhancing the user experience of your ASP.NET web applications with the final release of the Microsoft AJAX Library
Published: July 2007
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Debugging in Internet Explorer

By default, JavaScript errors are ignored by Internet Explorer. In order to be able to debug in Internet Explorer, you need to: 

  1. Start Internet Explorer and go to Tools | Internet Options | Advanced and clear the Disable script debugging (Internet Explorer)   and Disable script debugging (Other) checkboxes. If you want a pop-up window to be displayed for each error, you need to check the Display a notification about every script error checkbox, as shown:

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

Enabling debugging in Internet Explorer 

  1. Open the solution you want to debug in Visual Studio. 
  2. Execute the project. 
  3. After the Internet Explorer window opens, go back to Visual Studio. 
  4. Open the script explorer by going to Debug | Windows | Script Explorer. The script explorer will list the available script files that can be debugged

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

Using the IE script explorer 

  1. Double-clicking a file in the script explorer will open it in the editor. There you can place breakpoints inside JavaScript files, and the feature will work just as it does when debugging server-side code.

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

Debugging JavaScript code using Visual Studio

Alternatively, if you have Visual Studio, you can attach the debugger to an existing the Internet Explorer process by selecting Debug | Attach to Process, and then choosing the Internet Explorer process (iexplore.exe).

If Internet Explorer is configured for debugging and a script error is encountered in the browser while no debugger is attached, you’re prompted to choose one of the available debuggers: 

  • Visual Studio and Visual Web Developer 2005
  • Microsoft Script Debugger (downloadable from Microsoft’s website)
  • Microsoft Script Editor (ships with Microsoft Office)

For more about debugging web applications in Visual Studio, see these links: 

Web Development Helper

Web Development Helper is a great tool developed by Nikhil Kothari and should be used by every developer who needs the following development features: 

  • HTTP(S) traffic monitoring
  • DOM inspector
  • Script errors and immediate window

Web Development Helper can be downloaded from: 
http://www.nikhilk.net/Project.WebDevHelper.aspx.

For more documentation about this tool, check the following links: 

When it comes to debugging, the tool offers nice features such as showing the trace, catching run-time errors, and showing the full call stack (including script URL, line number, and line of code). The Script Console window allows entering custom script that is executed within the document context.

Internet Explorer Developer Toolbar

Microsoft offers the Internet Explorer Developer toolbar as an option for exploring web pages. It is especially useful for working with the page’s DOM element, CSS styles, cookies, etc. It can be downloaded Microsoft’s web site.After it installs, you open it through Tools | Toolbars | Explorer Bar | IE Developer Toolbar.

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

Internet Explorer Developer Toolbar in action

It is worth mentioning that it doesn’t compete with Nikhil’s tool, but it’s more like a complementary tool as it doesn’t offer JavaScript debugging capabilities or any of the other main features by Web Development Helper.

Other tools

There are other other tools that are worth mentioning and that you should keep an eye on: 

Debugging in Firefox

With the increasing number of users of Firefox, the number of tools used for web development has grown as well.

First of all, Firefox offers an Error Console accessible from the Tools menu, where all the JavaScript errors, warnings, and messages are logged. It also has a built-in script evaluator within the document context, and the DOM Inspector tool, which can be selected at installation time, so we can say that the features packaged into Firefox are quite advanced in comparison with the default features of Internet Explorer. Below figure shows the Error Console signalling a typo in our code.

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

The Error Console in Firefox

Firebug

Firebug (http://www.getfirebug.com/) is a Firefox plugin that offers almost anything a web developer could want from a debugging tool: 

  • Debugging and profiling   script
  • Monitoring HTTP traffic
  • Examining HTTP headers
  • Inspecting and editing the DOM
  • Inspecting and editing CSS
  • Quick search for filtering errors and messages

Delivering such a powerful set of tools in one free product makes Firebug the perfect choice for debugging applications in Firefox. Following figure shows Firebug in action.

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

Debugging using Firebug

Venkman JavaScript Debugger

The Venkman JavaScript debugger (http://www.mozilla.org/projects/venkman/) is a powerful tool for debugging in Mozilla-based browsers (Firefox, Netscape, and Seamonkey).

Like Firebug, Venkman JavaScript Debugger offers debugging and profiling, full call stack, breakpoints, local variables, and watches, all within an interface that is very similar to Visual Studio. See this tool in action in figure below.

Debugging AJAX using Microsoft AJAX Library, Internet Explorer and Mozilla Firefox

Debugging using Venkman JavaScript Debugger

You can find a few excellent online articles for using Venkman JavaScript Debugger: 

Web Developer

Similar to what Firebug and Internet Explorer Developer Toolbar offer, Web Developer plugin (https://addons.mozilla.org/en-US/firefox/addon/60), provides a most comprehensive set of tools for: 

  • DOM information and inspection
  • Outlining different elements (frames, headings, tables, links, etc.)
  • HTTP headers, JavaScript, images information
  • Cookies
  • CSS
  • Page validation (CSS, HTML, WAI, links, Section 508)

All in all, this extension is a very good companion for developing websites. The homepage for this extension and some documentation can be found at http://chrispederick.com/work/webdeveloper/.

Fiddler

When it comes to inspecting and tampering with the HTTP(S) traffic from our computer and the Internet, the most popular tool you can find is Fiddler. This is a freeware tool that allows inspecting all HTTP and HTTPS traffic and tampering it, setting breakpoints, making it an ideal candidate for debugging applications.

It also offers an event-based subscription system offering the capability to easily extend it. Install Fiddler from http://www.fiddler2.com/Fiddler2/. You can find a quick introduction to Fiddler on MSDN, and in the following resources: 

Testing

There are a lot of testing tools available today, but only few of them allow for automatic testing of AJAX applications. Dan Wahlin has put together a list of automated testing and debugging tools on his weblog at http://weblogs.asp.net/dwahlin/ on 2007/02/16/.

In his article we can find some of the tools that we presented so far, and also a comprehensive list of tools that we can use for automatic testing.

A less documented feature of Fiddler is that it can generate Visual Studio WebTest files that can be using in Visual Studio. Why is this necessary? Visual Studio doesn’t record AJAX requests based on XMLHttpRequest, but only full postbacks.

In order to create a Visual Studio WebTest file, you need to follow these steps: 

  • Open Fiddler.
  • Start capturing   the traffic by pressing F12 or by selecting File | Capture Traffic.
  • Browse the AJAX application and Fiddler will register the requests.
  • After having finished the steps save the session by going to File| Save | Session(s) | as Visual Studio Web Test.
  • Now you can import the generated file in Visual Studio and use it for automatic testing.

Summary

Debugging and testing are quite complex tasks and they could be the subject of an entire book. The goal of this article was to introduce the common tools and techniques for debugging and also to offer a glimpse into the world of automated testing tools for AJAX applications. With the continuous growth of AJAX applications, the need for more complex tools will generate new products so that it’s worth keeping an eye on what’s new in this domain.

Microsoft AJAX Library Essentials: Client-side ASP.NET AJAX 1.0 Explained A practical tutorial to enhancing the user experience of your ASP.NET web applications with the final release of the Microsoft AJAX Library
Published: July 2007
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Bogdan Brinzarea

Bogdan has a strong background in Computer Science holding a Master and Bachelor Degree at the Automatic Control and Computers Faculty of the Politehnica University of Bucharest, Romania and also an Auditor diploma at the Computer Science department at Ecole Polytechnique, Paris, France.

His main interests cover a wide area from embedded programming, distributed and mobile computing and new web technologies. Currently, he is employed as an Alternative Channels Specialist at Banca Romaneasca, Member of National Bank of Greece where he is responsible for the Internet Banking project and coordinates other projects related to security applications and new technologies to be implemented in the banking area.

Cristian Darie

Cristian Darie is a software engineer with experience in a wide range of modern technologies, and the author of numerous books, including his popular AJAX and PHP tutorial by Packt, his ASP.NET E-Commerce tutorial, by APress and his forthcoming SEO tutorial for PHP developers by Wrox Press. Cristian is studying distributed application architectures for his PhD, and is getting involved with various commercial and research projects. When not planning to buy Google, he enjoys his bit of social life. If you want to say "hi", you can reach Cristian through his personal website at http://www.cristiandarie.ro.

Books From Packt

Entity Framework Tutorial
Entity Framework Tutorial

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Object-Oriented JavaScript
Object-Oriented JavaScript

ASP.NET 3.5 Social Networking
ASP.NET 3.5 Social Networking

VSTO 3.0 for Office 2007 Programming
VSTO 3.0 for Office 2007 Programming

Django 1.0 Website Development
Django 1.0 Website Development

Implementing Microsoft Dynamics NAV 2009
Implementing Microsoft Dynamics NAV 2009

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

 


 

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
h
2
5
B
M
A
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software