Analyser une application Angular 2 : Augury, BatScanner

Cet article fait partie de mes compte-rendus écrits à la suite de ng-europe ayant eu lieu à Paris du 24 au 26 octobre 2016

Douglas Duteil : Angular BatScanner Projet Slides
L’idée était d’expliquer le fonctionnement de BatScanner qui permet de visualiser des informations sur le fonctionnement de votre application Angular 2.

Personnellement la solution Augury accessible dans les Chrome Dev Tools et soutenue par la team Angular me parait plus mature et plus à même de persister dans le temps.

Je ne m'attarde donc pas sur BatScanner.


Vanessa Yuen New Insights into Angular 2 Applications with Augury slides
Augury est une extension que vous pouvez retrouver dans les Chrome Dev Tools et qui permet aux développeurs Angular 2 de visualiser des informations sur leur application. En gros comme BatScanner mais en beaucoup plus complet. 

photo de Philippe Chatel

Cet outil n’a pas été développé par la team Angular directement mais c’est un projet Open Source appuyé par Rangle.io. Comme le résultat est assez convainquant l’équipe Angular n’hésite pas à le citer dans ses présentations.

Augury peut apporter plus que des informations de debugging.

Vous avez des informations sur les composants

Vous pouvez également changer des valeurs à chaud

Une application Angular peut vite être complexe et avoir un arbre de composants qui s’entrecoupent. Visualiser vos objets et leurs dépendances peut être assez fastidieux. Augury permet de le faire d’une manière assez visuelle

Vous pouvez analyser les relations entre objets

Les routes de votre application peuvent également être affichées

Le but à long terme est de vous fournir des informations pour vous aider à optimiser les performances de votre application.