Friday, October 19th, 2007

jQuery Logging

Category: jQuery, Library, Plugins, Tip

<>p>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
< view plain text >
  1. jQuery.fn.log = function (msg) {
  2.       console.log("%s: %o", msg, this);
  3.       return this;
  4.   };

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
< view plain text >
  1. $(root).find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");

The nice thing about logging to firebug is that each node becomes clickable in the console, so you can immediately see the context.

Related Content:

11 Comments »

Comments feed TrackBack URI

Thanks for the link! Really, it was more just a way of of seeing how easy it was to write a jQuery plugin…

Comment by Dominic Mitchell — October 19, 2007

This is very clever. I like it.

Comment by Glen Lipka — October 19, 2007

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? :-)

Comment by Michael Geary — October 19, 2007

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();

Comment by EmEhRKay — October 19, 2007

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.

Comment by Jörn Zaefferer — October 20, 2007

Great plugin, and it is working with Companion.JS so you can also log in IE with it ;-)

JFR
http://www.debugbar.com

Comment by JFR — October 20, 2007

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

Comment by Joan Piedra — October 20, 2007

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.)

Comment by Michael Geary — October 20, 2007

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();

Comment by EmEhRKay — October 21, 2007

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/

Comment by Christophe Buguet — October 22, 2007

Hi! I’ve done this http://www.jquerylog.com which kinda resembles the logging, but I gess it’s easier to use. I got inspired by Dominic’s mini plugin and decided to do a more complete one.Check it out and comment it :)

Comment by fmsf — December 27, 2011

Leave a comment

You must be logged in to post a comment.