Debugging ASP.NET AJAX Applications potx

While many developers are accustomed to using Visual Studio .NET or Web Developer Express to debug ASP.NET applications that use VB.NET or C# code, some aren’t aware that it’s also extre

Debugging ASP.NET AJAX Applications Dan Wahlin

The ability to debug code is a skill that every developer should have in their arsenal regardless of the technology they’re using It goes without saying that understanding the different debugging options that are available can save a tremendous amount of time on a project and perhaps even

a few headaches While many developers are accustomed to using Visual Studio NET or Web Developer Express to debug ASP.NET applications that use VB.NET or C# code, some aren’t aware that it’s also extremely useful for debugging client-side code such as JavaScript The same type of techniques used to debug NET applications can also be applied to AJAX-enabled applications and more specifically ASP.NET AJAX applications

In this article you’ll see how Visual Studio 2008 Beta 2 and several other tools can be used to debug ASP.NET AJAX applications to quickly locate bugs and other issues This discussion will include information about enabling Internet Explorer 6 or higher for debugging, using Visual Studio 2008 and the Script Explorer to step through code as well as using other free tools such as Web Development Helper You’ll also learn how to debug ASP.NET AJAX applications in Firefox using

an extension named Firebug which lets you step through JavaScript code directly in the browser without any other tools Finally, you’ll be introduced to classes in the ASP.NET AJAX Library that can help with various debugging tasks such as tracing and code assertion statements

Before you try to debug pages viewed in Internet Explorer there are a few basic steps you’ll need to perform to enable it for debugging Let’s take a look at some basic setup requirements that need to be performed to get started

Configuring Internet Explorer for Debugging

Most people aren’t interested in seeing JavaScript issues encountered on a Website viewed with Internet Explorer In fact, the average user wouldn’t even know what to do if they saw an error message As a result, debugging options are turned off by default in the browser However, it’s very straightforward to turn debugging on and put it to use as you develop new AJAX

applications

To enable debugging functionality, go to Tools  Internet Options on the Internet Explorer menu and select the Advanced tab Within the Browsing section ensure that the following items are unchecked:

Disable script debugging (Internet Explorer)

Disable script debugging (Other)

Although not required, if you’re trying to debug an application you’ll probably want any JavaScript errors in the page to be immediately visible and obvious You can force all errors to be shown with a message box by checking the "Display a notification about every script error" checkbox While this is a great option to turn on while you’re developing an application, it can quickly become annoying if you’re just perusing other Websites since your chances of encountering JavaScript errors are pretty good

Figure 1 shows what the Internet Explorer advanced dialog should look after it has been properly configured for debugging

Figure 1 Configuring Internet Explorer for debugging

Once debugging has been turned on, you’ll see a new menu item appear in the View menu named Script Debugger It has two options available including Open and Break at Next Statement When Open is selected you’ll be prompted to debug the page in Visual Studio 2008 Beta 2 (note that Visual Web Developer Express can also be used for debugging) If Visual Studio NET is currently running you can choose to use that instance or to create a new instance When Break

at Next Statement is selected you’ll be prompted to debug the page when JavaScript code is executed If JavaScript code executes in the onLoad event of the page you can refresh the page

to trigger a debug session If JavaScript code is run after a button is clicked then the debugger will run immediately after the button is clicked

Note: if you are running on Windows Vista with User Access Control (UAC) enabled, and you have Visual Studio 2008 set to run as an administrator, Visual Studio will fail to attach to the process when you are prompted to attach To work around this issue, start Visual Studio first, and use that instance to debug

Although the next section will demonstrate how to debug an ASP.NET AJAX page directly from within Visual Studio 2008, using the Internet Explorer Script Debugger option is useful when a page is already open and you’d like to more fully inspect it

Debugging with Visual Studio 2008 Beta 2

Visual Studio 2008 Beta 2 provides debugging functionality that developers around the world rely on everyday to debug NET applications The built-in debugger allows you to step through code, view object data, watch for specific variables, monitor the call stack plus much more In

addition to debugging VB.NET or C# code, the debugger is also helpful for debugging ASP.NET AJAX applications and will allow you to step through JavaScript code line by line The details that follow focus on techniques that can be used to debug client-side script files rather than providing a discourse on the overall process of debugging applications using Visual Studio 2008 The process of debugging a page in Visual Studio 2008 can be started in several different ways First, you can use the Internet Explorer Script Debugger option mentioned in the previous section This works well when a page is already loaded in the browser and you’d like to start debugging

it Alternatively, you can right-click on an aspx page in the Solution Explorer and select Set As Start Page from the menu If you’re accustomed to debugging ASP.NET pages then you’ve probably done this before Once F5 is pressed the page can be debugged However, while you can generally set a breakpoint anywhere you’d like in VB.NET or C# code, that’s not always the case with JavaScript as you'll see next

Embedded Versus External Scripts

The Visual Studio 2008 debugger treats JavaScript embedded in a page different than external JavaScript files With external script files, you can open the file and set a breakpoint on any line you choose Breakpoints can be set by clicking in the grey tray area to the left of the code editor window When JavaScript is embedded directly into a page using the <script> tag, setting a breakpoint by clicking in the grey tray area isn’t an option Attempts to set a breakpoint on a line of embedded script will result in a warning that states "This is not a valid location for a breakpoint"

You can get around this issue by moving the code into an external js file and referencing it using the src attribute of the <script> tag:

<script type="text/javascript" src="Scripts/YourScript.js"></script>

What if moving the code into an external file isn’t an option or requires more work than it's worth? While you can’t set a breakpoint using the editor, you can add the debugger statement directly into the code where you’d like to start debugging You can also use the Sys.Debug class

available in the ASP.NET AJAX library to force debugging to start You’ll learn more about the Sys.Debug class later in this article

An example of using the debugger keyword is shown in Listing 1 This example forces the debugger

to break right before a call to an update function is made

Listing 1 Using the debugger keyword to force the Visual Studio NET debugger to break

function BuildPerson()

{

var person =

{

FirstName: $get("txtFirstName").value,

LastName: $get("txtLastName").value,

Address:

{

Street: $get("txtStreet").value,

City: $get("txtCity").value,

State: $get("txtState").value

}

};

debugger;

UpdatePerson(person);

}

Once the debugger statement is hit you will be prompted to debug the page using Visual Studio NET and can begin stepping through the code While doing this you may encounter an issue with accessing ASP.NET AJAX library script files used in the page so let's take a look at using Visual Studio NET's Script Explorer

Using Visual Studio NET Windows to Debug

Once a debug session is started and you begin walking through code using the default F11 key, you may encounter the error dialog shown in see Figure 2 unless all script files used in the page are open and available for debugging

Figure 2 Error dialog shown when no source code is available for debugging

This dialog is shown because Visual Studio NET isn't sure how to get to the source code of some of the scripts referenced by the page While this can be quite frustrating at first, there's a simple fix Once you have started a debug session and hit a breakpoint, go to the Debug  Windows

 Script Explorer window on the Visual Studio 2008 menu or use the Ctrl+Alt+N hotkey

Note: If you can’t see the Script Explorer menu listed, go to Tools  Customize  Commands on the Visual Studio NET menu Locate the Debug entry in the Categories section and click it to show all available menu entries In the Commands list, scroll down to Script Explorer and then drag it

up onto the Debug  Windows menu in mentioned earlier Doing this will make the Script Explorer menu entry available each time you run Visual Studio NET

The Script Explorer can be used to view all scripts used in a page and open them in the code editor Once the Script Explorer is open, double-click on the aspx page currently being debugged to open it in the code editor window Perform the same action for all of the other scripts shown in the Script Explorer Once all of the scripts are open in the code window you can press F11 (and use the other debug hotkeys) to step through your code Figure 3 shows an example of the Script Explorer It lists the current file being debugged (Demo.aspx) as well as two custom scripts and two scripts dynamically injected into the page by the ASP.NET AJAX ScriptManager

Figure 3 The Script Explorer provides easy access to scripts used in a page

Several others windows can also be used to provide useful information as you step through code in

a page For example, you can use the Locals window to see the values of different variables used in the page, the Immediate window to evaluate specific variables or conditions and view the output You can also use the Output window to view trace statements written out using the Sys.Debug.trace function (which will be covered later in this article) or Internet Explorer’s Debug.writeln function

As you step through code using the debugger you can mouse over variables in the code to view the value that they are assigned However, the script debugger occasionally won’t show anything as you mouse over a given JavaScript variable To see the value, highlight the statement or

variable you’re trying to see in the code editor window and then mouse over it Although this technique doesn’t work in every situation, many times you will be able to see the value without having to look in a different debug window such as the Locals window

A video tutorial demonstrating some of the features discussed here can be viewed at

http://www.xmlforasp.net

Debugging With Web Development Helper

Although Visual Studio 2008 (and Visual Web Developer Express 2008) are very capable debugging tools, there are additional options that can be used as well which are more light-weight One of the latest tools to be released is the Web Development Helper Microsoft’s Nikhil Kothari (one

of the key ASP.NET AJAX architects at Microsoft) wrote this excellent tool which can perform

many different tasks from simple debugging to viewing HTTP request and response messages Web Development Helper can be downloaded at

http://projects.nikhilk.net/Projects/WebDevHelper.aspx

Web Development helper can be used directly inside of Internet Explorer which makes it convenient

to use It’s started by selecting Tools  Web Development Helper from the Internet Explorer menu This will open the tool in the bottom portion of the browser which is nice since you don’t have to leave the browser to perform several tasks such as HTTP request and response message logging Figure 4 shows what Web Development Helper looks like in action

Figure 4 Web Development Helper

Web Development helper isn’t a tool you’ll use to step through code line by line as with Visual

Studio 2008 However, it can be used to view trace output, easily evaluate variables in a script

or explore data is inside of a JSON object It’s also very useful for viewing data that is passed to and from an ASP.NET AJAX page and a server

Once Web Development Helper is open in Internet Explorer, script debugging must be enabled by selecting Script  Enable Script Debugging from the Web Development helper menu as shown earlier in Figure 4 This enables the tool to intercept errors that occur as a page is run It also allows easy access to trace messages that are output in the page To view trace information or execute script commands to test different functions within a page, select Script  Show Script Console from the Web Development Helper menu This provides access to a command window and a simple immediate window

Viewing Trace Messages and JSON Object Data

The immediate window can be used to execute script commands or even load or save scripts that are used to test different functions in a page The command window displays trace or debug

messages written out by the page being viewed Listing 2 shows how to write a trace message using Internet Explorer’s Debug.writeln function

Listing 2 Writing out a client-side trace message using the Debug class

function BuildPerson()

{

var person =

{

FirstName: $get("txtFirstName").value,

LastName: $get("txtLastName").value,

Address:

{

Street: $get("txtStreet").value,

City: $get("txtCity").value,

State: $get("txtState").value

}

};

Debug.writeln("Person name: " + person.LastName);

UpdatePerson(person);

}

If the LastName property contains a value of Doe, Web Development Helper will display the message "Person name: Doe" in the script console’s command window (assuming that debugging has been enabled) Web Development Helper also adds a top-level debugService object into pages that can be used to write out trace information or view the content of JSON objects Listing 3 shows an example of using the debugService class’s trace function

Listing 3 Using Web Development Helper’s debugService class to write a trace message

function BuildPerson()

{

var person =

{

FirstName: $get("txtFirstName").value,

LastName: $get("txtLastName").value,

Address:

{

Street: $get("txtStreet").value,

City: $get("txtCity").value,

State: $get("txtState").value

}

};

if (window.debugService)

{

window.debugService.trace("Person name: " +

person.LastName);

}

UpdatePerson(person);

}

A nice feature of the debugService class is that it will work even if debugging isn’t enabled in

Internet Explorer making it easy to always access trace data when Web Development Helper is running When the tool isn’t being used to debug a page, trace statements will be ignored since the call to window.debugService will return false

The debugService class also allows JSON object data to be viewed using Web Development Helper’s inspector window Listing 4 creates a simple JSON object containing person data Once the object is created, a call is made to the debugService class’s inspect function to allow the JSON object to be visually inspected

Listing 4 Using the debugService.inspect function to view JSON object data

function BuildPerson()

{

var person =

{

FirstName: $get("txtFirstName").value,

LastName: $get("txtLastName").value,

Address:

{

Street: $get("txtStreet").value,

City: $get("txtCity").value,

State: $get("txtState").value

}

};

if (window.debugService)

{

window.debugService.inspect("Person Object",person);

}

UpdatePerson(person);

}

Calling the GetPerson() function in the page or through the immediate window will result in the Object Inspector dialog window appearing as shown in Figure 5 Properties within the object can be changed dynamically by highlighting them, changing the value shown in the Value text box and then clicking the Update link Using the Object Inspector makes it straightforward to view JSON object data and experiment with applying different values to properties

Debugging Errors

In addition to allowing trace data and JSON objects to be displayed, Web Development helper can also aid in debugging errors in a page If an error is encountered, you will be prompted to continue to the next line of code or debug the script (see Figure 6) The Script Error dialog window shows the complete call stack as well as line numbers so you can easily identify where issues are within a script

Figure 5 Using the Object Inspector window to view a JSON object

Selecting the debug option allows you to execute script statements directly in Web Development Helper’s immediate window to view the value of variables, write out JSON objects, plus more If the same action that triggered the error is performed again and Visual Studio 2008 is available

on the machine, you will be prompted to start a debug session so that you can step through the code line by line as discussed in the previous section

Figure 6 Web Development Helper’s Script Error Dialog Inspecting Request and Response Messages

While debugging ASP.NET AJAX pages it is often useful to see request and response messages sent between a page and server Viewing the content within messages allows you to see if the

proper data is being passed as well as the size of the messages Web Development Helper provides an excellent HTTP message logger feature that makes it easy to view data as raw text

or in a more readable format

To view ASP.NET AJAX request and response messages, the HTTP logger must be enabled by

selecting HTTP  Enable HTTP Logging from the Web Development Helper menu Once

enabled, all messages sent from the current page can be viewed in the HTTP log viewer which can be accessed by selecting HTTP  Show HTTP Logs

Although viewing the raw text sent in each request/response message is certainly useful (and an option in Web Development Helper), it is often easier to view message data in a more graphical format Once HTTP logging has been enabled and messages have been logged, message data can be viewed by double-clicking on the message in the HTTP log viewer Doing this allows you

to view all headers associated with a message as well as the actual message content Figure 7 shows an example of a request message and response message viewed in the HTTP Log Viewer window

Figure 7 Using the HTTP Log Viewer to view request and response message data

The HTTP Log Viewer automatically parses JSON objects and displays them using a tree view making

it quick and easy to view the object’s property data When an UpdatePanel is being used in an ASP.NET AJAX page, the viewer breaks out each portion of the message into individual parts as shown in Figure 8 This is a great feature that makes it much easier to see and understand what

is in the message as compared to viewing the raw message data