애플리케이션 디버깅하기
Components 탭에서는 애플리케이션 구조를 살펴볼 수 있습니다. DOM에 있는 컴포넌트와 디렉티브 인스턴스를 시각적으로 확인하고 상태를 검사하거나 수정할 수 있습니다.
애플리케이션 구조 살펴보기
컴포넌트 트리는 애플리케이션의 컴포넌트와 디렉티브 사이의 계층 관계를 표시합니다.
컴포넌트 탐색기에서 컴포넌트나 디렉티브를 클릭하면 해당 항목을 선택하고 프로퍼티를 미리 볼 수 있습니다. Angular DevTools는 컴포넌트 트리 오른쪽에 프로퍼티와 메타데이터를 표시합니다.
이름으로 컴포넌트나 디렉티브를 찾으려면 컴포넌트 트리 위에 있는 검색창을 사용하세요.
호스트 노드로 이동하기
특정 컴포넌트나 디렉티브의 호스트 엘리먼트로 이동하려면 컴포넌트 탐색기에서 해당 항목을 더블클릭하세요. Angular DevTools가 Chrome의 Elements 탭이나 Firefox의 Inspector 탭을 열고 연결된 DOM 노드를 선택합니다.
소스로 이동하기
Angular DevTools를 사용하면 Chrome의 Sources 탭이나 Firefox의 Debugger 탭에서 컴포넌트 정의로 이동할 수 있습니다. 컴포넌트를 선택한 다음 프로퍼티 보기 오른쪽 위의 아이콘을 클릭하세요:
프로퍼티 값 변경하기
브라우저 DevTools와 마찬가지로 프로퍼티 보기에서 입력 프로퍼티, 출력 프로퍼티, 기타 프로퍼티 값을 수정할 수 있습니다.
프로퍼티 값을 마우스 오른쪽 버튼으로 클릭하면 해당 값의 자료형이 편집을 지원하는 경우 텍스트 입력창이 나타납니다.
새 값을 입력하고 Enter를 누르면 프로퍼티에 해당 값이 적용됩니다.
콘솔에서 선택한 컴포넌트나 디렉티브에 접근하기
Angular DevTools는 콘솔에서 최근 선택한 컴포넌트나 디렉티브 인스턴스에 간편하게 접근할 수 있는 기능을 제공합니다.
$ng0을 입력하면 현재 선택한 컴포넌트나 디렉티브 인스턴스의 참조를 가져올 수 있습니다.
$ng1은 이전에 선택한 인스턴스, $ng2는 그보다 앞서 선택한 인스턴스를 가리키며 같은 방식으로 이어집니다.
디렉티브나 컴포넌트 선택하기
브라우저 DevTools처럼 페이지를 검사해서 특정 컴포넌트나 디렉티브를 선택할 수 있습니다. Angular DevTools 왼쪽 위의 Inspect element 아이콘을 클릭하고 페이지의 DOM 엘리먼트 위에 마우스를 올리세요. 확장 프로그램이 연결된 디렉티브나 컴포넌트를 인식하며, 컴포넌트 트리에서 해당 엘리먼트를 선택할 수 있습니다.
지연 로딩 뷰 검사하기
디렉티브 트리에는 디렉티브와 함께 @defer 블록도 표시됩니다.
defer 블록을 클릭하면 프로퍼티 사이드바에서 자세한 정보를 확인할 수 있습니다.
선택적으로 사용하는 블록(@loading, @placeholder, @error 등), 설정된 트리거(지연 로딩, 프리페치, 하이드레이션 트리거), minimum과 after 값 같은 시간 옵션이 표시됩니다.
하이드레이션
SSR/SSG 애플리케이션에서 하이드레이션을 활성화하면 디렉티브 트리에 각 컴포넌트의 하이드레이션 상태가 표시됩니다.
오류가 발생하면 해당 컴포넌트에 오류 메시지가 표시됩니다.
오버레이를 활성화하면 애플리케이션 화면에서도 하이드레이션 상태를 시각적으로 확인할 수 있습니다.
위 이미지는 Angular 전자상거래 예제 앱에 하이드레이션 오버레이를 표시한 모습입니다.
시그널 그래프 디버깅하기
컴포넌트의 시그널, computed() 시그널, 이펙트 함수가 서로 어떻게 의존하는지 시각화하려면 시그널 그래프 디버깅하기 문서를 참고하세요.