Analyser les fuites de mémoire avec des agents d'IA

Matthias Rohmer

José Luis Zapata

Les outils pour les développeurs Chrome pour les agents permettent à 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 tas, votre agent peut identifier les objets qui ne sont pas correctement collectés par le garbage collector 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 d'application et utilise des outils d'analyse spécialisés.

Modèles courants de fuites de mémoire

L'analyse de la mémoire se concentre sur la recherche de schémas de fuite courants, y compris :

• Écouteurs d'événements non effacés : écouteurs d'événements associés à des objets globaux (comme window ou document) qui empêchent la récupération de mémoire.
• 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 et qui restent en mémoire pour toujours.
• Fermetures : fermetures qui conservent involontairement des références à des objets volumineux dans leur propre portée.
• Structures de données non liées : structures de données utilisées pour la mise en cache et qui se développent sans limites.

Remarques concernant l'analyse de la mémoire

Lorsque vous utilisez l'analyse de la mémoire, tenez compte des points suivants :

• Ne lisez pas directement les instantanés bruts : n'autorisez pas votre agent à lire directement les fichiers .heapsnapshot bruts. 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 : un instantané de référence avant l'action, un instantané cible après l'action et un instantané final après l'annulation de l'action. Notez que certaines actions, comme celles déclenchées par des minuteurs (setTimeout) ou des animations (requestAnimationFrame), se produisent sans interaction de l'utilisateur et ne nécessitent pas forcément d'étape d'annulation.

  Notez que certaines actions, comme celles déclenchées par des minuteurs (setTimeout) ou des animations (requestAnimationFrame), se produisent sans interaction de l'utilisateur et peuvent quand même augmenter l'utilisation de la mémoire.

• Vérifiez avant de corriger : examinez toujours les conclusions de l'agent pour vous assurer que les actions qu'il propose 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 de définir les références sur "null".

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 lors de la navigation

Les applications monopages (SPA) fuient 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 requête :

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 d'agent : votre agent prend un instantané de segment de mémoire de base 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 dissociés dans les composants d'interface utilisateur

Les modaux, les menus déroulants 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 requête :

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 d'un 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 du résultat et vous demande de confirmer avant de modifier le code pour définir les variables contenant les références DOM sur null.

Identifier les caches illimités dans les interactions continues

Des fonctionnalités telles que le défilement infini ou la récupération continue de données peuvent entraîner des fuites de mémoire si les tableaux ou les cartes sous-jacents augmentent indéfiniment sans limite.

Exemple de requête :

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.

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 croît sans limites. L'agent suggère d'implémenter des limites de mise en cache ou d'utiliser une WeakMap pour les données associées aux cycles de vie des objets afin de permettre une récupération de mémoire 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 des fuites 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 requête :

Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.

Exemple d'exécution d'un agent : votre agent explore l'application Canvas et prend automatiquement des instantanés périodiques pour surveiller l'utilisation de la mémoire au fil du temps. Il analyse le tas de mémoire et identifie que la boucle de rendu envoie de nouveaux maillages WebGL à un tableau à chaque frame sans collecter les précédents, ce qui suggère des optimisations pour la réutilisation des objets.