Debug ASP.Net AJAX application using Fiddler

Developing AJAX application can be fun, but I can be quite annoying when it come to debugging. I was developing a small application using CascadingDropDown Control from AJAX Control Toolkit. It is my first time using this control and I’m not familiar with the Web Services parameter list. When the exception raise up by ASP.Net, it only show me [Method error 500]. It is not informative for me to debug at all.

In order to find out the details information, you will need a web debugger such as Fiddler or FireBug (for Firefox user)

The second issue raise up is Fiddler don’t capture Localhost’s web sessions. However there is a workaround to fix it.

In order to make Fiddler capture localhost’s web session, I need to customize the rules.

Go to ToolsCustomize Rules

It should open up CustomRules.js. Navigate to  OnBeforeRequest(oSession: Session) function. We need to include the following line. The port specify below need to match the ASP.Net Application port. I recommending to use the static port in your ASP.Net application rather than dynamic ports.

if (oSession.HostnameIs("MYAPP"))

{ oSession.host = "127.0.0.1:3859"; }

The function should look like this.

When running the application, rather than using the old address (such as http://localhost:3859/xxxxx), we are going to replace it with http://myapp/xxxxx)

When open the Fiddler, you should able to capture the localhost web session which is 127.0.0.1

Fiddler will highlight to us the problem in Red color. Then next thing need to do is drag the session into the right handside window. The Request Builder should have the details information of the session such as the parameter been pass by the CascadingDropDown control.

Click on the Session Inspector tab and TextView tab (at the lower window). The details error message will appear on what is the error of the session.

The Fiddler tools is essential for AJAX debugging.

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s