Angular의 상태를 확인할 수 있는 Chrome 확장 프로그램 'Angular state inspector'

소개

Angular의 State를 확인할 수 있는 툴 「Angular state inspector」의 소개를 해 간다.
Service 클래스에서의 데이터 관리시, 일부러 Console.log라든지 하지 않아도 값을 확인할 수 있게 된다. 데이터만이라면 Debug에서도 끝나지만, NgRx등의 상태 관리 프레임워크를 사용하고 있다면 편하게 확인할 수 있다.

설치

여기 에서 대상 Chrome 확장 프로그램을 설치합니다.

Angular 프로젝트 시작

$ ng serve --open

Chrome의 DevTools에서 데이터 확인

DevTools를 열면 왼쪽 상단의 "Select an element in the page to inspect it"를 선택

보고 싶은 데이터가 표시되는 개소를 선택.

Console에

Angular state inspector shortcuts:
    $scope/$context: Element debug info
    $getDetectChanges()/$tick()/$apply(): Trigger change detection cycle

가 표시되면 $scope를 입력하고 Enter를 누르면 Service 클래스의 상태가 Console에 표시되고 데이터를 확인할 수 있습니다.