Le projet Angular de Google a annoncé la disponibilité de Angular DevTools, une extension Chrome DevTools que vous pouvez utiliser pour inspecter la structure de vos applications et profiler leurs performances.

Google dit avoir mené une enquête auprès des développeurs. Enquête qui a conclu que la majorité des développeurs ont besoin de meilleurs outils pour déboguer leurs applications, les points suivants étant ceux qui nécessitent le plus d'attention:

• Améliorations des messages d'erreur
• Comprendre la détection des changements
• Comprendre la hiérarchie des injecteurs et l'instanciation du fournisseur
• Visualisation de la structure des composants

Dans le cadre du projet visant à améliorer l'expérience de débogage, Google a introduit de nouvelles API dans l'objet global ng et a également travaillé sur de meilleurs messages d'erreur Angular en fournissant plus d'informations et des conseils pratiques sur la façon de les corriger. Pour donner aux développeurs de meilleures informations sur la façon dont ils peuvent profiler leurs applications, Google a fourni du contenu sur le profilage avec Chrome DevTools.

Pour résoudre les problèmes restants et fournir une vue spécifique à Angular basée sur les fonctionnalités de Chrome DevTools, Google a développé Angular DevTools en collaboration avec Rangle.io. L'équipe de Rangle a construit le tout premier outil de débogage pour Angular - Augury, qui a servi la communauté pendant des années. En travaillant avec l'équipe de Rangle, Google a développé Angular DevTools à partir de zéro, en réutilisant les leçons apprises d'Augury.

Dans sa version actuelle, Angular DevTools se concentre sur:

• Visualisation de la structure des composants
• Comprendre l'exécution de la détection des changements

À l'instar d'Augury, Angular DevTools fournit un explorateur de composants qui vous permet de prévisualiser la structure de votre application:

Il vous donne également un aperçu des cycles de détection des changements, vous aidant à trouver les goulots d'étranglement des performances afin que vous puissiez offrir une expérience à 60 ips à vos utilisateurs, selon les termes de Google.

Angular DevTools peut être installé à partir du Chrome Web Store.