애플리케이션 프로파일링하기

Profiler 탭에서는 Angular의 변경 감지 실행 과정을 시각적으로 확인할 수 있습니다. 변경 감지가 언제, 어떻게 애플리케이션 성능에 영향을 미치는지 파악할 때 유용합니다.

Profiler 탭에서는 현재 애플리케이션의 프로파일링을 시작하거나 이전 실행에서 저장한 프로파일을 가져올 수 있습니다. 애플리케이션 프로파일링을 시작하려면 Profiler 탭 왼쪽 위의 원 위에 마우스를 올리고 Start recording을 클릭하세요.

프로파일링 중에 Angular DevTools는 변경 감지와 라이프사이클 훅 실행 같은 실행 이벤트를 수집합니다. 애플리케이션을 조작해서 변경 감지를 유발하면 Angular DevTools에서 사용할 데이터가 생성됩니다. 기록을 마치려면 원을 다시 클릭해서 Stop recording을 실행하세요.

기존 기록을 가져올 수도 있습니다. 자세한 내용은 기록 가져오기 섹션을 참고하세요.

애플리케이션 실행 이해하기

프로파일을 기록하거나 가져오면 Angular DevTools가 변경 감지 주기를 시각화해서 표시합니다.

연속된 막대는 각각 앱의 변경 감지 주기 하나를 나타냅니다. 막대가 높을수록 해당 주기의 변경 감지를 실행하는 데 더 긴 시간이 걸렸다는 의미입니다. 막대를 선택하면 DevTools가 다음과 같은 유용한 정보를 표시합니다:

• 해당 주기에서 수집한 모든 컴포넌트와 디렉티브의 막대 그래프
• Angular가 해당 주기의 변경 감지를 실행하는 데 걸린 시간
• 사용자가 경험했을 것으로 추정되는 프레임 속도(60fps 미만인 경우)

컴포넌트 실행 이해하기

변경 감지 주기를 클릭하면 표시되는 막대 그래프에서는 각 컴포넌트나 디렉티브의 변경 감지를 실행하는 데 걸린 시간을 자세히 확인할 수 있습니다.

이 예제에서는 NgForOf 디렉티브에 소요된 전체 시간과 호출된 메서드를 보여줍니다.

계층 보기

변경 감지 실행 과정을 플레임 그래프와 비슷한 형태로 시각화할 수도 있습니다.

그래프의 각 타일은 렌더링 트리의 특정 위치에 있는 화면 엘리먼트를 나타냅니다. 예를 들어 어떤 변경 감지 주기에서 LoggedOutUserComponent가 제거되고 Angular가 그 자리에 LoggedInUserComponent를 렌더링했다고 해 봅시다. 이 경우 두 컴포넌트가 같은 타일에 표시됩니다.

x축은 해당 변경 감지 주기에서 렌더링에 걸린 전체 시간을 나타냅니다. y축은 엘리먼트 계층을 나타냅니다. 엘리먼트의 변경 감지를 실행하려면 해당 엘리먼트의 디렉티브와 자식 컴포넌트를 렌더링해야 합니다. 이 그래프를 통해 렌더링에 가장 오래 걸리는 컴포넌트와 시간이 어디에 사용되는지 확인할 수 있습니다.

각 타일의 색상은 Angular가 해당 위치에서 사용한 시간에 따라 정해집니다. Angular DevTools는 렌더링에 가장 오래 걸린 타일과 비교해서 색상의 강도를 결정합니다.

타일을 클릭하면 오른쪽 패널에 상세 정보가 표시됩니다. 타일을 더블클릭하면 확대되므로 그 안에 중첩된 자식 항목을 더 쉽게 확인할 수 있습니다.

변경 감지와 OnPush 컴포넌트 디버깅하기

일반적으로 그래프는 각 변경 감지 프레임에서 애플리케이션을 렌더링 하는 데 걸린 시간을 시각화합니다. 하지만 OnPush 컴포넌트와 같은 일부 컴포넌트는 입력 프로퍼티가 변경될 때만 다시 렌더링됩니다. 특정 프레임에서는 이러한 컴포넌트를 제외하고 플레임 그래프를 확인하는 것이 유용할 수 있습니다.

변경 감지 프레임에서 실제로 변경 감지 과정을 거친 컴포넌트만 확인하려면 플레임 그래프 위쪽의 Change detection 체크박스를 선택하세요.

이 보기에서는 변경 감지를 거친 모든 컴포넌트를 강조하고, 다시 렌더링되지 않은 OnPush 컴포넌트처럼 변경 감지를 거치지 않은 컴포넌트는 회색으로 표시합니다.

기록 가져오기와 내보내기

기록한 프로파일링 세션의 오른쪽 위에 있는 Save Profile 버튼을 클릭하면 JSON 파일로 내보내 디스크에 저장할 수 있습니다. 나중에 프로파일러의 초기 화면에서 Choose file 입력창을 클릭해서 해당 파일을 가져오면 됩니다.