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 Comments to jQuery Logging

  1. iansane says:

    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 says:

    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");
    • dom says:

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

  3. saurabh shah says:

    cool ! thanks for sharing

  4. dom says:

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

  5. Anonymous says:

    Ok, so where do we paste this script?

  6. Simple, yet powerful =D

  7. insic says:

    cool! thanks for sharing

  8. Joan Piedra says:

    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

  9. JFR says:

    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

  10. treo says:

    Looks like you need a Captcha 😉

  11. Sounds good, a demo would help

  12. ress says:

    any demo available?

  13. Ebyte.com says:

    Very cool! This will come in handy for sure.

  14. Leandro says:

    Great, thank you!

  15. Cdx/tcodex@gmail.com says:

    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!

  16. http://www.ajaxbestiary.com says:

    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.

  17. André Luís says:

    Awesome!

    I would just add:

    if( console )

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

  18. Maxime says:

    Brilliant ! Thanks for sharing it

  19. Nikola says:

    I’ll repeat Mark: genius!

  20. Clever, it’ll come in very handy.

  21. Mark Fowler says:

    genius!