AngularJS watchers visualization

ng-watch-visualisation

(function visualizeAngularWatchers() {
  var i, data, scope,
  count = 0,
  all = document.all,
  len = all.length,
  test = {},
  overlayMain = angular.element('<div/>'); 
  overlayMain.css({'z-index': 9999});
  angular.element(document.body).append(overlayMain);

  for (i = 0; i < len; i++) {
    data = angular.element(all[i]).data();
    scope = data.$scope || data.$isolateScope;
    if (scope && scope.$$watchers) {
      if ( !test[ scope.$id ] ) {
        test[ scope.$id ] = true;
        count += scope.$$watchers.length;
        createOverlay(angular.element(all[i]), scope.$$watchers.length)
      }
    }
  }

  function createOverlay(element, amount){
        var persent = Math.pow(2, amount),
        over = angular.element('<div style="background:rgba(180,120,0,.' + persent + '); position:absolute;" />');
        over.width(element.width());
        over.height(element.height());
        over.offset({ top: element.offset().top, left: element.offset().left})
        overlayMain.append(over);
  }
  
  return count;
})();