Measure performance of AngularJS application

The problem that you most probably will face while developing application using Angular JS is how to measure performance and optimize app. In this article will be described some tools and extensions below divided by categories.

Tools should be integrated to application:

• Digest HUD
• Ng Stats

Browser addons:

• Angular performance
• Batarang
• Ng inspect watchers 

Tools should be included to application.

Ng-Stats  is one of the most useful tool it allows monitoring watchers quantity and how long is digest executing. It can be integrated as Chrome DevTools Snippet.

Minimum configuration can be look like this:

var ngStats = showAngularStats({
    position: 'bottom-left'
 });

Current snippet will display following chart with watchers count and digest time.

ng-stats can be customized by adding custom listeners logging info, about watchers and digest, into console.log or API. Here is details docs how to configure ng-stats.

Browser addons 

Angular performance and Batarang are Chrome addons they can work together or separately.  For example Batarang can show all details about $scope object, all angular app dependencies in chart,  etc.
Angular performance is profiling tool allows to observe info about events, digests time/rate, watchers count, services async and sync timing etc. It's very useful to quick detect slow parts of the application.