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

Kayce Basques
Kayce Basques

현재 Canary 버전인 Chrome 58에서 타임라인 패널의 이름이 Performance 패널로 변경되었고, Profiles(프로필) 패널의 이름이 Memory 패널로 변경되었으며, Profiles 패널의 Record JavaScript CPU Profile 기능이 더 숨겨진 위치로 이동했습니다.

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

이 이전 가이드에서는 Performance 패널에서 JS 프로필을 기록하는 방법과 성능 패널의 UI가 익숙한 이전 워크플로에 매핑되는 방식을 설명합니다.

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

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

  1. DevTools 기본 메뉴를 엽니다.
  2. More tools > JavaScript Profiler를 선택합니다. JavaScript 프로파일러라는 새 패널에서 이전 프로파일러가 열립니다.

JS 프로필 기록 방법

  1. DevTools를 엽니다.

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

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

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

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

기존 워크플로가 새 워크플로에 매핑되는 방식

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

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

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

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

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

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

놓친 기능이 있거나 이 문서에 관해 다른 궁금한 점이 있으면 트위터에서 @ChromeDevTools를 핑하거나 문서 저장소에서 GitHub 문제를 여세요.