AngularJS – Measuring real-time performance of your web application

AngularJS – Measuring real-time performance of your web application

AngularJS – Measuring real-time performance of webapplication

In a previous blogpost we explained a little more about how AngularJS works under the hood. Having a closer look at how AngularJS binds data and handles data updates (digest cycle – watch and apply). When the amount of data watchers increase … chanches increase of creating slack on your applications performance. Therefor it’s important to keep an eye on your applications performance. There are some out-of-the-box measuring tools available, to quickly keep track of your applications performance.

 
 

AngularJS Performance measuring tools

 

Chrome DevTools

A fantastic built-in performance measuring tool in Google Chrome. Can be used for general performance measurement of your AngularJS webapplication.
Read more about this tool on the official Google docs website.

 

AngularJS Batarang

An AngularJS WebInspector Extension for Chrome.
https://github.com/angular/batarang

 

NgStats

Little utility to show stats about your page’s angular digest/watches. This library currently has a simple script to produce a chart (see below). It also creates a module called angularStats which has a directive called angular-stats which can be used to put angular stats on a specific place on the page that you specify.
Interactive demo : https://kentcdodds.github.io/ng-stats/

 
https://github.com/kentcdodds/ng-stats

 

Digest Hud

Digest performance analysis HUD for AngularJS.

 

Angular-Performance Chrome Extension

A Chrome extension to get performance metrics on an angular application

https://github.com/Linkurious/angular-performance

 

UX Profiler

Extends the Developer Tools, adding ability to measure and profile UX by grouping related events together.

https://github.com/Linkurious/angular-performance


About the Author

Daan is a Creative-Geek who loves learning and sharing new techniques! Follow him on Twitter to keep up to date with the Creative-Geeks blog and other subjects. Contact him on e-mail : info[at]creative-geeks.com.