NgRx의 개발자 도구 및 디버깅

우리가 복잡한 소프트웨어 해결 방안에서 일할 때, 우리는 항상 우리가 보고된 오류 때문에 어찌할 바를 모른다는 것을 발견한다.코드 실행 경로에 숨겨진 문제를 추적할 수 있는 적절한 도구가 있어야 한다.다행히도 프로젝트에서 NgRx을 사용하는 개발자에게 응용 프로그램 상태는 한 위치에 저장되어 있으며, 이를 수정할 수 있는 모든 작업은 우수한 개발 도구를 통해 쉽게 추적할 수 있다.NgRx는 Redux 모드를 따르기 때문에 다른 Redux 기초 응용 프로그램과 같은 Redux DevTools을 사용할 수 있습니다.NgRx 기반 응용 프로그램을 디버깅할 때, 이 도구는 나에게 없어서는 안 될 것이다.
만약 당신이 아직 NgRx를 사용한 적이 없다면, 나는 당신이 먼저 this post을 읽는 것을 권장합니다. 거기에서 나는 NgRx 모드를 간단한 응용 프로그램에 도입했습니다.

개시하다

Redux 개발 툴에 NgRx를 저장하기 위해서는 NgRx 플랫폼에서 제공하는 모듈인 @ngrx/store-devtools을 도입해야 합니다.설치 지침은 official installation guide을 참조하십시오.
AngularCLI 원리도를 사용하여 Store Devtools를 설치하면 다음 코드가 AppModule에 자동으로 추가됩니다.

@NgModule({
  /* other module properties */
  imports: [
    /* other imported modules */
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
  ],
})

성능 때문에 기본적으로 maxAge 속성은 25로 제한됩니다. 이것은 히스토리 트리에 저장된 작업의 제한입니다.
생산 구축 시 logOnly은 보통 true으로 설정하여 Redux 개발 도구에 연결할 때 사용하는 기능의 수량을 제한한다.
DevTools에서 브라우저에서 열려 있는 다른 탭에서 사용할 수 있는 다른 모든 스토리지를 표시하므로 초기 구성에 name 속성을 추가하는 것이 좋습니다.

@NgModule({
  /* other module properties */
  imports: [
    /* other imported modules */
    StoreDevtoolsModule.instrument({
      name: 'DevTools & Debugging in NgRx'
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
  ],
})

이 최소한의 설정이 있으면, 우리는 Redux 개발 도구를 사용하여 우리의 프로그램을 디버깅하기 시작할 수 있습니다.
브라우저 개발자 도구의 Redux 탭에 있는 Redux 개발 도구에 액세스할 수 있습니다.

추적 행동

Redux DevTools에서 할 수 있는 첫 번째 작업은 응용 프로그램에서 스케줄링된 모든 작업을 추적하는 것입니다.

선택한 작업마다 현재 상태 값, 작업에 따른 상태 변화, 작업 객체의 내용을 볼 수 있습니다.



또한 이 확장자는 프로그램에서 '시간 여행' 을 할 수 있으며, 상태가 어떻게 영향을 미칠지 보기 위해 일부 조작을 건너뛸 수 있습니다.
이동할 시점을 수동으로 선택할 수도 있고, 밑에 있는 타임라인을 사용하여 전체 작업 순서를 재방송할 수도 있습니다.

이러한 기능만으로도 우리는 응용 프로그램의 상태가 시간에 따라 변화할 가능성을 추적하고 가능한 문제를 찾아낼 수 있다.

복제 애플리케이션 동작

Redux 개발 도구의 또 다른 강력한 기능은 UI와 상호작용 없이 조작을 할당할 수 있다는 것이다.아래쪽 확장 메뉴의 탭으로 사용할 수 있습니다.

이 기능을 사용하면 원하는 동작을 보낼 수 있습니다.오류가 발생한 정확한 절차를 찾았지만 UI를 사용한 복제가 어렵거나 오래 걸리면 매우 유용할 것입니다.우리는 필요한 조작 순서를 입력하고 스케줄링할 수 있으며, 복제 가능한 방식으로 응용 프로그램 상태의 번거로움에 쉽게 도달할 수 있다.

다음과 같은 몇 가지 기능이 위의 스케줄링 기술과 잘 결합되어 있습니다.

지속 상태

제출 및 복구 국가

persist 옵션을 선택하면 페이지를 다시 불러온 후에도 우리의 상태가 지속되고 회복될 수 있도록 확장됩니다.제출 옵션을 사용하면 특정한 시간에 상태를 저장하고 이를 시작점으로 삼을 수 있다(사장님과 싸우기 전에 게임을 저장하는 것과 같다)🤓).
지금부터, 당신은 임의의 수량의 조작을 실행할 수 있지만, 시종일관 상태를 지난번에 제출한 시간대로 회복할 수 있습니다.로그 모니터에서는 복원 기능을 사용할 수 있지만 검사자에서는 사용할 수 없습니다.

이것은 확장에서 직접 분배하는 작업에 매우 효과적이다.우리는 프로그램이 완전히 같은comitted 상태로 특정한 조작을 할 때의 행동을 테스트하고 디버깅할 수 있습니다.이 밖에 상태를 회복하고 다시 보내는 작업을 통해 중복되기 쉽다.

NgRx 스토어 개발 도구 옵션

지금까지 Redux DevTools의 많은 용례를 소개했지만, StoreDevtoolsModule을 설정할 때 필요에 따라 행동을 설정할 수 있습니다.
실제 응용 프로그램에서, 우리의 조작 로그는 수백 개의 조작을 포함할 수 있으며, 이러한 조작은 응용 프로그램에서 발생하는 일에 대한 우리의 견해에 영향을 줄 수 있다.우리는 확장에서 그것들을 직접 필터할 수 있지만, 이것은 보이는 작업 수량의 제한 문제를 해결할 수 없다.우리는 여전히 우리가 설정한 제한을 받는다. 성능 때문에 이 제한을 낮추거나 너무 높게 설정해서는 안 된다.디버깅을 위해 특정 유형의 작업에만 관심을 가지거나 특정 작업(즉 Angular Router에서 전송된 작업)이 특정 시간에 유용하지 않을 수 있음을 명확히 알 수 있습니다.StoreDevtoolsModule을 설정할 때 Redux DevTools 확장으로 보낼 작업을 필터링하는 3가지 방법이 있습니다.

actionBlocklist

actionSafelist

predicate

앞의 두 개는 가장 자주 사용하는 것이다.우리는 특정한 행위 패턴을 막을 수도 있고, 특정한 유형의 행위만 허용할 수도 있다.그것들은 모두 문자열 그룹을 값으로 하고, 액션 type 속성에 정규 표현식을 충당하여 우리가 관심 있는 문자열만 필터합니다.
만약 우리가 더욱 구체적인 필터를 하고 싶다면, 우리는 predicate을 사용할 수 있다.이것은 현재 상태와 조작을 매개 변수로 하고 스케줄링된 모든 조작을 호출합니다.Redux DevTools 확장에 작업을 전달하려면 true로 돌아가야 합니다.
이러한 기술을 통해 우리는 확장에서 볼 수 있는 조작 범위를 축소하여 응용 프로그램에서 발생하고 있는 일을 더욱 쉽게 파악할 수 있다.

결론

위에서 언급한 도구와 기술을 사용하면 NgRx 기반 응용 프로그램을 더욱 쉽게 디버깅할 수 있을 것입니다.필요할 때 사용할 수 있는 도구를 이해하는 것이 매우 중요하다.
만약 당신에게 무슨 문제가 있으면 언제든지 트위터나 DM을 나에게 보낼 수 있다.기꺼이 도와드리겠습니다!
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, 웹 구성 요소, GraphQL, Node, Bazel 또는 Polymer에 대한 전문가 아키텍처 지침, 교육 또는 컨설팅은 thisdotlabs.com을 참조하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용성과 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 thisdot.co을 참조하십시오.