Debugging ASP .NET AJAX with Firebug and Web Development Helper

Published Monday, August 04, 2008 9:34 PM

Bugs bite. With programming, bugs break your application; sour the relationship with the users. So by all means, debug!

 

With web development goes more sophisticated and complicated, so does debugging tools.

 

For a very long time, we were pretty hopeless debugging JavaScript, except sprinkling our little “alert” genies here, there and everywhere.

 

Now to debug JavaScript or AJAX applications, we have four tools:

  1. FireBug for FireFox
  2. Web Development Helper With Internet Explorer
  3. Visual Studio (2005 and above) Native Debugger
  4. Fiddler for monitoring HTTP traffic

FireBug for FireFox

 

The greatest of all the debugging, code inspection tools is the mighty FireBug with a funny name and funnier look. Doesn’t it look a cockroach?


On the web, there are two definitions associated with FireBug:

 

Meaning #1: a criminal who illegally sets fire to property

 

Meaning #2: a true bug: brightly colored bug that can exude a stain

 

However, that was before FireBug. Now the FireBug for Fire Fox has a luminous outlook

 

 

Console inspection with Firebug:

 

With ASP .net AJAX, you can send trace message to the browser by coding: Sys.Debug.Trace,

           

            Sys.Debug.Trace(“A special message for my dear Fire Bug”)

 

CSS inspection with FireBug:

 

You can view the page stylesheet loaded by the browser. The coolest thing is that you can modify the stylesheet on the fly and see it work its magic.

 

Script inspection with FireBug:

 

With ASP .NET AJAX, you inevitably invited a truck load of JavaScript to your page. Some of you own creation, mostly, not. With FireBug, you can click on any of the scripts load for a closer look. It is easy to spot errors with your bug, because it is written in Red, 10 errors. To debug, you can set a breakpoint by clicking the left zone near the line numbers, you can use the watch window to examine all the values of your script variables.

 

DOM  inspection with FireBug:

 

You can view the big interminable, unfathomable DOM tree with your little bug too. As with CSS, you can change any DOM element’s property in the FireBug window and see it takes effect instantly.

 

HTTP traffic inspection with FireBug:

 

Want to know the coming and going of the web requests, traffic congestions, and bottleneck? Click the NET tab. You got it.

 

In short, FireBug is a gem of bug for debugging. All AJAX developers can benefit from it enormously.

 

Visual Studio (2005 and above) JavaScript Debugger

 

To start with, you have to turn on script debugging from IE toolbar and uncheck the option: disable script debugging. Then to debug a segment of code, you add a statement with the debugger keyword.

           

            debugger;

 

as in the following:

 

 

Web Development Helper with Internet Explorer

 

Web Development Helper can be downloaded at: http://projects.nikhilk.net/WebDevHelper/.

 

After installation you can find it in the Tools menu in IE.

 

 

 

It has a deep well of information for you to inspect, page information, DOM structure, HTTP traffic, JavaScript, ASP .net inner mechanism (viewstate, trace information, cache, etc.).

 

kick it on DotNetKicks.com

by xxxd
Filed under: ,

Comments

# DotNetKicks.com said on Monday, August 04, 2008 2:03 PM

You've been kicked (a good thing) - Trackback from DotNetKicks.com

This site

This Blog

Syndication

Sponsors

  • MaximumASP