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

케이스 바스크
케이스 바스크

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

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

이 짧은 이전 가이드에서는 성능 패널에서 JS 프로필을 기록하는 방법과 성능 패널의 UI가 익숙한 이전 워크플로에 어떻게 매핑되는지를 보여줍니다.

이전 자바스크립트 CPU 프로파일러 액세스

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

  1. DevTools 기본 메뉴를 엽니다.
  2. 도구 더보기 > 자바스크립트 프로파일러를 선택합니다. 이전 프로파일러는 JavaScript 프로파일러라는 새 패널에서 열립니다.

JS 프로필을 기록하는 방법

  1. DevTools를 엽니다.
  2. 실적 탭을 클릭합니다.

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

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

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

기존 워크플로를 새 워크플로에 매핑하는 방법

아래 스크린샷은 이전 워크플로의 차트 뷰에서 CPU 사용량 개요 차트 (위쪽 화살표)와 새 워크플로의 Flame Chart (아래쪽 화살표)의 위치를 보여줍니다.

이전 워크플로와 새 워크플로의 Flame Chart 간 매핑
그림 2. 이전 워크플로 (왼쪽)와 새 워크플로 (오른쪽)의 Flame Chart 간 매핑

Heavy (Bottom Up) 뷰는 Bottom-Up 탭에서 사용할 수 있습니다.

이전 워크플로와 새 워크플로의 Bottom-Up 뷰 간 매핑
그림 3. 이전 워크플로 (왼쪽)와 새 워크플로 (오른쪽)의 Bottom-Up 뷰 간 매핑

Call Tree 탭에서 Tree (Top Down) 보기를 사용할 수 있습니다.

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

누락된 기능이 있거나 이 문서에 관해 다른 궁금한 점이 있으면 트위터에서 @ChromeDevTools를 핑하거나 문서 저장소에서 GitHub 문제를 열어 보세요.