Home > Uncategorized > jQuery Logging

jQuery Logging

September 26th, 2007

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.

dom Uncategorized ,

  1. Mark Fowler
    September 27th, 2007 at 08:54 | #1

    genius!

  2. September 28th, 2007 at 22:10 | #2

    Clever, it’ll come in very handy.

  3. October 19th, 2007 at 15:26 | #3

    I’ll repeat Mark: genius!

  4. October 19th, 2007 at 16:44 | #4

    Brilliant ! Thanks for sharing it

  5. October 19th, 2007 at 17:53 | #5

    Cool!

  6. October 19th, 2007 at 18:08 | #6

    Awesome!

    I would just add:

    if( console )

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

  7. http://www.ajaxbestiary.com
    October 19th, 2007 at 19:24 | #7

    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.

  8. Cdx/tcodex@gmail.com
    October 19th, 2007 at 19:55 | #8

    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!

  9. October 19th, 2007 at 22:33 | #9

    Great, thank you!

  10. October 19th, 2007 at 23:17 | #10

    Very cool! This will come in handy for sure.

  11. October 20th, 2007 at 02:45 | #11

    any demo?

  12. October 20th, 2007 at 02:46 | #12

    any demo available?

  13. October 20th, 2007 at 06:19 | #13

    Sounds good, a demo would help

  14. treo
    October 20th, 2007 at 13:45 | #14

    Looks like you need a Captcha ;)

  15. October 20th, 2007 at 16:26 | #15

    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

  16. October 20th, 2007 at 19:33 | #16

    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

  17. September 2nd, 2008 at 16:08 | #17

    cool! thanks for sharing

  18. January 1st, 2009 at 17:22 | #18

    Simple, yet powerful =D

  19. Anonymous
    April 6th, 2009 at 15:35 | #19

    Ok, so where do we paste this script?

  20. April 6th, 2009 at 16:50 | #20

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

  21. June 3rd, 2009 at 05:55 | #21

    cool ! thanks for sharing

  22. June 4th, 2009 at 09:11 | #22

    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");
  23. June 4th, 2009 at 09:45 | #23

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