Analiza las pérdidas de memoria con agentes de IA

Matthias Rohmer
José Luis Zapata

Herramientas para desarrolladores de Chrome para agentes permite que tu agente de programación analice y corrija las fugas de memoria del cliente (incluidos JavaScript y WebAssembly) en tu aplicación. Si automatizas la recopilación y el análisis de las instantáneas de montón, tu agente puede identificar los objetos que no se recopilan correctamente y sugerir la refactorización de código segmentada.

En un flujo de trabajo Agentic Workflows, tu agente de programación toma varias instantáneas en diferentes estados de la aplicación y usa herramientas de análisis especializadas.

Habilita las herramientas de depuración de memoria

De forma predeterminada, Herramientas para desarrolladores de Chrome para agentes solo expone la herramienta take_heapsnapshot. Las herramientas que analizan las instantáneas de montón (por ejemplo, compare_heapsnapshots, get_heapsnapshot_summary y get_heapsnapshot_retaining_paths) solo están disponibles cuando inicias el servidor con la marca --memoryDebugging. Sin esta marca, tu agente puede capturar instantáneas, pero no puede analizarlas.

Para habilitar las herramientas de depuración de memoria, agrega --memoryDebugging a los argumentos del servidor:

"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]

Para obtener más opciones, consulta Configuración.

Patrones comunes de fugas de memoria

El análisis de memoria se enfoca en encontrar patrones de fugas comunes, incluidos los siguientes:

  • Objetos de escucha de eventos no borrados: Objetos de escucha de eventos adjuntos a objetos globales (como window o document) que impiden la recolección de elementos no utilizados
  • Nodos DOM separados: Nodos quitados del árbol de documentos, pero a los que aún hace referencia una variable de JavaScript
  • Variables globales no intencionales: Variables declaradas sin el alcance adecuado que permanecen en la memoria para siempre
  • Cierres: Cierres que, sin intención, conservan referencias a objetos grandes en su propio alcance
  • Estructuras de datos no delimitadas: Estructuras de datos que se usan para el almacenamiento en caché y que crecen sin límites

Consideraciones para el análisis de memoria

Cuando uses el análisis de memoria, ten en cuenta lo siguiente:

  • No leas instantáneas sin procesar directamente: No permitas que tu agente lea archivos .heapsnapshot sin procesar directamente. Son demasiado grandes y superan los límites de contexto. La habilidad de depuración de fugas de memoria indica explícitamente a los agentes que eviten leer estos archivos.

  • La metodología de tres instantáneas: Para encontrar fugas de manera confiable, tu agente suele necesitar capturar tres instantáneas: una línea de base antes de la acción, un objetivo después de la acción y una instantánea final después de revertir la acción. Ten en cuenta que algunas acciones, como las que activan los temporizadores (setTimeout) o las animaciones (requestAnimationFrame), se producen sin interacción del usuario y es posible que no requieran un paso de reversión.

    Ten en cuenta que algunas acciones, como las que activan los temporizadores (setTimeout) o las animaciones (requestAnimationFrame), se producen sin interacción del usuario y pueden aumentar el uso de memoria.

  • Verifica antes de corregir: Siempre revisa los resultados del agente para asegurarte de que las acciones propuestas sean aplicables y correctas para la lógica de tu aplicación. Por ejemplo, confirma si un nodo separado forma parte de una caché intencional antes de indicarle al agente que anule las referencias.

Casos de uso para el análisis de fugas de memoria

Indica a tu agente que cree perfiles de memoria durante las acciones repetitivas, incluidos los temporizadores y las interacciones del usuario, en lugar de tomar instantáneas de forma manual y diferenciarlas a mano. Integra el análisis de memoria en tu proceso de depuración con estos flujos de trabajo.

Nota: Los pasos de ejecución del agente son ejemplos de comportamiento potencial. Tu agente puede actuar de manera diferente.

Detecta objetos de escucha de eventos no borrados durante la navegación

Las aplicaciones de una sola página (SPA) suelen tener fugas de memoria cuando los desarrolladores olvidan quitar los objetos de escucha de eventos globales después de que se desinstala un componente. Puedes indicarle a tu agente que verifique que la memoria se libere correctamente cuando se navega entre vistas.

Ejemplo de instrucción:

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.

Ejecución del agente de ejemplo: Tu agente toma una instantánea de montón de la línea de base en la página principal, navega al panel y vuelve a la página principal para tomar una instantánea final. Luego, usa herramientas de análisis internas para evaluar instantáneas, detecta que nunca se borró un agente de escucha scroll adjunto al objeto window y proporciona el código específico para llamar a removeEventListener en la función de limpieza de tu componente.

Identifica nodos DOM separados en componentes de la IU

Los modales, los menús desplegables y los componentes de la IU complejos suelen dejar nodos DOM separados si se conservan las referencias a ellos en variables de JavaScript después de que se quitan del DOM.

Ejemplo de instrucción:

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.

Ejecución del agente de ejemplo: Tu agente interactúa con el modal de configuración mientras recopila las instantáneas de línea de base, objetivo y final requeridas. El análisis revela varios objetos en crecimiento etiquetados como HTMLDivElement separados. El agente te informa sobre el hallazgo y te pide que lo confirmes antes de cambiar el código para establecer las variables que contienen las referencias DOM en null.

Encuentra cachés no delimitadas en interacciones continuas

Las funciones como el desplazamiento infinito o la recuperación continua de datos pueden tener fugas de memoria si los arrays o mapas subyacentes crecen de forma indefinida sin un límite.

Ejemplo de instrucción:

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.

Ejecución del agente de ejemplo: Tu agente analiza el estado de la memoria antes y después del desplazamiento. Identifica un cierre que captura sin intención un array grande que crece sin límites. El agente sugiere implementar límites de almacenamiento en caché o usar un WeakMap para los datos asociados con los ciclos de vida de los objetos para permitir la recolección de elementos no utilizados adecuada.

Depura las fugas de memoria en los procesos en segundo plano

Los temporizadores de animación y en segundo plano pueden tener fugas de memoria sin interacción explícita del usuario. Puedes indicarle a tu agente que supervise el crecimiento de la memoria a lo largo del tiempo para encontrar fugas de memoria para estos procesos.

Ejemplo de instrucción:

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

Ejecución del agente de ejemplo: Tu agente explora la aplicación de lienzo y toma automáticamente instantáneas periódicas para supervisar el uso de memoria a lo largo del tiempo. Analiza el montón y determina que el bucle de renderización envía nuevas mallas de WebGL a un array en cada fotograma sin recopilar los anteriores, lo que sugiere optimizaciones para la reutilización de objetos.