Skip to content


Subversion checkout URL

You can clone with
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.

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

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


Imagine the following markup

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

and the following jQuery calls


Would output something like the following

+ $("#foo") ↷ [div#foo]
+ parents(".bar") ↷ [,]
+ next() ↷ [div#bacon]
+ prev() ↷ []
+ 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") ↷ [,]
+ ([,]).next() ↷ [div#bacon]
+ ([div#bacon]).prev() ↷ []
+ ([]).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") ↷ [,]
next() ↷ [div#bacon]
prev() ↷ []
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).


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


  • include/run the jQuery core tests to ensure that we don't cause any side effects
  • Not all functions are included (right now only
  • 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, 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.