Chrome 콘솔에서 Angular 9 디버그

These functions are exposed via the global ng "namespace" variable automatically when you import from @angular/core and run your application in development mode. These functions are not exposed when the application runs in a production mode.

Chrome 콘솔 유틸리티

Chrome 콘솔 사용의 가장 큰 장점은 선택한 DOM 요소에 액세스할 수 있다는 것입니다. 마지막 항목의 경우 콘솔에 $0를 입력하여 참조를 얻을 수 있습니다. 아래에서 선택 도구를 사용하여 요소를 쉽게 찾을 수 있음을 알 수 있습니다. 이것이 선택되면 $0를 사용할 수 있습니다. 이는 선택 히스토리에서 최신 것입니다. 이에 대한 자세한 내용은 Console Utilities API Reference에서 읽을 수 있습니다.

Angular Component 참조 가져오기

이제 DOM 참조를 얻는 방법을 알았으므로 Angular 유틸리티를 사용할 수 있습니다. 여기에서 자세한 내용을 찾을 수 있습니다. https://angular.io/api/core/global#entry-point-exports .ng.getContext($0)를 사용하여 Angular 구성 요소 인스턴스에 액세스할 수 있습니다.

// Get this component
let dialogComponent = ng.getContext($0)

// Get parent component
let dialogParentComponent = ng.getOwningComponent($0)

구성 요소의 값 변경

이제 let dialogComponent = ng.getContext($0)를 사용하여 구성 요소에 대한 참조가 있으므로 이제 구성 요소 내의 속성을 업데이트할 수 있습니다. 이 예에서는 recipeIngredient 개체에서 qty를 변경합니다.

dialogComponent.data.recipeIngredient.qty = 5

구조를 모르는 경우 전체 구성 요소를 표시할 수도 있습니다.

구성 요소 업데이트하기

구성 요소 내에서 표시할 값 변경을 가져오려면 변경 감지를 트리거해야 합니다.

// Apply change detection
ng.applyChanges(dialogComponent)