How Do I Measure the Performance of my AngularJS app's digest Cycle?

Question

What is a simple way to measure the duration of the angularjs digest cycle? There exist various methods to analyze the performance of the digest cycle, however each comes with its own pitfals:

• Chrome Profiler: Too many details, does not break down the digest cycle in an easy-to-find manner
• Batarang (AngularJS browser plugin): Too much overhead, slow refresh rate, explodes with large apps.

... there must be a better way ?!1?

Answer 1

Here's a secret. In the chrome dev tools, do a cpu profile run. After you have stopped capturing, at the bottom of the screen is a down triangle next to "Heavy (Bottom Up)". Click the triangle and select "Flame Chart". Once you are in Flame Chart mode, you can zoom and pan to see the digest cycles, how long they take, and exactly what functions are being called. The Flame Chart is so incredibly useful for tracking down page load issues, ng-repeat performance problems, digest cycle problems! I really don't know how I was able to debug and profile before the Flame Chart. Here is an example: