title: How to count Angular Watchers on Page?
body: <p>How do I accurately count the number of watchers on a page? </p>
  
  <p>I found a few different articles on how to do it, but they all give me different counts, so I'm struggling to find which is the correct way.</p>
  
  <p>There is a StackOverflow <a href="https://stackoverflow.com/questions/18499909/how-to-count-total-number-of-watches-on-a-page">here</a> with the following code:</p>
  
  <pre><code>(function () { 
  var root = angular.element(document.getElementsByTagName('body'));
  
  var watchers = [];
  
  var f = function (element) {
      angular.forEach(['$scope', '$isolateScope'], function (scopeProperty) { 
          if (element.data() &amp;&amp; element.data().hasOwnProperty(scopeProperty)) {
              angular.forEach(element.data()[scopeProperty].$$watchers, function (watcher) {
                  watchers.push(watcher);
              });
          }
      });
  
      angular.forEach(element.children(), function (childElement) {
          f(angular.element(childElement));
      });
  };
  
  f(root);
  
  // Remove duplicate watchers
  var watchersWithoutDuplicates = [];
  angular.forEach(watchers, function(item) {
      if(watchersWithoutDuplicates.indexOf(item) &lt; 0) {
           watchersWithoutDuplicates.push(item);
      }
  });
  
  console.log(watchersWithoutDuplicates.length);
  })();
  </code></pre>
  
  <p>When I test it on the Angularjs.org homepage, it gives me 132 watchers.</p>
  
  <p>I then found a Medium post <a href="https://medium.com/@kentcdodds/counting-angularjs-watchers-11c5134dc2ef#.kf1idnvp9" rel="nofollow noreferrer">here</a>, with the following code: </p>
  
  <pre><code>function getWatchers(root) {
    root = angular.element(root || document.documentElement);
    var watcherCount = 0;
  
    function getElemWatchers(element) {
      var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
      var scopeWatchers = getWatchersFromScope(element.data().$scope);
      var watchers = scopeWatchers.concat(isolateWatchers);
      angular.forEach(element.children(), function (childElement) {
        watchers = watchers.concat(getElemWatchers(angular.element(childElement)));
      });
      return watchers;
    }
  
    function getWatchersFromScope(scope) {
      if (scope) {
        return scope.$$watchers || [];
      } else {
        return [];
      }
    }
  
    return getElemWatchers(root);
  }
  getWatchers().length
  </code></pre>
  
  <p>Testing this on Angularjs.org homepage returns 152 watchers. </p>
  
  <p>Using simply <code>angular.element('body').scope().$$watchersCount</code> returns 80. </p>
  
  <p>I understand that the SO code removes duplicates, is it removing duplicates that are watching the same expression (so there will only be one watcher listed for an expression like <code>!visible</code>), or it's removing duplicate watcher objects?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I realize the discrepancy is from duplicates. But, do duplicate watchers affect performance?</p>