메모리 누수 디버깅은(는) 무엇을 하나요?
이 스킬은 Chrome DevTools MCP 도구를 사용하여 JavaScript 및 Node.js 애플리케이션에서 메모리 누수를 찾고, 진단하고, 수정하기 위한 전문적인 지침과 워크플로우를 제공합니다.
전제 조건
고급 메모리 디버깅 도구(compare_heapsnapshots, get_heapsnapshot_details 등)는 서버가 --memoryDebugging 플래그와 함께 시작된 경우에만 사용할 수 있습니다. 먼저 이러한 도구를 사용할 수 있는지 확인하고, 그렇지 않은 경우 MCP 설정 파일을 읽어 --memoryDebugging이 활성화되어 있는지 확인하십시오.
핵심 원칙
- MCP 메모리 도구 우선 사용: 원시
.heapsnapshot파일을 직접 읽으려고 시도하지 마십시오. 이러한 파일은 매우 커서 많은 토큰을 소비합니다. Chrome DevTools MCP 힙 스냅샷 도구를 사용하여 스냅샷을 요약, 비교 및 검사하십시오. - 누수 격리: 누수가 브라우저(클라이언트 측)에서 발생하는지 Node.js(서버 측)에서 발생하는지 확인합니다.
- 일반적인 원인: 분리된 DOM 노드, 처리되지 않은 클로저, 전역 변수, 제거되지 않은 이벤트 리스너, 무한히 커지는 캐시 등을 찾습니다. 참고: 분리된 DOM 노드는 때때로 의도적인 캐시일 수 있습니다. 항상 사용자에게 묻고 null로 설정하십시오.
- 로드된 스냅샷 닫기: 힙 스냅샷은 클 수 있습니다. 조사를 완료한 후에는 로드된 각 스냅샷에 대해
close_heapsnapshot을 사용하여 MCP 서버가 보유한 메모리를 해제합니다.
워크플로우
1. 스냅샷 캡처
프론트엔드 웹 애플리케이션 메모리 누수를 조사할 때는 chrome-devtools-mcp 도구를 활용하여 애플리케이션과 상호작용하고 스냅샷을 찍습니다.
click,navigate_page,fill등과 같은 페이지 범위 도구(pageId지정)를 사용하여 페이지를 원하는 상태로 조작합니다.- 상호작용 후 페이지를 원래 상태로 되돌려 메모리가 해제되는지 확인합니다.
- 동일한 사용자 상호작용을 10번 반복하여 누수를 증폭시킵니다.
take_heapsnapshot(pageId포함)을 사용하여 기준 상태, 대상 상태(작업 후), 최종 상태(작업 되돌리기 후)에서.heapsnapshot파일을 디스크에 저장합니다.
2. 스냅샷 비교
take_heapsnapshot을 사용하여 .heapsnapshot 파일을 생성한 후 Chrome DevTools MCP 메모리 도구로 비교합니다.
- 각 스냅샷에 대해
get_heapsnapshot_summary를 먼저 사용하여 파일이 로드되는지 확인하고 상위 수준 총계를 비교합니다. compare_heapsnapshots를 사용하여 기준 스냅샷과 대상 스냅샷을 비교합니다. 먼저classIndex없이 요약 diff를 확인한 다음,classIndex를 지정하여 의심스러운 증가에 대해서만 상세 클래스 diff를 요청합니다.- 특정 노드 ID를 파고들기 전에
compare_heapsnapshots의 요약 출력을 사용합니다.
3. 보유자 및 지배자 체인 검사
클래스나 객체 유형이 예기치 않게 증가하는 경우, 코드를 변경하기 전에 MCP 도구로 보유 체인과 지배자를 검사합니다.
get_heapsnapshot_class_nodes를 사용하여 의심스러운 클래스의 인스턴스를 나열합니다.get_heapsnapshot_retainers,get_heapsnapshot_retaining_paths,get_heapsnapshot_dominators,get_heapsnapshot_edges를 사용하여 대표 노드가 여전히 도달 가능한 이유를 이해합니다.get_heapsnapshot_object_details를 특정nodeId와 함께 사용하여 상세 객체 메타데이터(크기, 유형, 거리, DOM 분리 여부)를 검색합니다.- 문자열 증가가 diff를 지배할 때는
get_heapsnapshot_duplicate_strings를 사용합니다. - references/common-leaks.md에서 일반적인 메모리 누수 예제와 보유 경로가 애플리케이션 코드를 가리킨 후 이를 수정하는 방법을 참조하십시오.
4. 고급 분석 및 범주화된 필터
외부 도구 없이 기본 제공 MCP 메모리 도구와 필터를 사용하여 특정 누수 범주를 직접 pinpoint합니다.
get_heapsnapshot_details또는get_heapsnapshot_class_nodes를filterName과 함께 사용하여 일반적인 누수 원인을 대상으로 합니다.objectsRetainedByDetachedDomNodes: 메모리에 보유된 분리된 DOM 요소를 식별합니다.objectsRetainedByEventHandlers: 제거되지 않은 이벤트 리스너에 의해 유지되는 객체를 식별합니다.objectsRetainedByContexts: 클로저나 실행 컨텍스트에 갇힌 객체를 식별합니다.objectsRetainedByConsole: 콘솔 로깅에 의해 보유된 객체를 식별합니다.