chromedevtools/memory-leak-debugging

Depuración de Fugas de Memoria

Esta habilidad proporciona orientación experta y flujos de trabajo para encontrar, diagnosticar y corregir fugas de memoria en aplicaciones JavaScript y Node.js utilizando las herramientas MCP de Chrome DevTools.

Prerrequisitos

Las herramientas avanzadas de depuración de memoria (compare_heapsnapshots, get_heapsnapshot_details, etc.) solo están disponibles cuando el servidor se inicia con la bandera --memoryDebugging. Primero verifica si estas herramientas están disponibles; si no, intenta leer el archivo de configuración MCP para comprobar si --memoryDebugging está habilitado.

Principios Fundamentales

• Prefiere las herramientas MCP de memoria: NO intentes leer archivos .heapsnapshot directamente, ya que son extremadamente grandes y consumirán demasiados tokens. Utiliza las herramientas de instantáneas del heap de Chrome DevTools MCP para resumir, comparar e inspeccionar instantáneas.
• Aísla la Fuga: Determina si la fuga está en el navegador (lado del cliente) o en Node.js (lado del servidor).
• Culpables Comunes: Busca nodos DOM desconectados, clausuras no gestionadas, variables globales, listeners de eventos que no se eliminan y cachés que crecen sin límite. Nota: Los nodos DOM desconectados a veces son cachés intencionales; siempre pregunta al usuario antes de anularlos.
• Cierra las Instantáneas Cargadas: Las instantáneas del heap pueden ser grandes. Después de completar una investigación, usa close_heapsnapshot para cada instantánea cargada y liberar la memoria que ocupa el servidor MCP.

Flujos de Trabajo

1. Captura de Instantáneas

Al investigar una fuga de memoria en una aplicación web frontend, utiliza las herramientas de chrome-devtools-mcp para interactuar con la aplicación y tomar instantáneas.

• Usa herramientas a nivel de página como click, navigate_page, fill, etc. (especificando pageId) para manipular la página al estado deseado.
• Revierte la página al estado original después de las interacciones para ver si la memoria se libera.
• Repite las mismas interacciones de usuario 10 veces para amplificar la fuga.
• Usa take_heapsnapshot (con pageId) para guardar archivos .heapsnapshot en disco en los estados de línea base, objetivo (después de las acciones) y final (después de revertir las acciones).

2. Comparación de Instantáneas

Una vez que hayas generado archivos .heapsnapshot usando take_heapsnapshot, compáralos con las herramientas de memoria de Chrome DevTools MCP.

• Empieza con get_heapsnapshot_summary para cada instantánea y confirma que los archivos se cargan y compara los totales de alto nivel.
• Usa compare_heapsnapshots para comparar instantáneas de línea base y objetivo. Comienza sin classIndex para obtener el diff resumido, luego solicita diffs detallados de clase solo para crecimiento sospechoso especificando classIndex.
• Usa la salida resumida de compare_heapsnapshots antes de profundizar en IDs de nodo específicos.

3. Inspección de Retenedores y Cadenas de Dominación

Cuando una clase o tipo de objeto crece inesperadamente, inspecciona la cadena de retención y los dominadores con las herramientas MCP antes de cambiar el código.

• Usa get_heapsnapshot_class_nodes para listar instancias de la clase sospechosa.
• Usa get_heapsnapshot_retainers, get_heapsnapshot_retaining_paths, get_heapsnapshot_dominators y get_heapsnapshot_edges para entender por qué los nodos representativos aún son alcanzables.
• Usa get_heapsnapshot_object_details con un nodeId específico para recuperar metadatos detallados del objeto (tamaño, tipo, distancia y desconexión DOM).
• Usa get_heapsnapshot_duplicate_strings cuando el crecimiento de cadenas domina el diff.
• Lee references/common-leaks.md para ejemplos de fugas de memoria comunes y cómo corregirlas una vez que la ruta de retención apunta al código de la aplicación.

4. Análisis Avanzado y Filtros Categorizados

Usa las herramientas MCP de memoria y filtros integrados para identificar categorías específicas de fugas directamente, sin herramientas externas.

• Usa get_heapsnapshot_details o get_heapsnapshot_class_nodes con filterName para apuntar a causas comunes de fugas:
  • objectsRetainedByDetachedDomNodes: Identifica elementos DOM desconectados retenidos en memoria.
  • objectsRetainedByEventHandlers: Identifica objetos mantenidos vivos por listeners de eventos no eliminados.
  • objectsRetainedByContexts: Identifica objetos atrapados en clausuras o contextos de ejecución.
  • objectsRetainedByConsole: Identifica objetos retenidos por el registro de consola.