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.

Comments 25

  1. Mark Fowler wrote:

    genius!

    Posted 27 Sep 2007 at 08:54
  2. Andrew Ingram wrote:

    Clever, it’ll come in very handy.

    Posted 28 Sep 2007 at 22:10
  3. Nikola wrote:

    I’ll repeat Mark: genius!

    Posted 19 Oct 2007 at 15:26
  4. Maxime wrote:

    Brilliant ! Thanks for sharing it

    Posted 19 Oct 2007 at 16:44
  5. Kaloyan wrote:

    Cool!

    Posted 19 Oct 2007 at 17:53
  6. André Luís wrote:

    Awesome!

    I would just add:

    if( console )

    inside the function. for cleanliness reasons…i might be testing on different browsers at the same time. ๐Ÿ˜‰

    Posted 19 Oct 2007 at 18:08
  7. http://www.ajaxbestiary.com wrote:

    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.

    Posted 19 Oct 2007 at 19:24
  8. Cdx/tcodex@gmail.com wrote:

    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!

    Posted 19 Oct 2007 at 19:55
  9. Leandro wrote:

    Great, thank you!

    Posted 19 Oct 2007 at 22:33
  10. Ebyte.com wrote:

    Very cool! This will come in handy for sure.

    Posted 19 Oct 2007 at 23:17
  11. ress wrote:

    any demo?

    Posted 20 Oct 2007 at 02:45
  12. ress wrote:

    any demo available?

    Posted 20 Oct 2007 at 02:46
  13. close protection forum wrote:

    Sounds good, a demo would help

    Posted 20 Oct 2007 at 06:19
  14. treo wrote:

    Looks like you need a Captcha ๐Ÿ˜‰

    Posted 20 Oct 2007 at 13:45
  15. JFR wrote:

    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

    Posted 20 Oct 2007 at 16:26
  16. Joan Piedra wrote:

    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

    Posted 20 Oct 2007 at 19:33
  17. insic wrote:

    cool! thanks for sharing

    Posted 02 Sep 2008 at 16:08
  18. Nicolรกs Miyasato wrote:

    Simple, yet powerful =D

    Posted 01 Jan 2009 at 17:22
  19. Anonymous wrote:

    Ok, so where do we paste this script?

    Posted 06 Apr 2009 at 15:35
  20. dom wrote:

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

    Posted 06 Apr 2009 at 16:50
  21. saurabh shah wrote:

    cool ! thanks for sharing

    Posted 03 Jun 2009 at 05:55
  22. Marko Simic wrote:

    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");
    Posted 04 Jun 2009 at 09:11
  23. dom wrote:

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

    Posted 04 Jun 2009 at 09:45
  24. iansane wrote:

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

    Posted 14 Jun 2011 at 14:27
  25. Dominic Mitchell wrote:

    You’ll need to load in jQuery first. Have a look at the tutorial if you’re not sure.

    Posted 14 Jun 2011 at 18:16