feat(ng): counting angular watchers in a tree

Author: bahmutov

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "code-snippets",
   "main": "first-paint.js",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "homepage": "https://github.com/bahmutov/code-snippets",
   "license": "MIT",
   "ignore": [

ng-count-watchers.js

@@ -1,12 +1,35 @@
 // taken from http://ng.malsup.com/#!/counting-watchers
-(function countAngularWatchers(angular) {
+/*
+  Usage
+    - just run the script and it will compute number of watchers on the page
+    - select an element on the page using "Elements" tab
+      and run `countAngularWatchers(angular, $0)` to count total watchers
+      in the tree rooted at the selected element. Useful to find where the
+      large numbers of watchers are "hiding"
+*/
+(function countAngularWatchers(angular, start) {
+  window.countAngularWatchers = countAngularWatchers;
+
+  function allDescendents(list, node) {
+    list.push(node);
+    Array.prototype.forEach.call(node.childNodes, function (child) {
+      allDescendents(list, child);
+    });
+  }
+
   var i, data, scope,
       count = 0,
       all = document.all,
-      len = all.length,
       test = {},
       watchers = [];
 
+  if (start) {
+    all = [];
+    allDescendents(all, start);
+  }
+  console.log('counting watchers in', all.length, 'elements');
+  var len = all.length;
+
   var mostWatchers = 0;
   var maxWatchersToPrint = 20;
 
@@ -21,20 +44,27 @@
       console.log('most watchers', n);
       console.log(element);
       mostWatchers = n;
+
     }
   }
 
-  // go through each element. Count watchers if it has scope or isolate scope
-  for (i = 0; i < len; i += 1) {
-    var el = angular.element(all[i]);
+  function countWatchersInData(el) {
     data = el.data();
-    scope = data.$scope || data.$isolateScope;
-    if (scope && scope.$$watchers) {
-      if ( !test[ scope.$id ] ) {
-        countScopeWatchers(scope, el);
+    if (data) {
+      scope = data.$scope || data.$isolateScope;
+      if (scope && scope.$$watchers) {
+        if (!test[scope.$id]) {
+          countScopeWatchers(scope, el);
+        }
       }
     }
   }
+
+  // go through each element. Count watchers if it has scope or isolate scope
+  for (i = 0; i < len; i += 1) {
+    var el = angular.element(all[i]);
+    countWatchersInData(el);
+  }
   console.log('this page has ' + watchers.length + ' angular watchers');
   if (watchers.length < maxWatchersToPrint) {
     console.log('the watchers are:', watchers);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "code-snippets",
   "description": "Chrome DevTools code snippets ",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "Gleb Bahmutov <[email protected]>",
   "bugs": {
     "url": "https://github.com/bahmutov/code-snippets/issues"
@@ -69,4 +69,4 @@
     "size": "t=\"$(npm pack .)\"; wc -c \"${t}\"; tar tvf \"${t}\"; rm \"${t}\";",
     "test": "grunt"
   }
-}
+}