Skip to content

Instantly share code, notes, and snippets.

@DTFagus
Created August 12, 2014 14:22
Show Gist options
  • Save DTFagus/3966db108a578f2eb00d to your computer and use it in GitHub Desktop.
Save DTFagus/3966db108a578f2eb00d to your computer and use it in GitHub Desktop.
Bookmarklet to analyse angular watchers

Copy as link into bookmark. Outputs into console.

javascript: (function() {
var root = $(document.getElementsByTagName('html'));
var watchers = [];
var attributes = [];
var attributes_with_values = [];
var elements = [];
var elements_per_attr = [];
var scopes = [];
function include(arr, obj) {
return (arr.indexOf(obj) != -1);
}
function is_not_duplicate(arr, obj) {
if (typeof arr == "undefined") {
return true;
} else {
if (include(arr, obj)) {
return false;
} else {
return true;
}
}
}
var f = function(element) {
if (element.data().hasOwnProperty('$scope')) {
if (typeof scopes[element.data().$scope.$id] == "undefined") {
scopes[element.data().$scope.$id] = true;
angular.forEach(element.data().$scope.$$watchers, function(watcher) {
watchers.push(watcher);
for (index = 0; index < element[0]['attributes'].length; ++index) {
if (is_not_duplicate(elements_per_attr[element[0]['attributes'][index].nodeName], element.data().$scope.$id)) {
if (typeof elements[element[0]['attributes'][index].nodeName] == "undefined") {
elements[element[0]['attributes'][index].nodeName] = [];
}
elements[element[0]['attributes'][index].nodeName].push({
element: "(Scope " + element.data().$scope.$id + "): " + element[0].outerHTML,
element_obj: element[0],
element_data: element.data(),
relevant_watcher: watcher,
current_value: watcher.last
}
);
if (typeof elements_per_attr[element[0]['attributes'][index].nodeName] == "undefined") {
elements_per_attr[element[0]['attributes'][index].nodeName] = [];
}
elements_per_attr[element[0]['attributes'][index].nodeName].push(element.data().$scope.$id);
}
}
});
}
}
angular.forEach(element.children(), function(childElement) {
f($(childElement));
});
};
f(root);
console.log("####################");
console.log("Analysing Watchers");
console.log("####################");
console.log(" ");
console.log("Watchers:");
console.log(watchers.length);
console.log("----------------------------------------------");
console.log("Watched Elements grouped by attribute");
console.log(elements);
})();
@corporatepiyush
Copy link

Awesome. It helped me.

@idanen
Copy link

idanen commented Aug 27, 2015

Notice the index in the for loop leaks to global context.

@HadrienPierart
Copy link

Great bookmarklet, thx !
Indeed however, the count is off by a large amount in component based applications. I just tried it on a page of an app Im working on, and the bklet misses a good third of the watchers given by :

angular.element('html').scope().$$watchersCount

Given that this line returns something like 900 watchers on an heavy page, yours gives me ~600 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment