에이전트용 Chrome DevTools를 사용하면 코딩 에이전트가 애플리케이션의 클라이언트 측 메모리 누수 (JavaScript 및 WebAssembly 포함)를 분석하고 수정할 수 있습니다. 힙 스냅샷의 수집 및 분석을 자동화하면 에이전트가 가비지 컬렉션이 제대로 실행되지 않는 객체를 정확히 찾아내고 타겟팅된 코드 리팩터링을 제안할 수 있습니다.
에이전트 워크플로에서 코딩 에이전트는 다양한 애플리케이션 상태에서 여러 스냅샷을 가져오고 전문 분석 도구를 사용합니다.
일반적인 메모리 누수 패턴
메모리 분석은 다음을 비롯한 일반적인 누수 패턴을 찾는 데 중점을 둡니다.
- 정리되지 않은 이벤트 리스너: 가비지 컬렉션을 방지하는 전역 객체(예:
window또는document)에 연결된 이벤트 리스너입니다. - 분리된 DOM 노드: 문서 트리에서 삭제되었지만 JavaScript 변수에서 여전히 참조되는 노드입니다.
- 의도하지 않은 전역 변수: 적절한 범위 지정 없이 선언되어 메모리에 영원히 남아 있는 변수입니다.
- 클로저: 의도치 않게 자체 범위에 큰 객체에 대한 참조를 유지하는 클로저입니다.
- 무한 데이터 구조: 제한 없이 증가하는 캐싱에 사용되는 데이터 구조입니다.
메모리 분석 고려사항
메모리 분석을 사용할 때는 다음 사항에 유의하세요.
원시 스냅샷을 직접 읽지 마세요. 에이전트가 원시
.heapsnapshot파일을 직접 읽도록 허용하지 마세요. 너무 커서 컨텍스트 한도를 초과합니다. 메모리 누수 디버깅 스킬은 상담사에게 이러한 파일을 읽지 않도록 명시적으로 안내합니다.3개 스냅샷 방법: 누수를 안정적으로 찾으려면 일반적으로 에이전트가 세 개의 스냅샷을 캡처해야 합니다. 작업 전 기준선, 작업 후 타겟, 작업을 되돌린 후 최종 스냅샷입니다. 타이머 (
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.
에이전트 실행 예: 에이전트가 홈페이지에서 기준 힙 스냅샷을 가져오고, 대시보드로 이동한 후 다시 홈페이지로 이동하여 최종 스냅샷을 가져옵니다. 그런 다음 내부 분석 도구를 사용하여 스냅샷을 평가하고, window 객체에 연결된 scroll 리스너가 삭제되지 않았음을 감지하고, 구성요소의 정리 함수에서 removeEventListener를 호출하는 특정 코드를 제공합니다.
UI 구성요소에서 분리된 DOM 노드 식별
모달, 드롭다운, 복잡한 UI 구성요소는 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.
에이전트 실행 예: 에이전트가 캔버스 애플리케이션을 탐색하고 주기적으로 스냅샷을 자동으로 찍어 시간 경과에 따른 메모리 사용량을 모니터링합니다. 힙을 분석하고 렌더링 루프가 이전 메시지를 가비지 컬렉션하지 않고 매 프레임마다 새 WebGL 메시지를 배열에 푸시하는 것을 식별하여 객체 재사용을 위한 최적화를 제안합니다.