Angular2 변경 감지기 디버그

Question

변경 감지기가 응용 프로그램에서 어떻게 실행되는지에 대한 자세한 내용을 보려면 최근 우리는 우리가 우리의 응용 프로그램을 우리가 필요 이상으로 많이 렌더링하고 Angular issue을 제출했다는 것을 발견했습니다. 나는 내가 생각하는 것보다 더 많이 렌더링하고있는 모든 장소를 고칠 수 있었지만 지금은 변경 탐지기가 언제 실행되는지, 실행되는 이유, 그리고 어떤 구성 요소가 더러운지를 쉽게 알기를 원합니다. 실행됩니다. 이 정보를 얻는 가장 좋은 방법은 무엇입니까?

업데이트 : 따라서 변경 감지기가 실행될 때마다 중단되고 확인중인 내용을 확인할 수 있도록 중단 점을 설정하려면 AppView.detectChanges에 중단 점을 설정할 수 있습니다. 그러나, 나는 변화 탐지기를 트리거하는 것이나 점검을 위해 구성 요소를 표시하고있는 사람을 쉽게 판별하는 방법을 여전히 잘 모르고있다.

Answer 1

또 다른 방법은 페이지의 구성 요소에 대한 ngDoCheck 후크를 추가하고 로그인하는 사용자 정의 장식을 만드는 것입니다, 당신은 당신의 페이지에있는 모든 구성 요소에이 장식을 추가해야합니다 이것의 단점 :

(window as any).calls = {}; 
export function debug() { 
    return (constructor: any) => { 
     if (!constructor.prototype.ngDoCheck) { 
      constructor.prototype.ngDoCheck =() => { 
       console.log("ngDoCheck", constructor.name); 
       const calls = (window as any).calls; 
       calls[constructor.name] = calls[constructor.name] ? calls[constructor.name] + 1 : 1; 
      }; 
     } 
    }; 
} 
(window as any).resetCalls =() => (window as any).calls = {}; 

콘솔에서 calls을 확인하면 구성 요소가 가장 많이 불려지는 통계를 확인할 수 있습니다. ngDoCheck 호출은 해당 구성 요소에서 변경 감지가 실행되는 것을 의미하지 않으며 변경 탐지가 상위 구성 요소에서 실행되고 있음을 나타냅니다.

실제로 변경 감지를 실행하는 항목을 일관되게 결정하는 방법은 아직 확실하지 않습니다. 실제 트리거를 기록하려면 일부 아이디어가 ngZone 또는 ChangeDetector보다 우선합니다.