Debugging Angular JS applications for Performance

Hi There,

This time i have been asked to profile an angular js application, so writing my experience as i learn

Key things to Keep in mind is "Watchers" because in Angular two way data binding occurs which means your application will keep on watching if there is any changes and this is a representative process . Thus we have to look into the count of the number of watchers in the App.

Now looking into many blogs written about the performance, it has been mentioned that the rule of the thumb is that the number of watchers for any given page should not exceed more then 2000.

Now You can do this my a Plugin that is available in Chrome.

Name "Angular Watchers"

This is an chrome extension which shows the number of watchers in the particular page, please find the screen shot mentioned below,

Name "Agular JS Batarang"

This is also a chrome extension, but provides more features then the above, please find the attached screen shots for more details

The Performance tab gives us more details apart from the number of watchers . It gives us the grouping of each watcher and the average time it needs. (This is helpful specially in finding out the watchers which are contributing on the performance)

Another Useful feature , It adds on is that it gives us hint on the performance issues , please find the screen shot mentioned below

Controllers: