Chrome DevTools for agents permet à votre agent de codage d'analyser et de corriger les fuites de mémoire côté client (y compris JavaScript et WebAssembly) dans votre application. En automatisant la collecte et l'analyse des instantanés de segment de mémoire, votre agent peut identifier les objets qui ne sont pas correctement récupérés et suggérer une refactorisation ciblée du code.
Dans un workflow agentique, votre agent de codage prend plusieurs instantanés dans différents états de l'application et utilise des outils d'analyse spécialisés.
Activer les outils de débogage de la mémoire
Par défaut, Chrome DevTools for agents n'expose que l'outil take_heapsnapshot. Les outils qui analysent les instantanés de segment de mémoire (par exemple, compare_heapsnapshots, get_heapsnapshot_summary et get_heapsnapshot_retaining_paths) ne sont disponibles que lorsque vous démarrez le serveur avec l'indicateur --memoryDebugging. Sans cet indicateur, votre agent peut capturer des instantanés, mais pas les analyser.
Pour activer les outils de débogage de la mémoire, ajoutez --memoryDebugging aux arguments de votre serveur :
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
Pour en savoir plus, consultez la section Configuration.
Schémas courants de fuite de mémoire
L'analyse de la mémoire vise à identifier les schémas de fuite courants, y compris les suivants :
- Écouteurs d'événements non effacés : écouteurs d'événements associés à des objets globaux (tels que
windowoudocument) qui empêchent la collecte des déchets. - Nœuds DOM détachés : nœuds supprimés de l'arborescence du document, mais toujours référencés par une variable JavaScript.
- Variables globales involontaires : variables déclarées sans portée appropriée qui restent en mémoire pour toujours.
- Fermetures : fermetures qui conservent involontairement des références à des objets volumineux dans leur propre champ d'application.
- Structures de données illimitées : structures de données utilisées pour la mise en cache qui se développent sans limites.
Points à prendre en compte pour l'analyse de la mémoire
Lorsque vous utilisez l'analyse de la mémoire, gardez les points suivants à l'esprit :
Ne lisez pas directement les instantanés bruts : ne laissez pas votre agent lire directement les fichiers
.heapsnapshotbruts. Ils sont trop volumineux et dépassent les limites de contexte. La compétence de débogage des fuites de mémoire indique explicitement aux agents d'éviter de lire ces fichiers.Méthodologie à trois instantanés : pour détecter les fuites de manière fiable, votre agent doit généralement capturer trois instantanés : une référence avant l'action, une cible après l'action et un instantané final après l'annulation de l'action. Notez que certaines actions, telles que celles déclenchées par des minuteurs (
setTimeout) ou des animations (requestAnimationFrame), se produisent sans interaction de l'utilisateur et peuvent ne pas nécessiter d'étape d'annulation.Notez que certaines actions, telles que celles déclenchées par des minuteurs (
setTimeout) ou des animations (requestAnimationFrame), se produisent sans interaction de l'utilisateur et peuvent toujours augmenter l'utilisation de la mémoire.Vérifiez avant de corriger : examinez toujours les résultats de l'agent pour vous assurer que les actions proposées sont applicables et correctes pour la logique de votre application. Par exemple, vérifiez si un nœud détaché fait partie d'un cache intentionnel avant de demander à l'agent d'annuler les références.
Cas d'utilisation de l'analyse des fuites de mémoire
Demandez à votre agent de profiler la mémoire lors d'actions répétitives, y compris les minuteurs et les interactions utilisateur, au lieu de prendre manuellement des instantanés et de les comparer à la main. Intégrez l'analyse de la mémoire à votre processus de débogage à l'aide de ces workflows.
Remarque : Les étapes d'exécution de l'agent sont des exemples de comportement potentiel. Votre agent peut agir différemment.
Détecter les écouteurs d'événements non effacés pendant la navigation
Les applications à une seule page (SPA) perdent souvent de la mémoire lorsque les développeurs oublient de supprimer les écouteurs d'événements globaux après le démontage d'un composant. Vous pouvez demander à votre agent de vérifier que la mémoire est correctement libérée lors de la navigation entre les vues.
Exemple de prompt :
Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.
Exemple d'exécution de l'agent : votre agent prend un instantané de segment de mémoire de référence sur la page d'accueil, accède au tableau de bord, puis revient à la page d'accueil pour prendre un instantané de segment de mémoire final. Il utilise ensuite des outils d'analyse internes pour évaluer les instantanés, détecte qu'un écouteur scroll associé à l'objet window n'a jamais été effacé et fournit le code spécifique pour appeler removeEventListener dans la fonction de nettoyage de votre composant.
Identifier les nœuds DOM détachés dans les composants d'interface utilisateur
Les fenêtres modales, les listes déroulantes et les composants d'interface utilisateur complexes laissent souvent des nœuds DOM détachés si des références à ceux-ci sont conservées dans des variables JavaScript après leur suppression du DOM.
Exemple de prompt :
Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.
Exemple d'exécution de l'agent : votre agent interagit avec la fenêtre modale des paramètres tout en collectant les instantanés de référence, cible et final requis. L'analyse révèle plusieurs objets en croissance libellés Detached HTMLDivElement. L'agent vous informe de ce résultat et vous demande votre confirmation avant de modifier le code pour définir les variables contenant les références DOM sur null.
Rechercher les caches illimités dans les interactions continues
Les fonctionnalités telles que le défilement infini ou la récupération continue de données peuvent entraîner une fuite de mémoire si les tableaux ou les cartes sous-jacents se développent indéfiniment sans limite.
Exemple de prompt :
Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.
Exemple d'exécution de l'agent : votre agent analyse l'état de la mémoire avant et après le défilement. Il identifie une fermeture qui capture involontairement un grand tableau qui se développe sans limites. L'agent suggère d'implémenter des limites de mise en cache ou d'utiliser un WeakMap pour les données associées aux cycles de vie des objets afin de permettre une collecte des déchets appropriée.
Déboguer les fuites de mémoire dans les processus en arrière-plan
Les minuteurs d'animation et d'arrière-plan peuvent entraîner une fuite de mémoire sans interaction explicite de l'utilisateur. Vous pouvez demander à votre agent de surveiller la croissance de la mémoire au fil du temps pour détecter les fuites de mémoire pour ces processus.
Exemple de prompt :
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
Exemple d'exécution de l'agent : votre agent explore l'application de canevas et prend automatiquement des instantanés périodiques pour surveiller l'utilisation de la mémoire au fil du temps. Il analyse le tas et identifie que la boucle de rendu envoie de nouveaux maillages WebGL à un tableau sur chaque frame sans collecter les déchets des précédents, ce qui suggère des optimisations pour la réutilisation des objets.