Friday, October 19th, 2007
jQuery Logging
Dominic Mitchell has created a mini jQuery logging plugin that ties Firebug to the call chain.
This means that if you are debugging something you can quickly add a .log("....") in the chain:
JAVASCRIPT:
-
-
jQuery.fn.log = function (msg) {
-
console.log("%s: %o", msg, this);
-
return this;
-
};
-
Now, I can just stuff a call to .log() in the middle of what I’m doing to see what I’m currently addressing. e.g.
JAVASCRIPT:
The nice thing about logging to firebug is that each node becomes clickable in the console, so you can immediately see the context.
3.1 rating from 94 votes
Thanks for the link! Really, it was more just a way of of seeing how easy it was to write a jQuery plugin…
This is very clever. I like it.
This is one of those bits of code where you smack yourself on the head and say, “Why didn’t I think of that?”
Short, sweet, and very useful.
And dare I admit that all the time I’ve been using Firebug, I didn’t realize that console.log took a format string? I know, it’s right there in the docs, but did I ever read them? :-)
Really, where is the footnote saying that this could be done in JavaScript, without jQuery, or any other library for that matter?
function test(){
console.log(’—’);
return this;
}
function log(msg){
console.log(msg);
return this;
}
test().log(’Hey, I am doing this with jQuery!’).test();
I agree with Michael, this is definitely a smack-head snippet, thanks Dominic.
The great thing is that it helps a lot to avoid chaining-breakups for logging purposes. Eg. something like this would be much simpler:
var toLog = $(”.selectotor”);
console.log(toLog);
toLog.doSomething();
Just doing $(”.selector).log().doSomething() is that much simpler. And you can add the check if the console object exists to the log plugin implementation.
Great plugin, and it is working with Companion.JS so you can also log in IE with it ;-)
JFR
http://www.debugbar.com
Hey guys,
I agree with Michael, this is such a omg-why-didnt-i-think-of-it-earlier plugin! Take a look at some little enhancements I tried.
http://pastemonkey.org/paste/471a49a0-fc54-4ca8-b8e7-5411404fdb0d
EmEhRKay, in the code you posted:
function test(){
console.log(’—’);
return this;
}
function log(msg){
console.log(msg);
return this;
}
test().log(’Hey, I am doing this with jQuery!’).test();
if the code is running at global scope, “this” is the global object, i.e. the window. So there’s no reason to do any chaining in the first place. A bare function call is the same as calling a window method, so the code is equivalent to:
function test(){
console.log(’—’);
}
function log(msg){
console.log(msg);
}
test();
log(’Hey, I am doing this with jQuery!’);
test();
But your point is well taken that you could add a .log method to any object. For example, here is a log method for strings:
String.prototype.log = function( format ) {
window.console && console.log(
format || 'String length %i, value "%s"',
this.length, this );
return ''+this;
};
'just testing'.log().slice(5,9).log();
If you paste that into the Firebug console (in multiline mode) you will see:
String length 12, value "just testing"
String length 4, value "test"
"test"
Note the use of “return ”+this;” instead of just “return this;” – that causes the function to return a primitive string instead of a string object, which gives less surprising results at least in this test case. (Try changing it to “return this;” and see what Firebug displays.)
Michael, you are right. And for some reason, this morning, my first example crossed my mind and I did see that it was wrong.
This may be an easier example while keeping the scope within the namespace:
var test = {
t: function(){
console.log(’–’);
return this;
},
log: function(m){
console.log(m);
return this;
}
};
test.t().log(’without a library’).t();
I wrote a version for YUI. The article is in french, but the code should be readable :
http://www.codingstyle.fr/2007/10/22/rediriger-la-console-de-yahoo-dans-firebug/
I like this a lot. Great job!
Carrie, Web Developer currently working on the Cholesterol Online Pharmacies project.
Great plug in.
I love jquery to use dynamic website, and this tool help the developer to maintain their query. Cool
- yuhirocks from herbal viagra
Jquery is very helpful and handful project, thnx to share it with us
oldtimerock from convert knots to mph
Actually I just wrote a simple plugin that may help someone. It’s here.
It seems more complicated than I have thought.