런타임 호출 통계

개발자 도구 성능 패널은 다양한 Chrome 내부 메트릭을 시각화하여 웹 앱의 런타임 성능에 대한 통찰력을 제공합니다. 그러나 특정 저수준 V8 메트릭은 현재 개발자 도구에 공개되지 않습니다. 이 기사는 chrome://tracing을 통해 런타임 호출 통계(RCS)로 알려진 상세한 V8 내부 메트릭을 수집하는 가장 강력한 방법에 대해 안내합니다.

트레이싱은 브라우저의 전체 동작, 다른 탭, 창 및 확장 기능 포함을 기록하므로, 확장 기능을 비활성화하고 다른 브라우저 탭을 열지 않은 상태로 깨끗한 사용자 프로필에서 수행하는 것이 좋습니다:

# 깨끗한 사용자 프로필과 확장기능 비활성화로 새 Chrome 브라우저 세션 시작
google-chrome --user-data-dir="$(mktemp -d)" --disable-extensions

측정하고자 하는 페이지의 URL을 첫 번째 탭에 입력하되, 아직 페이지를 로드하지 마십시오.

두 번째 탭을 추가하고 chrome://tracing을 엽니다. 참고: 슬래시를 제외하고 chrome:tracing만 입력해도 됩니다.

“기록” 버튼을 클릭하여 트레이스 기록을 준비합니다. 먼저 “웹 개발자”를 선택한 뒤 “카테고리 편집”을 선택합니다.

목록에서 v8.runtime_stats를 선택합니다. 조사 수준에 따라 다른 카테고리를 선택할 수도 있습니다.

“기록”을 눌러 첫 번째 탭으로 이동하여 페이지를 로드합니다. 가장 빠른 방법은 Ctrl/⌘+1을 사용해 첫 번째 탭으로 직접 이동한 다음 Enter를 눌러 입력된 URL을 승인하는 것입니다.

페이지 로드가 완료되거나 버퍼가 꽉 찰 때까지 기다렸다가 “중지” 버튼을 눌러 녹음을 중지합니다.

녹화된 탭에서 웹 페이지 제목이 포함된 “렌더러” 섹션을 찾으십시오. 가장 쉬운 방법은 “프로세스”를 클릭한 후 “없음”을 선택하여 모든 항목의 선택을 해제한 다음 관심 있는 렌더러만 선택하는 것입니다.

Shift를 누른 상태에서 드래그하여 트레이스 이벤트/슬라이스를 선택하십시오. CrRendererMain 및 모든 ThreadPoolForegroundWorker를 포함하여 모든 섹션을 덮도록 주의하세요. 선택된 슬라이스의 모든 항목을 포함한 표가 아래쪽에 나타납니다.

표 오른쪽 상단을 스크롤하여 “런타임 호출 통계 테이블” 옆에 있는 링크를 클릭합니다.

표시된 보기에서 V8이 시간을 소비하는 자세한 표를 볼 수 있도록 아래로 스크롤합니다.

카테고리를 확장하여 데이터를 더 자세히 조사할 수 있습니다.

명령줄 인터페이스

d8를 --runtime-call-stats로 실행하여 명령줄에서 RCS 메트릭을 얻으십시오:

d8 --runtime-call-stats foo.js