Déboguer votre application
L'onglet Components vous permet d'explorer la structure de votre application. Vous pouvez visualiser les instances de composants et de directives dans le DOM, et inspecter ou modifier leur état.
Explorer la structure de l'application
L'arbre de composants affiche la relation hiérarchique entre les composants et directives de votre application.
Cliquez sur les composants ou directives dans l'explorateur de composants pour les sélectionner et prévisualiser leurs propriétés. Angular DevTools affiche les propriétés et les métadonnées à droite de l'arbre de composants.
Pour rechercher un composant ou une directive par son nom, utilisez le champ de recherche au-dessus de l'arbre de composants.
Accéder au nœud host
Pour accéder au host element d'un composant ou d'une directive, double-cliquez dessus dans l'explorateur de composants. Angular DevTools ouvre l'onglet Elements dans Chrome ou l'onglet Inspector dans Firefox, et sélectionne le nœud DOM associé.
Accéder au code source
Pour les composants, Angular DevTools vous permet d'accéder à la définition du composant dans l'onglet Sources (Chrome) et l'onglet Debugger (Firefox). Après avoir sélectionné un composant, cliquez sur l'icône en haut à droite de la vue des propriétés :
Modifier la valeur d'une propriété
Comme dans les DevTools des navigateurs, la vue des propriétés vous permet de modifier la valeur d'un input, d'un output ou d'autres propriétés.
Faites un clic droit sur la valeur de la propriété : si la modification est disponible pour ce type de valeur, un champ de saisie apparaît.
Saisissez la nouvelle valeur et appuyez sur Enter pour l'appliquer à la propriété.
Accéder au composant ou à la directive sélectionné dans la console
En guise de raccourci dans la console, Angular DevTools donne accès aux instances des composants ou directives récemment sélectionnés.
Saisissez $ng0 pour obtenir une référence à l'instance du composant ou de la directive actuellement sélectionné, $ng1 pour l'instance sélectionnée précédemment, $ng2 pour celle sélectionnée avant, et ainsi de suite.
Sélectionner une directive ou un composant
Comme dans les DevTools des navigateurs, vous pouvez inspecter la page pour sélectionner un composant ou une directive. Cliquez sur l'icône Inspect element dans le coin supérieur gauche d'Angular DevTools et survolez un élément DOM de la page. L'extension reconnaît les directives et/ou composants associés et vous permet de sélectionner l'élément correspondant dans l'arbre de composants.
Inspecter les vues différables
En plus des directives, l'arbre des directives inclut aussi les blocs @defer.
Cliquer sur un bloc defer affiche plus de détails dans la barre latérale des propriétés : les différents blocs optionnels (par exemple @loading, @placeholder et @error), les déclencheurs configurés (déclencheurs defer, déclencheurs de préchargement et déclencheurs d'hydratation) et les options de timing comme les valeurs minimum et after.
Hydratation
Lorsque l'hydratation est activée sur votre application SSR/SSG, l'arbre des directives affiche le statut d'hydratation de chaque composant.
En cas d'erreur, un message d'erreur s'affiche sur le composant concerné.
Le statut d'hydratation peut aussi être visualisé directement sur l'application en activant l'overlay.
Voici une illustration des overlays d'hydratation sur une application d'exemple de boutique en ligne Angular.
Déboguer le graphe de signals
Pour visualiser comment chaque signal, computed et effect d'un composant dépend des autres, consultez Déboguer le graphe de signals.