Angular Watches

watches.js

(function () {
  var head = document.getElementsByTagName('head')[0];
  var styles = document.createElement('style');
  styles.innerHTML = `
    [data-watchers]:hover {
      outline: 1px dotted black;
    }

    [data-watchers]:hover:before {
      content: attr(data-watchers);
      outline: 1px dotted white;
      position: absolute;
      font-size: 10px;
      font-family: monospace;
      font-smooth: never;
      -webkit-font-smoothing: none;
      background-color: black;
      color: white;
      display: inline-block;
      height: 1em;
      line-height: 1em;
      z-index: 9999;
    }
  `;
  head.appendChild(styles);

  function annotateWatchers(elem) {
    elem = angular.element(elem);
    var selfWatchers = countWatchers(elem),
        totalWatchers = selfWatchers;
    angular.forEach(elem.children(), function(child) {
      totalWatchers += annotateWatchers(child);
    });
    elem.attr('data-watchers', selfWatchers + ',' + totalWatchers);
    return totalWatchers;
  }

  function countWatchers(elem) {
    if (!elem || !elem.data) { return 0; }
    return countScopeWatchers(elem.data().$scope) + countScopeWatchers(elem.data().$isolateScope);
  }

  function countScopeWatchers(scope) {
    if (!scope || !scope.$$watchers) { return 0; }
    return scope.$$watchers.length;
  }

  annotateWatchers(document.documentElement);
})();