구글 크롬 개발자 도구 이용해서 Javascript 메모리 관리하는 방법

요즘 웹 어플리케이션은 점점 더 복잡해 지고 있습니다. PC 에서만 실현 가능했던 기능들이 웹에서 구현 될 수 있도록 많은 프레임워크들이 나타난 것입니다. 그러다 보니 웹 어플리케이션은 덩치가 커지고 메모리를 많이 차지하게 됩니다. 이제 개발자들은 수시로 메모리를 관리하면서 작업해야 합니다. 크롬의 개발자 도구는 자바스크립트가 메모리를 사용하는데 있어서 문제가 있는지 파악하는데 도움을 줄 수 있습니다. 

 

 

▼ 메모리 상태를 살펴 보는 간단한 툴은 작업 관리자(Task Manager) 창입니다. 크롬을 실행한 후 오른쪽 상단에 있는 [더보기] > [도구 더보기] > [작업 관리자] 메뉴를 선택합니다. 단축키는 Shift + Esc 입니다.

 

▼ 작업 관리자에는 크롬에 띄워 놓은 사이트와 확장 프로그램 목록이 나타납니다. 확장 프로그램도 바로 사용하기 위해서는 일정한 메모리 크기를 차지합니다. 그래서 메모리 절약을 위해서는 불필요한 확장 프로그램을 삭제하는 것이 좋습니다. 작업 관리자에서는 사이트에 메모리 값이 계속해서 올라가는지 살펴 볼 수 있습니다. 

 

▼ 좀더 시작적으로 보고 싶다면 개발자 도구에서 제공하는 Timeline Panel 에 있는 Memory Graph 를 사용해 보세요. 그래프 형태로 시간 흐름에 따라 메모리 변화를 체크할 수 있습니다. Memory Graph 를 실행하기 위해서 [더보기] > [도구 더보기] > [개발자 도구]를 실행합니다. 단축키는 F12 입니다. 

 

▼ 개발자 도구의 Performance 탭으로 이동합니다. 기본적으로 실행이 되어 있지 않습니다. 동작을 하려면 왼쪽 상단에 시작 버튼을 눌러야 합니다. 

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 크롬 Chrome 브라우저 자바스크립트 실행 안될 때 활성화 하기 ▶ 크롬에서 자바스크립트(Javascript) 코딩하기 ▶ 자바스크립트 크롬 브라우저로 디버깅 하는 방법 ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 ▶ 크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기

 

 

 

 

▼ 시작과 동시에 측정이 시작됩니다. 시간은 제한이 없습니다. 측정하고 싶은 시간만큼 기다리다가 Stop 버튼을 누르면 됩니다. Buffer usage 를 전부 채우지 않아도 됩니다. 

 

▼ 그림처럼 측정한 시간만큼 그래프로 값들을 나타나고 있습니다. 상단에 Memory 를 체크하면 메모리의 흐름을 한 눈에 체크할 수 있습니다. 

 

▼ Javascript 메모리 누수와 관련해서 좀더 강력한 툴을 원한다면 Heap Profies 를 사용해 보세요. Profiles 탭으로 이동해서 Take Heap Snapshot 을 체크합니다. 그리고 화면 하단에 Take snapshot 버튼을 클릭합니다. 

 

▼ 측정된 Snapshot 에는 Javascript Heap 영역에 있는 객체들을 모두 포함하고 있습니다. 객체들을 세부적으로 확인하고 얼마나 메모리를 소모하는지 확인이 가능합니다. 

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 크롬 Chrome 브라우저 자바스크립트 실행 안될 때 활성화 하기 ▶ 크롬에서 자바스크립트(Javascript) 코딩하기 ▶ 자바스크립트 크롬 브라우저로 디버깅 하는 방법 ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 ▶ 크롬 브라우저 웹 페이지 소스 보기, HTML 디자인 확인하기