├── .gitignore
├── LICENSE.md
├── README.md
├── devtoolsBackground.html
├── devtoolsBackground.js
├── eventPage.js
├── icon128.png
├── manifest.json
├── options.html
└── options.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Andres Suarez
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | jQuery Audit
 2 | ------------
 3 | 
 4 | #### **Install it from the [Chrome Web Store](https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg/).**
 5 | 
 6 | `jQuery Audit` is a Chrome Developer Tools extension for ~~debugging~~ auditing jQuery — it creates a sidebar in the `Elements panel` containing jQuery **delegated events**, internal data, and more, as **live `DOM nodes`, `functions`, and `objects`**.
 7 | 
 8 | ![jQuery Audit panel](http://static.tumblr.com/p2zjhet/WbZmwfqaq/jquery-audit-panel.png)
 9 | 
10 | 
11 | ##### Live `DOM nodes`, `functions`, and `objects`
12 | * Variables in the `jQuery Audit` sidebar behave like objects in the `Sources panel` → `Scope Variables` sidebar. You can right-click on a `function` and goto **"Show Function Definition"**, or hover over a `DOM node` to highlight it in the document, as well as right-clicking it to **"Reveal in Elements Panel"**.
13 | 
14 | ![show function definition](http://static.tumblr.com/p2zjhet/pnimwfrwl/show-function-definition-highlight.png)
15 | 
16 | 
17 | ##### Direct access to the `document` and `window` objects
18 | * The `document` and the `window` objects don't have representations in the `Elements panel` but can nonetheless be event targets and/or have associated jQuery data. `jQuery Audit` adds two comment nodes above the `<!DOCTYPE>` to represent them. The `<!--@(document)-->` as a stand-in for the `document` object, and the `<!--@(window)-->` as a stand-in for the `window` object. Select either to audit the represented object in the `jQuery Audit` sidebar.
19 | 
20 | ![document & window](http://static.tumblr.com/p2zjhet/UZlmwfyd4/document-window-highlight.png)
21 | 
22 | **Requirements:** `jQuery Audit` does a `typeof window.jQuery === 'function'` whenever a `node` is selected. If it can't find a `jQuery` function in the global scope, the sidebar will display `Error: "@(window.jQuery is missing)"`.
23 | 
24 | **Tip:** Text wrapped in `@(...)` are "messages" from `jQuery Audit`. This was the compromise made to get live objects in the sidebar and be able to show informative messages.
25 | 
26 | ***
27 | 
28 | ### Sidebar sections
29 | 
30 | ##### `@(this element)`
31 | * The element currently selected.
32 | 
33 | ##### `Data`
34 | * _Data_ contains the would-be result of invoking `$(element).data()`. `jQuery Audit` doesn't invoke `.data()` because calling it creates a data object in jQuery's internal store if one doesn't already exist for that element. Instead, `jQuery Audit` directly looks in the internal store for the data object and returns it. If there isn't one, you'll see `@(none)`, or if it's an empty object you'll see `@(empty Object)`.
35 | 
36 | ##### `Events([number_of_events])`
37 | * These are the events that the element would **react to**. That means any delegated events, or any directly bound events that don't delegate. (Directly bound events are under `Internal Data` &rarr; `events`). For each event name, there is a corresponding jQuery event object associated with it, that has:
38 |   * a `delegator`: The ancestor element that delegates the event, or `@(this element)` when the event is directly bound to the element and there is no delegation.
39 |   * a `handler`: The function that handles the event. More often than not, the `handler` is a _bound_ function and not directly the function that does the "work". The section below on [Finding bound handlers](#finding-bound-handlers) shows you where common _binder_ functions store the _bound_ function.
40 |   * And more.
41 | 
42 | ##### `Internal Data`
43 | * The internal data jQuery keeps on the element - it is the result of calling `$._data(element)`. This is not the same as the data object from `$(element).data()`, though the data object is kept here in the internal store.
44 | 
45 | ##### `dataset`
46 | * The value of `HTMLElement.dataset`. This is not the same as _Data_ above, but closely related to it. `HTMLElement.dataset` contains the raw `data-*` attributes. While _Data_ is the parsed content of any `data-*` attributes jQuery found on the element along with any other arbitrary information. (jQuery converts `Boolean`, `Number` and `JSON` in `data-*` attributes when you call `.data()`).
47 | 
48 | ##### `own HTML`
49 | * The result of removing the `innerHTML` from the `outerHTML` of an element. This helps debug character encoding issues, since what the `Elements panel` shows is a decoded "pretty" version of the HTML and not the actual HTML.
50 | 
51 | ### Finding bound handlers
52 | Often event `handlers` are _bound_ functions. In these cases, the function under `Events` &rarr; `event_name` &rarr; `handler` is the `binder` function and not the `bindee`. Depending on the `binder` used, the `bindee` function is usually near by.
53 | 
54 | ##### `_.bind` from [Lo-Dash](http://lodash.com/)
55 | * Expand the `handler` function followed by the `__bindData__` property. In this array, the first element is the `bindee` function, the other elements contain the `this` context and any parameters to be partially applied. Older versions of Lo-Dash might not have this structure.
56 | 
57 |   ![Lo-Dash bind](http://static.tumblr.com/p2zjhet/O7mmwfq08/lodash-bind-highlight.png)
58 | 
59 | ##### `_.bind` from [Underscore](http://underscorejs.org/) and native `Function.prototype.bind`
60 | * Underscore uses to the native `bind` function. A clear sign that the `binder` is the native `bind` function is `function () { [native code] }` for a `handler`. Expand the `handler` to locate the `bindee` function is under `[[TargetFunction]]`. The `this` context is found in `[[BoundThis]]` and any parameters to be partially applied are in `[[BoundArgs]]`.
61 | 
62 |   ![Native bind](http://static.tumblr.com/p2zjhet/okVmwfq2u/native-bind-highlight.png)
63 | 
64 | ##### `$.proxy` from [jQuery](http://jquery.com/)
65 | * With `$.proxy` the `bindee` can't be found as a property on the `binder` but rather in a `Closure`. Expand the `handler`, followed by `<function scope>` and then the inner-most `Closure`. One of the variables in this scope contains the `bindee` - the name of the variable that contains the `bindee` will likely vary because of minification.
66 | 
67 |   ![jQuery proxy](http://static.tumblr.com/p2zjhet/jLfmwfq44/jquery-proxy-highlight.png)
68 | 
69 | ***
70 | 
71 | ### FAQ
72 | * Does `jQuery Audit` work with `<iframe>'s`?
73 | > Yes, if the `<iframe>` has a jQuery function (regardless of the parent having jQuery or not) and it's not restricted by the same-origin policy.
74 | 
75 | * How do I remove `<!--@(document)-->` and `<!--@(window)-->`?
76 | > Run `jQueryAudit()` in the console. When you close the developer tools the two `comment nodes` are removed and the `jQueryAudit` object is removed.
77 | 
78 | * Why exactly the `@(...)`?
79 | > The content of a `SidebarPane` can be an HTML page, a JSON object, or "the result of an expression". An HTML page, nor a JSON object, have the ability to display "live" objects. The reason for making this extension was so that I could find a delegated event and be able to use "Show Function Definition" on the handler. For that effect, the contents of the sidebar is actually "the result of an expression" with a lot of trickery to make it look not-so-ugly. So, to differentiate between actual object data and informational messages I went with `@(...)` so it wouldn't be easily confused with string data.
80 | 
81 | * Why the name _Audit_?
82 | > I am a lawyer. Yes, really. Went to law school, passed the bar, and I'm a fully admitted member of the New York State Bar Association. So, yeah, that's why _Audit_ came to mind when I was thinking of a name.
83 | 
84 | **Disclaimer: I am not related to the jQuery project.**
85 | 


--------------------------------------------------------------------------------
/devtoolsBackground.html:
--------------------------------------------------------------------------------
1 | <html>
2 | <body>
3 | <script src="devtoolsBackground.js"></script>
4 | </body>
5 | </html>
6 | 


--------------------------------------------------------------------------------
/devtoolsBackground.js:
--------------------------------------------------------------------------------
  1 | /* jslint browser: true */
  2 | /* global chrome, $0 */
  3 | 
  4 | function getPanelContents(settings) {
  5 |     if (!$0) return;
  6 | 
  7 |     settings || (settings = {});
  8 | 
  9 |     // In case we're in an <iframe>
 10 |     var document = $0.ownerDocument;
 11 |     var window = document.defaultView;
 12 | 
 13 |     // We will only work if there is a "jQuery" function.
 14 |     // TODO: Alternatively check for an AMD module.
 15 |     if (typeof window.jQuery !== 'function')
 16 |         return (function(msg) {
 17 |             return (msg.Error = '@(window.jQuery is missing)'), msg;
 18 |         })(Object.create(null));
 19 | 
 20 |     if (typeof window.jQuery._data !== 'function')
 21 |         return (function(msg) {
 22 |             return (msg.Error = '@(jQuery version is too old)'), msg;
 23 |         })(Object.create(null));
 24 | 
 25 |     return (function($, el) {
 26 | 
 27 |         function internalClass(obj) {
 28 |             return Object.prototype.toString.call(obj).match(/\[object (\w+)\]/)[1];
 29 |         }
 30 | 
 31 |         // Return objects with "__proto__ = null" so we don't clutter up the panel.
 32 |         function extendNull() {
 33 |             return $.extend.apply(null, [].concat.apply([Object.create(null)], arguments));
 34 |         }
 35 | 
 36 |         // Turn certain objects into descriptive strings so they're easier to read.
 37 |         function exportify(obj, none) {
 38 |             if (obj === null)            return none ? '@(none)' : '@(null)';
 39 |             if (obj === undefined)       return none ? '@(none)' : '@(undefined)';
 40 |             if (obj === false && none)   return        '@(none)';
 41 |             if (typeof obj !== 'object') return obj;
 42 | 
 43 |             var hasKeys = !!Object.keys(obj).length;
 44 | 
 45 |             if (none && !hasKeys)        return '@(none)';
 46 |             if (hasKeys)                 return extendNull(obj);
 47 |                                          return '@(empty ' + internalClass(obj) + ')';
 48 |         }
 49 | 
 50 |         // Get/create the comment nodes "<!-- @(window) -->" and "<!-- @(document) -->"
 51 |         // that go below "<html>". These are used as representations for
 52 |         // the "window" and "document" objects. Since they don't have a representation
 53 |         // in the Elements Panel, but can have event listeners, we add the comment
 54 |         // nodes for convenience.
 55 |         //
 56 |         // These use to be above the "<!DOCTYPE html>". There is bug in Chrome
 57 |         // the caused the Elements Panel to scroll to the selected element if the DOM
 58 |         // changed when these helper elements were above "<html>". So, they got moved.
 59 |         //
 60 |         // To turn them off go to Extensions -> jQuery Audit -> options
 61 |         //
 62 |         var jQueryAudit = !settings.displayHelpers ? {} : window.jQueryAudit ||
 63 |             (window.jQueryAudit = (function() {
 64 |                 var target = document.documentElement.firstChild;
 65 |                 var parent = target.parentNode;
 66 |                 var jQA = {};
 67 |                 try {
 68 |                     jQA.window = parent.insertBefore(
 69 |                         document.createComment('@(window)'),
 70 |                         target );
 71 |                     jQA.document = parent.insertBefore(
 72 |                         document.createComment('@(document)'),
 73 |                         target );
 74 |                     jQA.cleanup = function() {
 75 |                         parent.removeChild(jQA.window);
 76 |                         parent.removeChild(jQA.document);
 77 |                         jQA.cleanup = jQA.window = jQA.document = null;
 78 |                     };
 79 |                 } catch(err) {}
 80 |                 return jQA;
 81 |             })());
 82 | 
 83 |         // Check if we're on "<!-- @(window) -->" or "<!-- @(document) -->"
 84 |         var target = (el === jQueryAudit.window)   ? window :
 85 |                      (el === jQueryAudit.document) ? document :
 86 |                                                      el;
 87 | 
 88 |         // Get all the events this element will react to, either because they're
 89 |         // directly bound to it w/o delegation, or because some ancestor is delegating.
 90 |         var events = (function() {
 91 |             var el = target;
 92 |             var ancestors = (el === window)   ? [ window ] :
 93 |                             (el === document) ? [ document ] :
 94 |                                                 [ el ].concat( $(el).parents().toArray(), document, window );
 95 |             return $.map(ancestors, function(node) {
 96 |                 return $.map(($._data(node)||0).events || {}, function(val) {
 97 |                         return val;
 98 |                     }).filter(function(ev) {
 99 |                         var sel = ev.selector;
100 |                         if (!sel) return node === el;
101 |                         // Pretty much the same methodology jQuery uses
102 |                         // https://github.com/jquery/jquery/blob/1.10.2/src/event.js#L435
103 |                         return (ev.needsContext) ?
104 |                                 $(sel, node).length :
105 |                                 $.find(sel, node, null, (el.nodeType === 1) ? [ el ] : []).length;
106 |                     }).map(function(ev) {
107 |                         return extendNull(ev, {
108 |                             delegator: (node === el) ? '@(this element)' : node
109 |                         });
110 |                     });
111 |             }).reduce(function(acc, ev) {
112 |                 ++acc.sum[ev.type] || (acc.sum[ev.type] = 0);
113 |                 acc.all[ev.type + '.' + acc.sum[ev.type]] = ev;
114 |                 acc.i++;
115 |                 return acc;
116 |             }, {
117 |                 i: 0,
118 |                 all: {},
119 |                 sum: {}
120 |             });
121 |         })();
122 | 
123 |         var internalData = (function() {
124 |             return $._data(target);
125 |         })();
126 | 
127 |         var data = (function() {
128 |             var _data = $._data(target);
129 |             // Avoid $(..).data() side-effects
130 |             return _data && _data.parsedAttrs && _data.data;
131 |         })();
132 | 
133 |         var dataset = (function() {
134 |             return target.dataset;
135 |         })();
136 | 
137 |         // If you have <div><p class="myClass"><a href="#"></p></div> and you select the <p>,
138 |         // it returns <p class="myClass"></p>
139 |         var ownHTML = (function() {
140 |             var outerHTML = target.outerHTML;
141 |             if (outerHTML && ('innerHTML' in target))
142 |                 return outerHTML.replace(target.innerHTML, '');
143 |         })();
144 | 
145 |         // Panel output
146 |         return extendNull( (function() {
147 |             var panel = {};
148 |             panel['@(this element)']            = target;
149 |             panel['Data']                       = exportify( data );
150 |             panel['Events(' + events.i + ')']   = exportify( events.all, true);
151 |             panel['Internal Data']              = exportify( internalData, true );
152 |             panel['dataset']                    = exportify( dataset );
153 |             panel['own HTML']                   = exportify( ownHTML, true );
154 |             return panel;
155 |         })() );
156 | 
157 |     })(window.jQuery, $0);
158 | }
159 | 
160 | var backgroundPageConnection = chrome.runtime.connect({
161 |     name: 'devtools-jqueryaudit'
162 | });
163 | 
164 | // Pass "tabId" to the background page so we can cleanup after the panel closes.
165 | backgroundPageConnection.postMessage({
166 |     tabId: chrome.devtools.inspectedWindow.tabId
167 | });
168 | 
169 | var elements = chrome.devtools.panels.elements;
170 | elements.createSidebarPane('jQuery Audit', function(sidebar) {
171 |     // Assume we're visible from the start
172 |     var isVisible = true;
173 | 
174 |     updatePanelContents();
175 | 
176 |     elements.onSelectionChanged.addListener(function() {
177 |         if (isVisible) updatePanelContents();
178 |     });
179 | 
180 |     // "onShown" is flaky on Chrome 31
181 |     if (getChromeVersion() > 31) {
182 |         // Don't update the sidebar if it's not visible
183 |         sidebar.onShown.addListener(function() {
184 |             isVisible = true;
185 |             updatePanelContents();
186 |         });
187 |         sidebar.onHidden.addListener(function() {
188 |             isVisible = false;
189 |         });
190 |     }
191 | 
192 |     function updatePanelContents() {
193 |         sidebar.setExpression( serializeAsIIFE(getPanelContents, getSettings()) );
194 |     }
195 | });
196 | 
197 | function serializeAsIIFE(fn) {
198 |     var params = Array.prototype.slice
199 |         .call(arguments, 1)
200 |         .map(function(arg) {
201 |             return JSON.stringify(arg);
202 |         }).join(',');
203 |     return [ '(', fn.toString(), ')(', params, ')' ].join('');
204 | }
205 | 
206 | function getChromeVersion() {
207 |     return parseInt(navigator.userAgent.match(/chrome\/(\d+)/i)[1]);
208 | }
209 | 
210 | function getSettings() {
211 |     var store = localStorage;
212 |     // Default settings
213 |     var settings = {
214 |         displayHelpers: true
215 |     };
216 |     if ('displayHelpers' in store) {
217 |         (settings.displayHelpers = !!parseInt(store.displayHelpers));
218 |     }
219 |     return settings;
220 | }
221 | 


--------------------------------------------------------------------------------
/eventPage.js:
--------------------------------------------------------------------------------
 1 | /* global chrome, jQueryAudit */
 2 | 
 3 | // The DevTools page is the only one that can "eval" code within
 4 | // the context of the inspected page. But, it has no way of knowing
 5 | // that the panel was closed. So, we need this trickery to clean up
 6 | // after the DevTools are closed.
 7 | 
 8 | var cleanup = serializeAsIIFE(function(imports) {
 9 |     var script = document.createElement('script');
10 |     script.innerHTML = imports.remove;
11 |     document.head.appendChild(script);
12 |     setTimeout(function() {
13 |         document.head.removeChild(script);
14 |     });
15 | }, {
16 |     remove: serializeAsIIFE(function() {
17 |         if (!window.jQueryAudit) return;
18 |         jQueryAudit.cleanup();
19 |         delete window.jQueryAudit;
20 |     })
21 | });
22 | 
23 | chrome.runtime.onConnect.addListener(function(port) {
24 |     if (port.name !== 'devtools-jqueryaudit') return;
25 | 
26 |     var tabId;
27 |     var tabIdListener = function(message/*, sender, sendResponse*/) {
28 |         if (!message.tabId) return;
29 |         tabId = message.tabId;
30 |         port.onMessage.removeListener(tabIdListener);
31 |     };
32 |     port.onMessage.addListener(tabIdListener);
33 | 
34 |     port.onDisconnect.addListener(function() {
35 |         if (tabId == null || !chrome.tabs) return;
36 |         chrome.tabs.executeScript(tabId, {
37 |             code: cleanup
38 |         });
39 |     });
40 | 
41 | });
42 | 
43 | function serializeAsIIFE(fn) {
44 |     var params = Array.prototype.slice
45 |         .call(arguments, 1)
46 |         .map(function(arg) {
47 |             return JSON.stringify(arg);
48 |         }).join(',');
49 |     return [ '(', fn.toString(), ')(', params, ')' ].join('');
50 | }
51 | 


--------------------------------------------------------------------------------
/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zertosh/jquery-audit/e12f4c918af78d02f2b45854323b3b7ee1c7af5d/icon128.png


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "manifest_version": 2,
 3 |     "name": "jQuery Audit",
 4 |     "short_name": "jQuery Audit",
 5 |     "version": "1.1.1",
 6 | 
 7 |     "description": "Audit jQuery's delegated events, internal data, and more.",
 8 | 
 9 |     "icons": {
10 |         "128": "icon128.png"
11 |     },
12 | 
13 |     "author": "Andres Suarez <zertosh@gmail.com>",
14 |     "homepage_url": "https://github.com/zertosh/jquery-audit",
15 | 
16 |     "devtools_page": "devtoolsBackground.html",
17 | 
18 |     "background": {
19 |         "scripts": [ "eventPage.js" ],
20 |         "persistent": false
21 |     },
22 | 
23 |     "options_page": "options.html",
24 | 
25 |     "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
26 | 
27 |     "permissions": [ "tabs", "http://*/*", "https://*/*" ]
28 | }
29 | 


--------------------------------------------------------------------------------
/options.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <title>jQuery Audit options</title>
 4 |   <style>
 5 |     body {
 6 |       background: #efefef;
 7 |     }
 8 |     .center {
 9 |       position: absolute;
10 |       top: 50%; left: 50%;
11 |       -webkit-transform: translate(-50%, -50%);
12 |     }
13 |     .webkit-html-comment {
14 |       color: rgb(35, 110, 37);
15 |     }
16 |   </style>
17 | </head>
18 | 
19 | <body>
20 |   <div class="center">
21 |     <span>Display the </span>
22 |     <code class="webkit-html-comment">&lt;!-- @window --&gt;</code>
23 |     <span> and </span>
24 |     <code class="webkit-html-comment">&lt;!-- @document --&gt;</code>
25 |     <span> helpers?</span>
26 |     <select id="display-helpers">
27 |       <option value="1">yes</option>
28 |       <option value="0">no</option>
29 |     </select>
30 |   </div>
31 |   <script src="options.js"></script>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/options.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 | 
 3 |   var displayHelpersEl = document.querySelector('#display-helpers');
 4 |   var displayHelpersSelectionSelector = 'option[value="' + getDisplayHelpers() + '"]';
 5 |   function getDisplayHelpers() {
 6 |     return localStorage.displayHelpers;
 7 |   }
 8 |   function setDisplayHelpers(val) {
 9 |     return (localStorage.displayHelpers = val);
10 |   }
11 | 
12 |   displayHelpersEl.addEventListener('change', function(e) {
13 |     setDisplayHelpers(e.target.value);
14 |   });
15 | 
16 |   var displayHelpersSelection = displayHelpersEl.querySelector(displayHelpersSelectionSelector);
17 |   if (displayHelpersSelection) {
18 |     displayHelpersSelection.selected = true;
19 |   }
20 | 
21 | })();
22 | 


--------------------------------------------------------------------------------