DevTools : regarder dans votre application

Chrome DevTools est intégré au navigateur et fonctionne sur n’importe quel site, y compris les applications publiées. Il vous montre le DOM, les requêtes, ce qui est stocké dans le navigateur, ce que consomme la page et ce qui reste en mémoire. Angular DevTools est une extension à part, qui ajoute un onglet « Angular » avec l’arbre des composants, le profiler, les injecteurs et les routes.

Les étapes ci-dessous utilisent les noms exacts des boutons de Chrome DevTools, tirés de son code source. Chaque section propose un exercice à faire directement sur cette page.

Ouvrir DevTools et trouver n’importe quel panneau

• Ouvrez DevTools avec F12 ou Ctrl+Shift+I (Windows, Linux), ou Cmd+Option+I (Mac). Ou clic droit sur la page → Inspect (Inspecter).
• Les panneaux sont des onglets en haut : Elements, Console, Sources, Network, Performance, Memory, Application. Ceux qui ne tiennent pas sont sous ».
• Le chemin le plus rapide vers tout : le menu de commandes, avec Ctrl+Shift+P ou Cmd+Shift+P. Tapez « memory » et choisissez Show Memory, ou « performance monitor » et choisissez Show Performance monitor.
• Esc ouvre et ferme le drawer du bas, avec la Console. Vous voyez ainsi la console à côté de n’importe quel autre panneau.

S’exercer sur cette page

Gardez DevTools ouvert à côté de la page. Chaque carte dit ce que vous appuyez ici et ce que vous cherchez là-bas.

Elements : ce qu’Angular a rendu

Elements montre le DOM tel qu’il est maintenant, pas le HTML envoyé par le serveur. Quelques traces qu’Angular y laisse :

• L’élément racine (<app-root>) porte un attribut ng-version avec la version exacte d’Angular. Sur ce site : 22.2.2.
• Les attributs _nghost-ng-c… et _ngcontent-ng-c… viennent de l’encapsulation des styles (mode Emulated). Dans le volet Styles à droite, les sélecteurs ressemblent à .btn[_ngcontent-ng-c…].
• Les commentaires vides <!----> sont les ancres d’Angular pour @if, @for et @defer : l’endroit où il insère ou retire du contenu.
• L’élément sélectionné est disponible dans la Console sous le nom $0. Les attributs et le texte qui changent clignotent un instant dans Elements : c’est ainsi que vous voyez ce qu’Angular met à jour.

Console : les utilitaires ng (développement uniquement)

Dans votre application lancée avec ng serve, Angular place un objet global ng dans la page. Sélectionnez un élément dans Elements, puis dans la Console :

// Elements : sélectionnez un élément ; dans la Console c’est $0 (développement uniquement)
ng.getComponent($0)          // le composant dont $0 est l’hôte
ng.getOwningComponent($0)    // le composant dont le template contient $0
ng.getDirectives($0)         // les directives sur $0
ng.getInjector($0)           // l’injecteur de l’élément : .get(UnService)
ng.getListeners($0)          // les listeners posés par Angular sur $0
ng.getRootComponents()       // les composants racines

const c = ng.getComponent($0);
c.count.set(42);             // un signal s’écrit directement ; Angular rend tout seul
c.title = 'Test';            // une propriété simple a besoin d’applyChanges
ng.applyChanges(c);

Sur un build de production, ces fonctions n’existent pas. Ce n’est pas un bug : elles sont retirées exprès pour ne pas alourdir l’application.

Network : ce que l’application demande

Network n’enregistre que tant qu’il est ouvert. Si vous l’ouvrez après le chargement de la page, rechargez-la.

• Les filtres en haut (Fetch/XHR, JS, CSS, Img…) et le champ texte ne laissent que les requêtes qui vous intéressent.
• Cliquez sur une requête : Headers (URL, statut, en-têtes), Payload (ce que vous avez envoyé), Preview et Response (ce qui est revenu), Initiator (le code qui l’a lancée), Timing (où le temps est passé).
• Keep log (dans les anciennes versions : Preserve log) garde la liste à la navigation et au rechargement. Disable cache contourne le cache tant que DevTools est ouvert.
• Le menu Throttling simule un réseau plus lent : Fast 4G, Slow 4G, 3G ou Offline. Vous voyez ainsi les skeletons, les états de chargement et ce qui se passe sans réseau.

Application : ce que l’application garde dans le navigateur

• Storage → Local storage / Session storage → l’adresse du site : les clés et valeurs, que vous pouvez modifier ou supprimer.
• Cookies, IndexedDB et Cache storage sont au même endroit. Cache storage est l’endroit où un Service Worker garde les fichiers pour le hors-ligne.
• La section Service workers montre le worker actif. Update on reload force la nouvelle version à chaque rechargement, et Bypass for network le contourne. Les deux sont pratiques pendant que vous travaillez dessus.
• Storage → Clear site data efface tout ce que le site a enregistré. C’est le moyen le plus sûr de tester une « première visite ».

Performance monitor : la vérification rapide

Avant tout snapshot, regardez les chiffres en direct :

1. Menu de commandes (Ctrl/Cmd+Shift+P) → « performance monitor » → Show Performance monitor. Il s’ouvre en bas, dans le drawer.
2. Surveillez JS heap size, DOM nodes et JS event listeners. Un clic sur un nom affiche ou masque sa courbe.
3. Dans le laboratoire ci-dessous, correctifs décochés, appuyez sur Ouvrir et fermer 10 fois. JS event listeners augmente de 10 et y reste. Appuyez sur Nettoyer les zombies : il redescend. Avec tous les correctifs cochés, il n’augmente pas du tout.

Memory : une fuite trouvée pas à pas

Le laboratoire de la leçon sur les fuites mémoire, ici, pour que vous ayez quelque chose à mesurer. Chaque widget fermé avec les correctifs décochés laisse derrière lui un timer, un listener et un abonnement qui gardent le composant en mémoire.

Heap snapshot et Comparison

1. Ouvrez le panneau Memory. Sous Select profiling type, choisissez Heap snapshot.
2. Cliquez sur l’icône de corbeille, Collect garbage, puis sur Take snapshot. Snapshot 1 apparaît à gauche.
3. Sur la page, correctifs décochés, appuyez sur Ouvrir et fermer 10 fois et attendez la fin.
4. De nouveau Collect garbage et Take snapshot : Snapshot 2 apparaît.
5. Snapshot 2 sélectionné, passez le premier menu de la barre du haut de Summary à Comparison. Le menu voisin indique avec quoi vous comparez : Snapshot 1.
6. Tapez un nom du tableau ci-dessous dans Filter by class et regardez les colonnes # New et # Delta.
7. Appuyez sur Nettoyer les zombies, prenez Snapshot 3 et comparez-le à Snapshot 2 : les mêmes lignes apparaissent maintenant sous # Deleted.

Qui garde l’objet : Retainers

Dépliez une ligne et cliquez sur une instance. Le volet Retainers en bas montre qui la garde en vie : les lignes du haut sont les références directes, et en les dépliant vous remontez la chaîne vers quelque chose qui vit longtemps (Window, un listener, un timer). La colonne Distance indique à combien d’étapes se trouve window. La fuite, c’est le maillon que votre code aurait dû rompre à la destruction.

Plus direct : Detached elements

1. Dans Memory → Select profiling type, choisissez Detached elements.
2. Répétez l’action sur la page, puis appuyez sur Get detached elements.
3. La liste montre les éléments retirés de la page mais encore référencés depuis JavaScript. Ici : un <app-leaky-widget> par widget fermé.

Performance : ce qui se passe dans le temps

• Record enregistre pendant que vous faites quelque chose sur la page. Record and reload recharge la page et enregistre le démarrage.
• Cochez Show memory timeline pour voir le heap JS, les documents, les nœuds et les listeners sur le même axe. Une fuite ressemble à un escalier qui monte et ne redescend jamais.
• En développement, Angular peut ajouter sa propre piste Angular, avec composants, change detection et hooks. Activez-la avec ng.enableProfiling() dans la Console, avant Record.

// dans la Console, dans votre application lancée avec ng serve :
ng.enableProfiling();

// ou dans main.ts, pour capter aussi le démarrage :
import { enableProfiling } from '@angular/core';

enableProfiling();
bootstrapApplication(App, appConfig);

Angular DevTools

L’extension voit l’application comme Angular la voit : composants, inputs, signals, injecteurs, routes.

1. Installez Angular DevTools depuis le Chrome Web Store (il existe aussi pour Firefox).
2. Lancez votre application avec ng serve, ouvrez DevTools et cherchez l’onglet Angular, éventuellement sous ». Les extensions ne tournent pas sur la page « Nouvel onglet » du navigateur.
3. Sur un build de production, ce site compris, vous verrez seulement le message « We detected an application built with production configuration ». C’est normal.

• $ng0 dans la Console est le composant sélectionné dans Angular DevTools, $ng1 le précédent.
• L’icône d’inspection dans le coin de l’extension : survolez la page et voyez quel composant s’y trouve.
• Un double-clic sur un composant vous mène à son élément dans Elements ; l’icône en haut à droite, à sa source dans Sources.
• Show Signal Graph, en tête du volet des propriétés, dessine les signals, computeds et effects du composant et qui lit qui (Angular 19+). Donnez-leur un debugName pour qu’ils aient des noms lisibles.

Les sources habituelles de fuites et comment fermer chacune sont dans Fuites mémoire. Que faire une fois trouvé ce qui est lent : Performance et Change detection.

Pièges fréquents

• Chercher le nom de votre classe sur un build de production. Il n’y est pas : cherchez par balise ou type natif, ou lancez l’application avec ng serve.
• Comparer des snapshots sans Collect garbage avant : le heap monte et descend tout seul, et les petites différences ne veulent rien dire.
• Répéter l’action une seule fois. Une fuite est un nombre qui augmente du même pas à chaque répétition. Répétez 10 fois et cherchez +10.
• Ouvrir Network après le chargement de la page et croire que rien n’a été demandé. Network n’enregistre que tant qu’il est ouvert : rechargez la page.

Aide-mémoire

F12 · Ctrl+Shift+I · Cmd+Option+I            ouvrir DevTools
Ctrl+Shift+C · Cmd+Shift+C                   choisir un élément dans la page
Ctrl+Shift+P · Cmd+Shift+P                   le menu de commandes
Esc                                          le drawer avec la Console

Network       Fetch/XHR · Keep log · Disable cache · Throttling
Application   Storage → Local storage · Service workers · Clear site data
Perf monitor  JS heap size · DOM nodes · JS event listeners
Memory        Heap snapshot → Take snapshot → Comparison → Filter by class
Memory        Detached elements → Get detached elements
Performance   Record · Record and reload · Show memory timeline

développement uniquement :
  ng.getComponent($0) · ng.applyChanges(c) · ng.enableProfiling()
  Angular DevTools: Components · Profiler · Injector Tree · Router Tree · $ng0