Bases angulaires: Devtools

L’extension angulaire du navigateur Devtools améliore le débogage et le profilage spécifiquement dans les applications angulaires. Voyez les fonctionnalités avec lesquelles commencer.

Angulaireun cadre développé et entretenu par Google, est l’un des outils les plus populaires d’aujourd’hui pour créer des applications Web. Ses caractéristiques puissantes, comme liaison de données bidirectionnelle, injection de dépendance et l’architecture modulaire, en faire un excellent choix pour fabriquer des applications Web dynamiques.

Dans cet article, nous explorerons Devtools angulairesune extension de navigateur dédiée conçue pour améliorer les capacités de débogage et de profilage pour les applications angulaires.

Dans le développement Web moderne, Devtools (abréviation des outils de développeur) sont des services publics essentiels qui permettent aux développeurs d’inspecter, de déboguer et d’optimiser leurs applications Web directement à partir du navigateur. La plupart des navigateurs modernes, dont Chrome et Firefox, ont des outils de développeur intégrés pour déboguer JavaScript, analyser l’activité du réseau, inspecter le DOM et surveiller les mesures de performance. Ces outils aident à comprendre comment les applications se comportent sous le capot.

Extensions spécialisées de Devtools, telles que Réagir Devtools ou Vue Devtoolsavancez en offrant des informations spécifiques au cadre. Ils permettent aux développeurs de naviguer dans la structure de leurs applications, d’analyser les changements d’état et d’identifier les goulots d’étranglement des performances.

Devtools angulaires est une extension spécifique au cadre qui fournit une expérience de débogage et de profilage centré sur l’angulaire adaptée à l’architecture unique des applications angulaires.

Angular Devtools est une extension de navigateur fournissant une interface de débogage et de profilage spécifique à l’angulaire au sein de nos outils de développement. Il intègre de manière transparente avec Chrome et Incendieroffrant une expérience sur mesure pour inspecter et optimiser les applications angulaires. Avec Angular Devtools, les développeurs peuvent plonger profondément dans la structure des composants, déboguer les mécanismes de détection des changements et analyser les performances de l’application pour identifier les goulots d’étranglement.

Pour commencer avec Angular Devtools, installez-le à partir du Magasin de web chrome ou Les modules complémentaires de Firefox. Une fois installé, nous pouvons ouvrir les outils de développeur du navigateur en appuyant sur F12 (Windows / Linux) ou Cmd+Option+I (Mac). Si l’application que nous inspectons est construite avec Angular, nous trouverons un onglet spécifique angulaire dans l’interface des outils de développement.

Prenons un aperçu plus approfondi de certaines fonctionnalités clés des Devtools angulaires.

Composants

Le Composants Tab est l’une des caractéristiques les plus puissantes des Devtools angulaires. Lorsque nous ouvrons une application angulaire dans le navigateur, cet onglet fournit une vue détaillée de la structure de l’application. Il affiche un arbre de composants et directives qui représentent la hiérarchie de l’application.

Nous pouvons cliquer sur n’importe quel composant de cette arborescence pour inspecter ses propriétés et ses métadonnées sur le côté droit. Par exemple, nous pouvons examiner @Input et @Output Propriétés, ce qui facilite la compréhension du flux de données dans notre application. Angular Devtools nous permet également de rechercher des composants spécifiques par leurs noms à l’aide de la zone de recherche au-dessus de l’arborescence des composants.

Si nous devons plonger plus profondément dans l’implémentation, nous pouvons naviguer vers le nœud HOST DOM d’un composant ou d’une directive sélectionnée en le double-cliquant. Cela nous redirigera vers le Éléments onglet des outils de développeur de notre navigateur. De même, nous pouvons afficher le code source d’un composant en cliquant sur l’icône dans le coin supérieur droit du panneau Propriétés.

Débogage des propriétés et des interactions

Angular Devtools ne nous laisse pas simplement observer notre application; Il nous permet également d’interagir avec lui. Dans le Components onglet, nous pouvons modifier directement les valeurs de propriété. Par exemple, si un composant a une propriété d’entrée contrôlant son comportement, nous pouvons mettre à jour cette valeur en temps réel pour voir comment il affecte l’application.

De plus, Angular Devtools s’intègre à la console du navigateur pour l’interaction directe avec des composants ou des directives sélectionnés. En tapant $ng0nous pouvons accéder à l’instance de composante la plus récemment sélectionnée. Les cas précédents sont accessibles en utilisant $ng1, $ng2 et ainsi de suite. Cette fonctionnalité est particulièrement utile pour tester les méthodes et les propriétés pendant l’exécution.

Profileur

Le Profileur L’onglet est essentiel pour comprendre comment notre application angulaire fonctionne pendant les cycles de détection du changement. Cet onglet nous permet d’enregistrer et de visualiser les performances de notre application, en identifiant les domaines où des améliorations peuvent être apportées.

Lorsque nous commençons à enregistrer, le profileur suit les événements de détection et les affiche comme un graphique à barres. Chaque barre représente un cycle de détection de changement unique, avec sa hauteur indiquant le temps passé. Cliquer sur une barre fournit d’autres informations, notamment les composants ou les directives ont pris le plus de temps pour rendre.

Pour une vue plus détaillée, Angular Devtools offre une représentation de graphe de flamme. Le graphique de flamme montre la hiérarchie des composants et combien de temps chacun a consommé pendant un cycle de détection de changement. Les composants qui ont mis plus de temps à rendre apparaissent avec des couleurs plus intenses, nous aidant à identifier rapidement les goulots d’étranglement potentiels.

Arbre d’injecteur

Le Arbre d’injecteur La fonctionnalité visualise notre Hiérarchie d’injection de dépendance pour les applications angulaires construites avec la version 17 ou plus. Cette fonctionnalité est inestimable lors du débogage des services, des prestataires ou des chemins de résolution de dépendance.

L’arbre d’injecteur affiche deux vues: le hiérarchie environnementale et le hiérarchie des élémentschacun représentant comment les dépendances sont résolues dans une application. En sélectionnant un injecteur, nous pouvons voir tous les fournisseurs qu’il contient et le chemin de résolution Angular suit pour remplir les dépendances. Cela facilite l’identification et la réparation des erreurs de condamnation dans notre configuration d’injection de dépendance.

Conclure

Angular Devtools est une extension pratique pour les développeurs travaillant avec des applications angulaires. Ses fonctionnalités, telles que l’onglet Composants, l’onglet Profiler et l’arbre d’injecteur, fournissent des informations précieuses sur la structure des applications, les performances et la résolution de dépendance. Ces outils facilitent le débogage, l’optimiser et mieux comprendre le comportement des applications angulaires, permettant aux développeurs de résoudre efficacement les problèmes et d’affiner efficacement leur base de code.

Dans cet article, nous avons mis en évidence certaines des fonctionnalités fondamentales des Devtools angulaires, mais il y a plus à explorer. Pour plus de détails et un aperçu complet de ce que propose Angular Devtools, visitez le Documentation officielle Angular Devtoolsqui a également servi de référence aux images utilisées dans cet article.