Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
See what your jQuery code does inside like a boss.
branch: master

This branch is 44 commits behind Prinzhorn:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
LICENSE.txt
README.md
index.html
jquery.inlog.js

README.md

jQuery inlog

See what your jQuery code does inside like a boss. jQuery inlog is a passive plugin, which injects (js ftw!) console.log calls inside your jQuery core. It makes debugging of selectors and chains a breeze.

I call it black-box magic. Or short: black magic. Or even shorter: js

The original idea was taken from https://github.com/fmsf/jQueryLog

Only tested in Firefox with Firebug. Who doesn't use those in dev env?

Example

Imagine the following markup

<body>
    <div class="bar">
        <div class="bar">
            <div id="foo"></div>
        </div>
    </div>
    <div id="bacon"></div>
</body>

and the following jQuery calls

$("#foo").parents(".bar").next().prev().parent().find(".foo:last").text("test");

Would output something like the following

+ $("#foo") ↷ [div#foo]
+ parents(".bar") ↷ [div.bar, div.bar]
+ next() ↷ [div#bacon]
+ prev() ↷ [div.bar]
+ parent() ↷ [body]
- fadeOut() ↷ [body]
    - animate(Object { opacity="hide"}) ↷ [body]
        - queue("fx", g()) ↷ [body]
            - each(function()) ↷ [body]
                - is(":hidden") ↷ false
                - matchesSelector(<body style="opacity: 0.920047;">, ":hidden") ↷ false
                      isXML(<body style="opacity: 0.920047;">) ↷ false
                      isXML(Document index.html) ↷ false
                    - filter(":hidden", [body]) ↷ []
                        isXML(<body style="opacity: 0.920047;">) ↷ false

or with thisValue: true

+ (Window index.html).$("#foo") ↷ [div#foo]
+ ([div#foo]).parents(".bar") ↷ [div.bar, div.bar]
+ ([div.bar, div.bar]).next() ↷ [div#bacon]
+ ([div#bacon]).prev() ↷ [div.bar]
+ ([div.bar]).parent() ↷ [body]
- ([body]).fadeOut() ↷ [body]
    - ([body]).animate(Object { opacity="hide"}) ↷ [body]
        - ([body]).queue("fx", g()) ↷ [body]
            - ([body]).each(function()) ↷ [body]
                - ([body]).is(":hidden") ↷ false
                - (function()).matchesSelector(<body style="opacity: 0.920047;">, ":hidden") ↷ false
                      (function()).isXML(<body style="opacity: 0.920047;">) ↷ false
                      (function()).isXML(Document index.html) ↷ false
                    - (function()).filter(":hidden", [body]) ↷ []
                        (function()).isXML(<body style="opacity: 0.920047;">) ↷ false

or less verbose with maxDepth: 0, if that's enough (it should be)

$("#foo") ↷ [div#foo]
parents(".bar") ↷ [div.bar, div.bar]
next() ↷ [div#bacon]
prev() ↷ [div.bar]
parent() ↷ [body]
fadeOut() ↷ [body]

You can not only inspect the multiple levels of nested function calls, but also every single parameter!

Documentation / Reference

Include jquery.inlog.js after jQuery core and enable it by calling $.inlog(true) or $.inlog(options).

Options:

var defaults = {
    enabled: false, //Shortcut: $.inlog(true|false);
    thisValue: false, //Output this-value or not
    returnValue: true, //Output return-value or not
    indent: true, //Indent nested calls or not
    maxDepth: -1 //How many levels of nested calls to output
};

TODO

  • include/run the jQuery core tests to ensure that we don't cause any side effects
  • Not all functions are included (right now only http://api.jquery.com/category/traversing/)
  • Special treatment for:
    • jQuery() function
    • each
    • map
    • find more functions in need of special treatments
  • Do the same for Sizzle (jQuery.find)
    • Add an option to enable Sizzle debugging (really needed?)
  • Output nested calls nested with console.group(), e.g.: fadeOut() calls animate() which calls queue()
    • Right now, the output for nested calls is in "wrong" order (inner most first)
Something went wrong with that request. Please try again.