Les équipes Angular et Chrome ont collaboré pour apporter des données et des insights spécifiques à Angular directement dans le panneau de performance des outils de développement Chrome, créant une expérience de profilage unifiée pour les développeurs. Cette intégration permet aux développeurs de combiner les avantages des deux outils, offrant une vue plus synchronisée et complète des performances de leur application. La nouvelle piste personnalisée pour Angular dans les outils de développement Chrome fournit des données de performance en utilisant des concepts Angular tels que le démarrage de l'application, les composants, la synchronisation de l'interface utilisateur et les hooks de cycle de vie. Les diagrammes de flammes de la piste personnalisée regroupent les appels de fonction ensemble sous les composants et les autres concepts Angular correspondants, permettant aux développeurs de zoomer sur des fonctions individuelles pour une vue plus granulaire. Les entrées du diagramme de flammes sont codées par couleur pour aider les développeurs à identifier rapidement ce qui se passe dans leur application, distinguant entre le code de l'application, les autres scripts ou les activités du navigateur. Les couleurs représentent différents aspects de l'application, tels que les services d'injection de dépendances, les modèles compilés par Angular et les points d'entrée. La piste personnalisée est interactive, permettant aux développeurs de cliquer sur une entrée dans le diagramme de flammes pour révéler plus d'informations détaillées sur une entrée donnée. Pour commencer, les développeurs doivent s'assurer qu'ils utilisent la dernière version d'Angular et une version à jour de Chrome, exécuter leur application Angular en mode développeur et activer la piste personnalisée en tapant ng.enableProfiling() dans la console. Cette intégration démontre l'engagement continu d'améliorer l'expérience du développeur au sein de l'écosystème Angular, permettant aux développeurs de construire des applications plus rapides et plus efficaces.
blog.angular.dev
The Angular Custom Profiling Track is now available
