jQuery Logging

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.

25 thoughts on “jQuery Logging”

  1. iansane

    someone please post a demo here?
    Jquery undefined so just copy pasting this function into the script is not all that is required apparently

  2. Marko Simic

    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");
    1. dom

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

  4. dom

    @Anonymous: It can into any piece of JavaScript. It does have to come after loading jQuery but before you actually call the .log() though.

  16. Cdx/tcodex@gmail.com

    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!

  17. http://www.ajaxbestiary.com

    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.

  18. André Luís

    Awesome!

    I would just add:

    if( console )

    inside the function. for cleanliness reasons…i might be testing on different browsers at the same time. ;)

Comments are closed.