Components 탭에서는 선택한 컴포넌트나 디렉티브의 시그널 그래프를 실시간으로 확인할 수 있습니다.
그래프는 해당 컴포넌트의 시그널, computed() 시그널, 이펙트 함수, 기타 반응형 노드가 서로 어떻게 의존하는지 보여줍니다.
이를 통해 반응형 데이터 흐름을 쉽게 이해하고 디버깅할 수 있습니다.
시그널 그래프 열기
Components 탭에서 컴포넌트나 디렉티브를 선택하세요. 프로퍼티 패널 헤더에서 Show Signal Graph를 클릭하세요. 컴포넌트 트리 옆에 시그널 그래프가 열립니다.
특정 시그널로 바로 이동할 수도 있습니다. 프로퍼티 보기에서 프로퍼티 옆의 시그널 그래프 버튼을 클릭하세요. 프로퍼티에 사용할 수 있는 동작이 여러 개라면 동작 메뉴를 열고 Show in signal graph를 선택하세요.
검사하는 애플리케이션이 시그널 그래프 API를 지원하면 Show Signal Graph 버튼이 자동으로 표시되므로 별도로 설정할 필요가 없습니다.
그래프 읽기
그래프의 노드는 선택한 컴포넌트와 관련된 반응형 노드를 나타냅니다:
- Signal:
signal()로 생성한 값을 쓸 수 있는 시그널입니다. - Computed:
computed()로 생성한 계산된 값입니다. - Effect:
effect()또는afterRenderEffect()로 생성한 이펙트 함수입니다. - Linked signal:
linkedSignal()로 생성한 값을 쓸 수 있는 시그널입니다. - Template: 렌더링할 때 시그널을 읽는 컴포넌트 템플릿입니다.
- Resource:
resource()또는rxResource()에 속하는 시그널을 접거나 펼칠 수 있는 그룹으로 묶어 표시합니다. 그룹 노드에서 Expand를 클릭하면 그룹 안의 개별 노드를 확인할 수 있습니다.
노드 사이의 선은 반응형 의존성을 나타냅니다. 각 노드는 자신이 값을 읽는 생산자 노드(업스트림)와 자신의 값을 읽는 의존 노드(다운스트림)에 연결됩니다.
팁: 각 노드의 레이블에는 해당 반응형 노드의 debugName이 표시됩니다.
시그널, computed() 시그널, 특히 보통 클래스 멤버에 할당하지 않는 이펙트 함수에 debugName을 지정하면 그래프를 훨씬 쉽게 읽을 수 있습니다:
effect(
() => {
// ...
},
{debugName: 'name in graph'},
);그래프 검색하기
그래프 툴바에서 검색 아이콘을 클릭하면 이름으로 노드를 찾을 수 있습니다. Angular DevTools는 일치하는 모든 노드를 강조하며, 검색 결과를 하나씩 살펴볼 수 있습니다.
노드 검사하기
노드를 클릭하면 상세 정보 패널이 열립니다. 이 패널에서는 노드의 현재 값을 펼칠 수 있는 트리로 표시하며, 다음 동작을 제공합니다:
- View source: Chrome의 Sources 탭이나 Firefox의 Debugger 탭에서 노드 정의로 이동합니다. 소스 위치를 확인할 수 없으면 이 동작은 비활성화됩니다.
- Set breakpoint: 시그널이 갱신될 때 실행을 일시 중지합니다. 중단점은 Chromium 기반 브라우저에서만 사용할 수 있습니다.
- Watch signal: 시그널의 갱신과 무효화를 브라우저 콘솔에 기록합니다. 다시 클릭하면 감시를 중지합니다.
- Highlight upstream / downstream: 노드가 의존하는 노드나 해당 노드에 의존하는 노드로 이어지는 경로를 추적합니다.
컴포넌트가 시그널을 사용하지 않으면 Angular DevTools는 그래프 대신 "No signals in this component" 메시지를 표시합니다.
지원 버전
시그널 그래프를 사용하려면 Angular 19 이상으로 빌드한 애플리케이션을 개발 모드로 실행해야 합니다.