Heat Map Watcher Count

[tannerlinsley]

Hey all, until I can work this into a PR, here is a nifty console script to heat map your watcher count.

var scopeElements = Array.prototype.slice.apply(document.querySelectorAll(".ng-scope"));
// map elements to scopes
var scopes = scopeElements.map(function(element) {
    return {
        el: angular.element(element),
        scope: angular.element(element).scope()
    };
});
// filter duplicated scopes created by ng-view
var scopesById = {};
var uniqueScopes = [];
scopes.forEach(function(scope) {
    if (scopesById[scope.scope.$id] === undefined) {
        scopesById[scope.scope.$id] = scope.scope;
        uniqueScopes.push(scope);
    }
});
// map uniqueScopes to watchers
var watchers = uniqueScopes.map(function(scope) {
    return scope.scope.$$watchers;
});
// extract the length
var watchersLengths = watchers.map(function(watcher) {
    return watcher ? watcher.length : null;
});
// sum up the length with reduce
var watchersCount = watchersLengths.reduce(function(a, b) {
    return a + b;
});

var max = 0;

uniqueScopes.forEach(function(scope){
    if(scope.scope.$$watchers){
        max = scope.scope.$$watchers.length > max ? scope.scope.$$watchers.length : max;
    }
});

angular.element('head').append([
    '<style>',
    '   .ng-stat-overlay{',
    '       position: absolute;',
    '       top: 0;',
    '       left: 0;',
    '       bottom: 0;',
    '       right: 0;',
    '       background: red;',
    '       z-index: 9999999999999999999999999999999999;',
    '       pointer-events: none;',
    '   }',
    '</style>'
    ].join('')
);


uniqueScopes.forEach(function(scope){
    var length = scope.scope.$$watchers ? scope.scope.$$watchers.length : 0;
    if(length){

        var overlay = angular.element('<span class="ng-stat-overlay" style="opacity:'+ scope.scope.$$watchers.length / (max * 2) / 10 + '"><span>');
        scope.el.append(overlay);
    }
});

![screenshot](http://i.snag.gy/YzDwD.jpg]

[kentcdodds]

👍 awesome! Would love to merge something like this. Thinking something like:

showAngularStats({
  heatMap: true
});

[daniellmb]

FYI you'll have to do something like this for it to work on Angular sites without jQuery.

// ...
angular.element(document).find('head').append([
// ...

Also, I think it should be implemented as a separate file that can optionally be included. This library has some extensibility hooks like listeners, this would be a good place to extend the API to support this feature.