In a couple of days (this Thursday, January 22nd) I’ll be heading up to Detroit, Michigan for the MSDN Developer Conference as it makes its way through the heartland. But not only will I be attending, my colleague Jeff Hunsaker and I have the great pleasure of speaking at the MDC! We will be introducing jQuery and showing how ASP.NET AJAX and jQuery can work together. Many of you have of course heard the not-so-recent news (a few months on the internet is like a lifetime) that Microsoft will be ‘adopting‘ jQuery which will ship with future versions of Visual Studio. So if you live anywhere near Detroit and would like to see how jQuery fits into ASP.NET, (or are interested in any of the other cool topics and presentations you might have missed from the PDC) come check out the MDC! Also be sure to check out Jeff’s blog post on our presentation. He’s included loads of related links and info.
I have been sitting on my latest jQuery plugin for some time now. Although I realize that the code is not yet of production quality and there are certainly bugs and features that remain to be addressed, I’ve decided that I should at least release this plugin to the wild. At the very least, I would love some feedback on it and possibly new features to be added. “So let’s see it!” you ask?
jQuery.Firebug is a jQuery plugin that simply exposes the Firebug Console API to the jQuery object. That’s about it. Under the covers, it bridges some functionality between Firebug and Firebug Lite and has a host of other small feature. But all in all, it simply adds the Console API methods directly to the jQuery object.
The goal of this plugin is to allow inspection of your jQuery selections while in the middle of a chain. For those of you who have ever had a jQuery chain like:
$(".elements").parents("div") .find(".new").show().end() .find(".old").hide();
and you load up the page and it doesn’t work. How do you begin debugging? You open up Firebug but are unable to easily ‘step through’ the jQuery chain. Inevitably, you have to break up each selector, assign it to a temporary variable solely to call console.log(temp) on your selection. Enter jQuery.Firebug:
$(".elements").log() .parents("div").log() .find(".new").log() .show().end().log() .find(".old").log() .hide();
Each log method returns the same selection that was passed to it, so you can simply continue your chain as if it weren’t even there. Every Firebug method (as of Firebug 1.2) is supported so you can call
There are a few additional features that I will address later as the code begins to settle down. For now, the source and documentation can be found in Subversion at svn.jasonkarns.com/jquery/firebug. There is much work to be done on the plugin as well as on the documentation. Until then, let me hear any feedback you may have.
See you ’round.