AJAX_tutorial06_Debugging_MS_Ajax_Applications_cs.pdf

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

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

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.

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,

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

src attribute of the <script> tag:

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.

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

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.