Chrome 개발자 도구 : JavaScript 메모리를 관리하자(The Chromium Blog_20110527)

최신 웹 애플리케이션은 그 복잡성이 증대되었습니다. 예전에는 데스크탑 애플리케이션에서만 쓸 수 있던 기능들이 웹에서 구현되면서 이를 위해 많은 프레임워크들이 복잡하게 결합되어 사용됩니다. 그 결과, 애플리케이션은 예상치 못하게 크기가 커지기도 합니다. 그렇기 때문에 당신은 애플리케이션을 실행시키자 마자 메모리를 관리해야 합니다. 포스트에서 우리는 Google Chrome의 네가지 툴을 다룰 것입니다. 그 툴들은 당신의 애플리케이션의 자바스크립트 메 모리를 사용의 이해에 있어 도움이 될 것입니다.
가장 간단한 툴은 작업관리자(Task Manager) 안에 있습니다. 그 툴은

>도구 > 작업 관리자 에서 사용가능합니다. “JavaScript Memory” 칼럼은 디폴트 설정 시 보이지 않지만, 컨텍스트 메뉴에서 항목을 켤 수 있습니다.(마우스 우클릭)

숫자들이 실시간으로 업데이트 됩니다.

만약 당신이 메모리 사용을 시각적으로 보고 싶다면, Chrome  개발자 도구의 Timeline Panel에 있는 Memory Graph를 사용하기 바랍니다. 이를 위해서, 개발자 도구를 켠 후, Timeline Panel을 선택해야 합니다. 그리고 ‘Memory’ 항목을 클릭합니다. 당신이 Timeline 이벤트들을 캡쳐하면, 그래프들은 스스로 업데이트 될 것입니다.

JavaScript 메모리를 관리와 누수 찾기에 있어 가장 기능적인 툴은 새롭고 강력한 heap profiler 입니다. heap profiler는 Chrome Dev Channel에서 이용할 수 있습니다. heap 스냅샷을 얻기 위해, 개발자 도구안의 Profile panel을 켜고, “Take heap snapshot” 버튼을 눌러야 합니다.

스냅샷들은 JavaScript heap 영역에 있는 객체들을 포함하고 있습니다. 그러므로 당신은 객체들을 세부적으로 확인하고, 당신의 애플리케이션 내에 있는 각 객체들이 얼마나 메모리를 소모하는지를 확인할 수 있습니다. heap profiler는 또한 다음과 같은 기능을 제공합니다.

- 스냅샷 디핑(diffing)
- 생성자에 의한 객체 그룹핑
- 객체의 크기 계산
- dom 트리 보기
- GC root 혹은 window 객체로의 경로 확인

또한,  heap profiler는 account native DOM노드로 끌어들일 수 있으며(?) , DOM 과 관련된 메모리 누수를 확인할 수 있게 합니다.

JavaScript 메모리 사용을 측정하는 것은 페이지 내에서도 가능합니다.  애플리케이션 생명주기 내의 다른 지점들에서 performance.memory 라는 window객체 프로퍼티를 사용함으로써 이를 알 수 있습니다. 잊지말아야할 것은 당신이 --enable-memory-info 커맨드 라인 인자를 사용해서 크롬을 돌리지 않는다면 이 프로퍼티는 아무것도 보여주지 않는다는 점입니다.

크롬 개발자 도구 heap profiler에 대해 더 많은 것을 알고 싶다면, 다음 튜토리얼을 참고하시기 바랍니다.

 (원문 : http://blog.chromium.org/2011/05/chrome-developer-tools-put-javascript.html )