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
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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent