chromedevtools/débogage-de-fuite-mémoire

Débogage de fuite mémoire

Ce skill fournit un guide expert et des workflows pour trouver, diagnostiquer et corriger les fuites mémoire dans les applications JavaScript et Node.js à l'aide des outils MCP de Chrome DevTools.

Prérequis

Les outils avancés de débogage mémoire (compare_heapsnapshots, get_heapsnapshot_details, etc.) ne sont disponibles que lorsque le serveur est démarré avec le flag --memoryDebugging. Vérifiez d'abord si ces outils sont accessibles ; sinon, essayez de lire le fichier de configuration MCP pour vérifier si --memoryDebugging est activé.

Principes fondamentaux

• Privilégier les outils MCP mémoire : NE PAS tenter de lire directement les fichiers .heapsnapshot bruts, car ils sont extrêmement volumineux et consommeraient trop de tokens. Utilisez les outils d'instantané de tas de Chrome DevTools MCP pour résumer, comparer et inspecter les instantanés.
• Isoler la fuite : Déterminez si la fuite se produit côté client (navigateur) ou côté serveur (Node.js).
• Coupables courants : Recherchez les nœuds DOM détachés, les fermetures (closures) non gérées, les variables globales, les écouteurs d'événements non supprimés et les caches qui croissent sans limite. Remarque : Les nœuds DOM détachés sont parfois des caches intentionnels ; demandez toujours à l'utilisateur avant de les annuler.
• Fermer les instantanés chargés : Les instantanés de tas peuvent être volumineux. Après avoir terminé une investigation, utilisez close_heapsnapshot pour chaque instantané chargé afin de libérer la mémoire occupée par le serveur MCP.

Workflows

1. Capture d'instantanés

Lors de l'investigation d'une fuite mémoire dans une application web frontend, utilisez les outils chrome-devtools-mcp pour interagir avec l'application et prendre des instantanés.

• Utilisez des outils scopés par page comme click, navigate_page, fill, etc. (en précisant pageId) pour manipuler la page dans l'état souhaité.
• Revenez à l'état initial de la page après les interactions pour voir si la mémoire est libérée.
• Répétez les mêmes interactions utilisateur 10 fois pour amplifier la fuite.
• Utilisez take_heapsnapshot (avec pageId) pour sauvegarder les fichiers .heapsnapshot sur le disque aux états : baseline, cible (après actions) et final (après retour à l'état initial).

2. Comparaison d'instantanés

Une fois que vous avez généré les fichiers .heapsnapshot avec take_heapsnapshot, comparez-les à l'aide des outils mémoire MCP de Chrome DevTools.

• Commencez par get_heapsnapshot_summary pour chaque instantané afin de confirmer que les fichiers se chargent et de comparer les totaux de haut niveau.
• Utilisez compare_heapsnapshots pour comparer les instantanés baseline et cible. Commencez sans classIndex pour le diff récapitulatif, puis demandez des diffs détaillés par classe uniquement pour les croissances suspectes en spécifiant classIndex.
• Utilisez le résumé de compare_heapsnapshots avant de plonger dans les identifiants de nœuds spécifiques.

3. Inspection des reteneurs et des chaînes de dominators

Lorsqu'une classe ou un type d'objet croît de manière inattendue, inspectez la chaîne de rétention et les dominators avec les outils MCP avant de modifier le code.

• Utilisez get_heapsnapshot_class_nodes pour lister les instances de la classe suspecte.
• Utilisez get_heapsnapshot_retainers, get_heapsnapshot_retaining_paths, get_heapsnapshot_dominators et get_heapsnapshot_edges pour comprendre pourquoi les nœuds représentatifs sont toujours accessibles.
• Utilisez get_heapsnapshot_object_details avec un nodeId spécifique pour récupérer les métadonnées détaillées de l'objet (taille, type, distance et état détaché du DOM).
• Utilisez get_heapsnapshot_duplicate_strings lorsque la croissance des chaînes domine le diff.
• Consultez references/common-leaks.md pour des exemples de fuites mémoire courantes et comment les corriger une fois que le chemin de rétention pointe vers le code de l'application.

4. Analyse avancée et filtres catégorisés

Utilisez les outils mémoire MCP intégrés et les filtres pour cibler directement des catégories de fuites spécifiques, sans outils externes.

• Utilisez get_heapsnapshot_details ou get_heapsnapshot_class_nodes avec filterName pour cibler les causes courantes de fuites :
  • objectsRetainedByDetachedDomNodes : Identifie les éléments DOM détachés retenus en mémoire.
  • objectsRetainedByEventHandlers : Identifie les objets maintenus en vie par des écouteurs d'événements non supprimés.
  • objectsRetainedByContexts : Identifie les objets piégés dans des fermetures (closures) ou des contextes d'exécution.
  • objectsRetainedByConsole : Identifie les objets retenus par l'enregistrement dans la console.