브라우저) CPU, GPU, 렌더링, 메모리 성능 모니터링을 위한 유용한 도구들

1. FPS/Composite 상태보기

F12 -> Ctrl + Shift + P > FPS 검색

 

 

2. Layers

 

구조 전체를 확인할 수 있다.

 

 

Z영역도 확인 가능함

 

 

 

 

3. Rendering

렌더링 되는 포인트들을 하이라이트 하여 쉽게 볼 수 있다.

 

아래 세개가 효과적으로 사용할만하다.

Layers borders : 레이어 경계선

Frame Rendering Stats : 프레임 속도

Paint flashing : repaint되는 영역이 하이라이트됨

 

 

 

 

 

 

 

 

 

 

 

4. 브라우저 Task Manager

브라우저의 더보기 > more tools > task Manager

 

 

6. 브라우저가 사용하는 GPU 스펙

 

chrome://gpu/

 

 

 

 

7. Performance Monitor 

 

Memory, Document Node 숫자, EventListener 실시간 체크가 가능하다

more tools > Performance Monitor