에이전트용 Chrome DevTools를 사용하면 코딩 에이전트가 애플리케이션에서 클라이언트 측 메모리 누수 (JavaScript 및 WebAssembly 포함)를 분석하고 수정할 수 있습니다. 힙 스냅샷의 수집 및 분석을 자동화하면 에이전트가 가비지 컬렉션이 제대로 되지 않는 객체를 정확히 찾아내고 타겟팅된 코드 리팩터링을 제안할 수 있습니다.
Agentic Workflows에서 코딩 에이전트는 여러 애플리케이션 상태에서 여러 스냅샷을 가져오고 전문 분석 도구를 사용합니다.
메모리 디버깅 도구 사용 설정
기본적으로 에이전트용 Chrome DevTools는 take_heapsnapshot 도구만 노출합니다. 힙 스냅샷을 분석하는 도구 (예: compare_heapsnapshots, get_heapsnapshot_summary, get_heapsnapshot_retaining_paths)는 --memoryDebugging 플래그로 서버를 시작할 때만 사용할 수 있습니다. 이 플래그가 없으면 에이전트가 스냅샷을 캡처할 수는 있지만 분석할 수는 없습니다.
메모리 디버깅 도구를 사용 설정하려면 서버 인수에 --memoryDebugging을 추가하세요.
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
추가 옵션은 구성을 참고하세요.
일반적인 메모리 누수 패턴
메모리 분석은 다음을 비롯한 일반적인 누수 패턴을 찾는 데 중점을 둡니다.
- 삭제되지 않은 이벤트 리스너: 가비지 컬렉션을 방지하는 전역 객체(예:
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.
에이전트 실행 예시: 에이전트는 필요한 기준, 타겟, 최종 스냅샷을 수집하는 동안 설정 모달과 상호작용합니다. 분석 결과 분리된 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 메시지를 배열로 푸시하여 객체 재사용을 위한 최적화를 제안함을 식별합니다.