Get Angular Watcher Count in any Browser

Introduction

AngularJS is indeed a good JQuery programming language, but when it comes to implementing it for enterprise applications and complex pages, it creates lot of performance bottleneck. On AngularJS website also, it has mentioned that watcher count which is anything more than 2000 is a bad Angular code and creates a lot of problems in performance, specially on Internet Explorer browser.

Using the Code

I can't provide you the way to reduce the watcher count, it is a big discussion point and I am sure that every AngularJS developer follows that. Here, I am giving you a simple script which developer has to run into Command/Console window of browser's developer tool window.

JQuery code to be run into Console/Command window is as given below:

document.getElementsByTagName('*').length
for(var root=angular.element(document).injector().get("$rootScope"),
count=root.$$watchers?root.$$watchers.length:0,pendingChildHeads=[root.$$childHead],
currentScope;pendingChildHeads.length;)for(currentScope=pendingChildHeads.shift();
currentScope;)count+=currentScope.$$watchers?currentScope.$$watchers.length:0,
pendingChildHeads.push(currentScope.$$childHead),currentScope=currentScope.$$nextSibling; count;

Points of Interest

Based on my recent experience on large enterprise angular applications, I will work on an article to improve performance. I will link it in this tip once I will do that.

History

• 1.0