I’ve been having a lovely day at work, fiddling with jQuery. I started to come up with some really gnarly selector chains though, and I wondered what nodes they were actually addressing.
So, I wrote a tiny jQuery extension that logs the current jQuery selection to the firebug console.
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.
$(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.
Jabbering Giraffe 
25 replies on “jQuery Logging”
genius!
Clever, it’ll come in very handy.
I’ll repeat Mark: genius!
Brilliant ! Thanks for sharing it
Cool!
Awesome!
I would just add:
if( console )
inside the function. for cleanliness reasons…i might be testing on different browsers at the same time. 😉
Great Resource, Thank you for creating this.
I agree on the if( console ) issue, I would also recommend a handy grep script to remove the .log commands from the script before production.
you could always include firebug lite in your pages and then no need for unnecessary if statements – the script is cached after first time
cool idea!
Great, thank you!
Very cool! This will come in handy for sure.
any demo?
any demo available?
Sounds good, a demo would help
Looks like you need a Captcha 😉
Hi,
That is a great jQuery plugin, which is also working with Companion.JS (http://www.my-debugbar.com/wiki/CompanionJS/HomePage), so you can also log under IE !
No info about node yet 😦 but maybe in a future release.
JFR
http://www.debugbar.com
Hello Dominic,
I tried to improve the plugin with some conditionals, take a look at it 🙂
http://pastemonkey.org/paste/471a49a0-fc54-4ca8-b8e7-5411404fdb0d
cool! thanks for sharing
Simple, yet powerful =D
Ok, so where do we paste this script?
@Anonymous: It can into any piece of JavaScript. It does have to come after loading jQuery but before you actually call the
.log()though.cool ! thanks for sharing
Btw window.console.log() works in WebKit browsers too (Safari and Chrome)
..and of course, thanks for sharing
if (window.console) window.console.log("text");@Marko: Thanks — I did know that, but I’d forgotten. I seem to recall that there are some differences between firebug’s console & Safari though. In particular, the format strings that I use in the post above won’t work in Safari.
Of course, it’s easy to replace with string concatenation, and you won’t get the magic linkage you do with firebug. This makes it a bit less useful, I feel.
someone please post a demo here?
Jquery undefined so just copy pasting this function into the script is not all that is required apparently
You’ll need to load in jQuery first. Have a look at the tutorial if you’re not sure.