The Firebug plugin for Firefox is indispensable to debug and examine HTML pages. The Firebug Console executes jQuery expressions, too. It shows directly the effects of all Javascript and jQuery functions. The effects are immediately visible on the page, but the results it returns on the console are often less useful, because one can not see what elements are returned. If you want to see what’s happening, one possibility is to log parameters using the method console.log in your Javascript code. Or you can use the following little script to debug jQuery expressions. It allows to view simple log messages in Firebug, and is based on this nice little plugin from Dominic Mitchell, where you can click on the object hyperlinks. I extended it a bit to list a number of basic attributes (tag-names, classes and ids) for sets of elements directly:
jQuery.fn.log = function (msg) {
msg = msg || "log";
console.log("%s: %o", msg, this);
this.each(function(n){
id = this.id ? "ID: "+this.id : ""
console.log("%d: %s.%s %s",n,this.tagName,this.className,id)
})
return this;
};
To use it just include it in your page and insert a call to .log() somewhere in the chain to see what’s happening:
$(".css_class").log();
4 Lines of Code 