Chrome 개발자 도구 Performance 체크

기타모르겠다

SANGJIN-YU 2024. 7. 16. 19:24

개발자도구

웹 개발 및 디버깅 도구로서 매우 강력하고 유용한 기능을 제공하는 Chrome 브라우저의 내장 도구입니다. 주로 웹 개발자들이 웹 애플리케이션의 동작을 분석하고 최적화하는 데 사용

1. 개발자 도구를 열면 아래 화면을 확인 가능

2. 좌측 상단의 버튼을 클릭하면 Recording(기록)을 진행 가능

3. 해당 버튼을 클릭하고 특정 Action을 취하면 해당 작업이 진행되는 동안의 성능을 분석하여 기록

4. 아래 Profiling이 진행되는 것을 확인

5. Stop 버튼을 클릭하여 중지

우측을 보면 Network부터 마지막 GPU까지 다양한 항목을 확인 가능

해당 Page에서의 작업이 진행된 시간도 영역 별 확인 가능

Resource 로딩, Script 처리 시간, CSS 관련 Rendering 과 Painting 그리고 System 응답과 Idle 타임까지 확인

Screenshots을 체크하면 해당 화면이 로드되는 과정을 남겨서 확인 가능

또한 그 아래 Network는 request를 요청한 후에 response를 받고 종료되는 시간을 체크 가능

또한 병목(Bottle Neck) 현상이 발생하는 부분도 체크가 가능

아래 현상은 CSS를 읽어서 스타일을 적용시키고 Rendering을 진행하는 과정에서 병목현상이 일어나는 것을 알려줌