Как анализировать утечки памяти с помощью ИИ-агентов

Matthias Rohmer
José Luis Zapata

Инструменты разработчика Chrome для агентов позволяют агенту по написанию кода анализировать и устранять клиентские утечки памяти (в том числе JavaScript и WebAssembly) в вашем приложении. Автоматизируя сбор и анализ снимков кучи, агент может выявлять объекты, которые не удаляются сборщиком мусора, и предлагать целенаправленное рефакторинг кода.

В рабочем процессе с агентом по программированию создается несколько снимков экрана в разных состояниях приложения и используются специализированные инструменты анализа.

Как включить инструменты отладки памяти

По умолчанию инструменты разработчика Chrome для агентов предоставляют доступ только к инструменту take_heapsnapshot. Инструменты для анализа снимков кучи (например, compare_heapsnapshots, get_heapsnapshot_summary и get_heapsnapshot_retaining_paths) доступны, только если вы запустили сервер с флагом --memoryDebugging. Без этого флага агент может делать снимки, но не может их анализировать.

Чтобы включить инструменты отладки памяти, добавьте --memoryDebugging в аргументы сервера:

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

Дополнительные параметры приведены в разделе Конфигурация.

Распространенные шаблоны утечки памяти

Анализ памяти позволяет выявлять распространенные шаблоны утечек, в том числе:

  • Неочищенные прослушиватели событий. Прослушиватели событий, прикрепленные к глобальным объектам (таким как window или document), которые препятствуют сборке мусора.
  • Отделенные узлы DOM. Узлы, удаленные из дерева документа, но на которые по-прежнему ссылается переменная JavaScript.
  • Непреднамеренные глобальные переменные. Переменные, объявленные без надлежащей области видимости, которые остаются в памяти навсегда.
  • Замыкания. Замыкания, которые непреднамеренно сохраняют ссылки на большие объекты в своей области видимости.
  • Структуры данных без ограничений. Структуры данных, используемые для кеширования, которые растут без ограничений.

Что нужно учитывать при анализе памяти

При анализе памяти учитывайте следующее:

  • Не разрешайте агенту читать необработанные снимки напрямую. Не разрешайте агенту читать необработанные файлы .heapsnapshot напрямую. Они слишком большие и превышают лимиты контекста. Навык отладки утечки памяти явно указывает агентам не читать эти файлы.

  • Метод трех снимков. Чтобы надежно обнаружить утечки, агенту обычно нужно сделать три снимка: базовый до действия, целевой после действия и финальный после отмены действия. Обратите внимание, что некоторые действия, например запускаемые таймерами (setTimeout) или анимацией (requestAnimationFrame), происходят без взаимодействия с пользователем и могут не требовать шага отмены.

    Обратите внимание, что некоторые действия, например запущенные таймерами (setTimeout) или анимацией (requestAnimationFrame), происходят без взаимодействия с пользователем и могут увеличивать использование памяти.

  • Проверяйте перед исправлением. Всегда проверяйте результаты работы агента, чтобы убедиться, что предложенные им действия применимы и корректны для логики вашего приложения. Например, перед тем как дать агенту команду удалить ссылки, убедитесь, что отсоединенный узел является частью намеренного кеша.

Примеры использования анализа утечки памяти

Поручите агенту профилировать память во время повторяющихся действий, включая таймеры и взаимодействия с пользователем, вместо того чтобы вручную делать снимки и сравнивать их. Интегрируйте анализ памяти в процесс отладки, используя следующие рабочие процессы.

Примечание. Приведенные ниже шаги выполнения агента – это примеры возможного поведения. Ваш агент может действовать иначе.

Как обнаруживать не удаленные прослушиватели событий во время навигации

В одностраничных приложениях (SPA) часто происходит утечка памяти, когда разработчики забывают удалить глобальные прослушиватели событий после отключения компонента. Вы можете поручить агенту проверить, правильно ли освобождается память при переходе между представлениями.

Пример запроса:

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.

Пример выполнения агента. Ваш агент делает базовый снимок кучи на главной странице, переходит на страницу статистики и возвращается на главную страницу, чтобы сделать финальный снимок. Затем с помощью внутренних инструментов анализа он оценивает снимки, определяет, что слушатель scroll, прикрепленный к объекту window, никогда не очищался, и предоставляет код для вызова removeEventListener в функции очистки компонента.

Как найти отсоединенные узлы DOM в компонентах интерфейса

Модальные окна, раскрывающиеся списки и сложные компоненты интерфейса часто оставляют после себя отсоединенные узлы DOM, если ссылки на них хранятся в переменных JavaScript после их удаления из DOM.

Пример запроса:

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.

Пример выполнения агента. Агент взаимодействует с модальным окном настроек, собирая необходимые базовые, целевые и конечные снимки. В результате анализа выявляется несколько растущих объектов с пометкой Detached HTMLDivElement. Агент сообщает вам о находке и просит подтвердить, что нужно изменить код и присвоить переменным, содержащим ссылки на DOM, значение null.

Как найти неограниченные кеши в непрерывных взаимодействиях

Такие функции, как бесконечная прокрутка или непрерывное получение данных, могут привести к утечке памяти, если базовые массивы или карты будут расти бесконечно без ограничений.

Пример запроса

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.

Пример работы агента. Ваш агент анализирует состояние памяти до и после прокрутки. Он определяет замыкание, которое непреднамеренно захватывает большой массив, растущий без ограничений. Агент предлагает реализовать ограничения на кеширование или использовать WeakMap для данных, связанных с жизненными циклами объектов, чтобы обеспечить правильную сборку мусора.

Отладка утечек памяти в фоновых процессах

Таймеры анимации и фоновые таймеры могут вызывать утечку памяти без явного взаимодействия с пользователем. Вы можете настроить агента на отслеживание роста памяти с течением времени, чтобы найти утечки памяти для этих процессов.

Пример запроса

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

Пример работы агента. Ваш агент изучает приложение Canvas и автоматически делает периодические снимки, чтобы отслеживать использование памяти с течением времени. Он анализирует кучу и определяет, что цикл отрисовки добавляет новые сетки WebGL в массив в каждом кадре, не удаляя предыдущие, и предлагает оптимизировать повторное использование объектов.