See what your jQuery code does inside like a boss.
Switch branches/tags
Nothing to show
Pull request Compare 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)