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

 

환경: Chrome

 

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

 

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

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

 

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

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

 

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

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

 

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

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

 

시작과 동시에 측정이 시작됩니다. 시간은 제한이 없습니다. 측정하고 싶은 시간만큼 기다리다가 Stop 버튼을 누르면 됩니다

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

 

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

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

 

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

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

 

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

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

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군


티스토리 툴바