Chrome DevTools - Chrome 58에서 자바스크립트 CPU 프로파일링

Kayce Basques

현재 Canary인 Chrome 58에서는 타임라인 패널의 이름이 성능 패널로, 프로필 패널의 이름이 메모리 패널로 변경되었으며 프로필 패널의 JavaScript CPU 프로필 기록 기능이 더 숨겨진 위치로 이동했습니다.

장기적인 목표는 이전 JavaScript CPU 프로파일러를 삭제하고 모든 사용자가 새 워크플로를 사용하도록 하는 것입니다.

이 간단한 이전 가이드에서는 성능 패널에서 JS 프로필을 기록하는 방법과 성능 패널의 UI가 익숙한 기존 워크플로에 매핑되는 방식을 보여줍니다.

이전 JavaScript CPU 프로파일러에 액세스

프로필 패널에서 사용할 수 있었던 이전의 'JavaScript CPU 프로필 기록' 워크플로를 선호하는 경우 다음과 같이 계속 액세스할 수 있습니다.

  1. DevTools 기본 메뉴를 엽니다.
  2. 도구 더보기 > JavaScript 프로파일러를 선택합니다. 기존 프로파일러가 JavaScript 프로파일러라는 새 패널에서 열립니다.

JS 프로필을 기록하는 방법

  1. DevTools를 엽니다.

  2. 실적 탭을 클릭합니다.

    Chrome DevTools 성능 패널
    그림 1. 성능 패널

  3. 다음 방법 중 하나로 녹음합니다.

    • 페이지 로드의 프로파일을 작성하려면 페이지 로드 기록을 클릭합니다. DevTools는 녹음을 자동으로 시작하고 페이지 로드가 완료된 것을 감지하면 자동으로 중지됩니다.
    • 실행 중인 페이지를 프로파일링하려면 Record를 클릭하고 프로파일링할 작업을 실행한 후 완료되면 Stop을 클릭합니다.

이전 워크플로가 새 워크플로에 매핑되는 방식

아래 스크린샷은 이전 워크플로의 차트 뷰에서 새 워크플로의 CPU 사용량 개요 차트 (상단 화살표) 및 플레임 차트 (하단 화살표)의 위치를 보여줍니다.

이전 워크플로의 플레임 차트와 새 워크플로 간의 매핑
그림 2. 이전 워크플로의 플레임 차트 (왼쪽)와 새 워크플로 (오른쪽) 간의 매핑

상위(하단 위로) 탭에서 과도한 사용량(하단 위로) 보기를 사용할 수 있습니다.

이전 워크플로의 하향식 보기와 새 워크플로 간의 매핑
그림 3. 이전 워크플로의 하향식 보기 (왼쪽)와 새 워크플로 (오른쪽) 간의 매핑

호출 트리 탭에서 트리 (하향식) 뷰를 사용할 수 있습니다.

이전 워크플로의 트리 보기와 새 워크플로 간의 매핑
그림 4. 이전 워크플로의 트리 보기 (왼쪽)와 새 워크플로 (오른쪽) 간의 매핑

누락된 기능이 있거나 이 도움말에 관해 다른 질문이 있는 경우 트위터에서 @ChromeDevTools를 핑하거나 문서 저장소에서 GitHub 문제를 여세요.