Angular DevTools est une extension de navigateur qui fournit des fonctionnalités de débogage et de profilage pour les applications Angular.
Installez Angular DevTools depuis le Chrome Web Store ou depuis Firefox Add-ons.
Vous pouvez ouvrir les DevTools de Chrome ou de Firefox sur n'importe quelle page web en appuyant sur F12 ou Ctrl+Shift+I (Windows ou Linux) et Fn+F12 ou Cmd+Option+I (Mac). Une fois les DevTools du navigateur ouverts et Angular DevTools installé, vous le trouverez dans l'onglet « Angular ».
Utile : La page Nouvel onglet de Chrome n'exécute pas les extensions installées : l'onglet Angular n'apparaîtra donc pas dans les DevTools. Rendez-vous sur n'importe quelle autre page pour le voir.
Ouvrir votre application
Lorsque vous ouvrez l'extension, vous voyez quatre onglets supplémentaires :
| Onglets | Détails |
|---|---|
| Components | Vous permet d'explorer les composants et les directives de votre application, et de prévisualiser ou modifier leur état. |
| Profiler | Vous permet de profiler votre application et de comprendre où se situe le goulot d'étranglement de performances pendant l'exécution de la détection de changements. |
| Injector Tree | Vous permet de visualiser la hiérarchie des injectors : injector d'environnement et element injector |
| Router Tree | Vous permet de visualiser l'arbre de routing de votre application. |
D'autres onglets comme Transfer State sont expérimentaux : ils peuvent être activés dans les paramètres des devtools et ne sont pas encore documentés.
Utile : Si vous utilisez un navigateur basé sur Chromium, l'intégration au panneau Performance pourrait vous intéresser.
Dans le coin supérieur droit d'Angular DevTools se trouve le bouton d'information, qui ouvre un popover. Le popover d'information indique notamment la version d'Angular exécutée sur la page ainsi que la version des devtools.
Application Angular non détectée
Si vous voyez le message d'erreur « Angular application not detected » en ouvrant Angular DevTools, cela signifie que l'extension ne parvient pas à communiquer avec une application Angular sur la page. La raison la plus courante est que la page web que vous inspectez ne contient pas d'application Angular. Vérifiez que vous inspectez la bonne page web et que l'application Angular est en cours d'exécution.
Une application compilée avec la configuration de production a été détectée
Si vous voyez le message d'erreur « We detected an application built with production configuration. Angular DevTools only supports development builds. », cela signifie qu'une application Angular a été trouvée sur la page, mais qu'elle a été compilée avec les optimisations de production. Lors de la compilation pour la production, l'Angular CLI supprime diverses fonctionnalités de débogage afin de réduire la quantité de JavaScript sur la page et d'améliorer les performances. Cela inclut les fonctionnalités nécessaires pour communiquer avec les DevTools.
Pour utiliser les DevTools, vous devez compiler votre application avec les optimisations désactivées. ng serve le fait par défaut.
Si vous devez déboguer une application déployée, désactivez les optimisations de votre build avec l'option de configuration optimization ({"optimization": false}).