Инструменты разработчика Chrome для агентов позволяют вашему агенту анализировать и исправлять утечки памяти на стороне клиента (включая JavaScript и WebAssembly) в вашем приложении. Автоматизируя сбор и анализ снимков кучи, ваш агент может точно определить объекты, которые некорректно собираются сборщиком мусора, и предложить целевую рефакторизацию кода.
В агентном рабочем процессе ваш программист делает множество снимков состояния приложения в разных его состояниях и использует специализированные инструменты анализа.
Типичные схемы утечек памяти
Анализ памяти направлен на выявление распространенных моделей утечки памяти, в том числе:
- Неочищенные обработчики событий: обработчики событий, прикрепленные к глобальным объектам (таким как
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.
Пример выполнения агента: Ваш агент взаимодействует с модальным окном настроек, одновременно собирая необходимые базовые, целевые и конечные снимки. Анализ выявляет несколько увеличивающихся объектов, помеченных как «Отсоединенный 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-сетки в массив на каждом кадре без сборки мусора для предыдущих, предлагая оптимизации для повторного использования объектов.