Chrome DevTools로 프로파일링하기

Angular는 Chrome DevTools 확장 API와 통합되어 프레임워크 고유의 데이터와 분석 정보를 Chrome DevTools 성능 패널에 직접 표시합니다.

통합 기능을 활성화하면 다음 두 가지 데이터가 포함된 성능 프로파일을 기록할 수 있습니다:

Chrome이 브라우저에서 실행되는 코드를 분석한 표준 성능 항목
프레임워크 런타임이 제공하는 Angular 고유의 항목

두 데이터는 같은 탭에 별도의 트랙으로 함께 표시됩니다:

Angular 고유의 데이터는 컴포넌트, 변경 감지, 라이프사이클 후킹 메서드 같은 프레임워크 개념으로 표시되며, 브라우저가 수집한 더 낮은 수준의 함수 및 메서드 호출과 나란히 나타납니다. 두 데이터 집합은 서로 연결되어 있으므로 관점과 상세 수준을 바꿔가며 확인할 수 있습니다.

Angular 트랙을 사용하면 다음과 같이 코드가 브라우저에서 실행되는 방식을 더 잘 이해할 수 있습니다:

특정 코드 블록이 Angular 애플리케이션의 일부인지, 같은 페이지에서 실행되는 다른 스크립트에 속하는지 구분합니다.
성능 병목을 파악하고 어느 컴포넌트나 서비스에서 발생하는지 확인합니다.
각 변경 감지 사이클의 세부 과정을 시각적으로 살펴보며 Angular의 내부 동작을 더 깊이 이해합니다.

프로파일 기록하기

통합 기능 활성화하기

다음 두 가지 방법 중 하나로 Angular 프로파일링을 활성화할 수 있습니다:

Chrome 콘솔 패널에서 ng.enableProfiling()을 실행합니다.
애플리케이션 시작 코드에 enableProfiling() 호출을 추가합니다(@angular/core에서 가져옵니다).

참고: Angular 프로파일링은 개발 모드에서만 동작합니다.

다음은 가능한 모든 이벤트를 수집하도록 애플리케이션 부트스트랩 과정에서 통합 기능을 활성화하는 예제입니다:

import {enableProfiling} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';
import {MyApp} from './my-app';

// 시작 시 실행되는 모든 코드를 수집하려면 애플리케이션을
// 부트스트랩하기 *전에* 프로파일링을 활성화하세요.
enableProfiling();
bootstrapApplication(MyApp);

프로파일 기록하기

Chrome DevTools 성능 패널의 Record 버튼을 사용하세요:

프로파일 기록에 관한 자세한 내용은 Chrome DevTools 문서를 참고하세요.

Angular DevTools에서 컴포넌트 열기

프로파일을 기록한 후 Angular 트랙에서 컴포넌트 이벤트를 선택하세요. Summary 탭에는 angular-devtools://component/... URL 스킴을 사용하는 Component 링크가 표시될 수 있습니다.

Chrome DevTools 성능 패널의 Angular 커스텀 트랙에서 _MainComponent 이벤트를 선택한 모습. Summary 탭에는 angular-devtools://component URL 스킴을 사용하는 Component 링크가 표시됩니다.

이 링크를 클릭하면 Angular DevTools가 열리고 Components 탭에서 해당 컴포넌트가 선택됩니다. 브라우저 수준의 프로파일에서 선택한 이벤트에 해당하는 컴포넌트 상태와 메타데이터로 바로 이동할 수 있습니다.

참고: 컴포넌트 링크를 열려면 Chrome용 Angular DevTools와 Chrome의 실험적 기능인 chrome://flags/#enable-devtools-deep-link-via-extensibility-api 플래그가 필요합니다.

기록한 프로파일 해석하기

"Angular" 커스텀 트랙으로 성능 문제를 빠르게 파악하고 진단할 수 있습니다. 다음 섹션에서는 일반적인 프로파일링 사례를 설명합니다.

Angular 애플리케이션과 같은 페이지의 다른 작업 구분하기

Angular와 Chrome 데이터는 서로 연결된 별도의 트랙에 표시되므로, Angular 애플리케이션 코드가 실행되는 시점과 다른 브라우저 처리(주로 레이아웃과 페인트) 또는 같은 페이지의 다른 스크립트가 실행되는 시점을 구분할 수 있습니다. 다른 처리가 실행되는 동안에는 Angular 커스텀 트랙에 데이터가 나타나지 않습니다: