When working with a complex environment such as the ones being created by most (if not all) AJAX applications nowadays, one needs a set of tools in his/her arsenal to overcome any obstacle.

FireBug, a web development and debugging extension for Firefox is one such tool that you must keep close.

As it site says:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

If you are not already using it go quickly, download and start working with it.

There are two major benefits of using FireBug when developing ASP.NET and AJAX.NET application:

  1. HTML Inspection – FireBug allows you during runtime and on any site, to inspect how the HTML looks. This includes direct references to the various stylesheets being used an element (including the casecading parts and from which .css file they came from). It also includes the ability to visualize the unvisible styling elements of padding and visualize so that you’ll visually see where the styling problem is as well as change the various style settings on the fly and immediately see the results.
  2. JavaScript Debugger – The JavaScript debugger and expression evaluator in FireBug are a lot easier to use and are a lot more powerful than the ones supplied by Internet Explorer combined with Visual Studio (or what is actually Active Scripting Debugging from the happy old COM days 🙂 ). Visual Studio is a very heavy debugger and sometimes lacks the ability to debug even sites and JavaScript that you just want to know how they work, without having the actual code of the site.

In the early days of AJAX.NET (or should I say in the “Atlas” days), FireBug was my main weapon of understanding the AJAX.NET framework and stepping line by line to understand how to use and work with AJAX.NET.

It’s an invaluable tool in your arsenal and with the usage of AJAX.NET increasing on a daily basis you just have to have it.