Debugging JavaScript used to be stupidly difficult. Ever littered your script with alert() statements in a vain attempt to figure out what the hell is going on? I know I have. One thing the ASP.NET Ajax framework includes to help ease debugging is a very handy class called Sys.Debug, which has got exactly what you'd expect it to have - methods for tracing.

Now, the cool thing is how this works together with FireFox and the FireBug plugin - any Sys.Debug.trace() or Sys.Debug.traceDump() calls gets written directly to the console. For example, the lines:

Sys.Debug.trace("Calculating bounds...");
var bounds = Sys.UI.DomElement.getBounds(element);
Sys.Debug.traceDump(bounds, "Bounds");

shows up like this:

Neat!

The FireBug plugin also supports breakpoints and lots of other great stuff. Maybe I'll blog about some of its features in a future post - it is definitively one of my favorite tools when working with client-side code. And I know, I know - Visual Studio 2008 gives us a lot of this stuff integrated into the development IDE - but that only works with Internet Explorer (at least for now).