Devtools 콘솔에서 Angular Ivy 애플리케이션 디버깅

이 게시물은 원래 https://juristr.com/blog/2019/09/debugging-angular-ivy-console에 게시되었습니다. 자세한 내용은 juristr.com/blog로 이동하십시오.


AngularJS(v1.x)에서 브라우저의 devtools에서 구성 요소의 상태를 쉽게 디버그/변경할 수 있었던 방법을 기억하십니까? 이제 Ivy와 함께 다양한 새로운 방법을 여는 새롭고 쉬운 API가 반환됩니다. 어떻게 작동하는지 봅시다.

간단하게 쓸 수 있었던 옛날 AngularJS 시절을 기억하시나요?

> angular.element($0).scope()

...브라우저의 devtools 콘솔에 연결하고 구성 요소 범위에 액세스하여 구성 요소를 조작하고 검사하시겠습니까? 약 3년 전(인간의 시간이 지나가고)에 Debugging Angular Applications에 대한 블로그 게시물을 작성했습니다. AngularJS를 사용하여 브라우저 devtools 콘솔에서 구성 요소 상태를 쉽게 검사할 수 있는 방법과 초기 버전의 Angular(2+)에서 어떻게 변경되었는지 강조했습니다. 실제로 초기 버전의 Angular 2+부터 콘솔에서 구성 요소 상태와 상호 작용할 수 있도록 APIng.probe가 도입되었습니다.

"아이비는 조력자"이고르 미나르

Ivy에서는 새 API가 글로벌ng 개체에 추가되었습니다. devtools(예: Chrome의 Devtools)를 열고 ng 를 입력하면 다음과 같은 내용이 표시됩니다.



이제 우리가 할 수 있는 일은 devtools의 "Elements"패널로 이동하여 예를 들어 <mat-drawer> 구성 요소(Angular Material에서 제공)를 선택하는 것입니다.



요소를 클릭하면 devtools 콘솔에서 $0로 처리할 수 있습니다($1 마지막 두 번째, $2 마지막 세 번째 등..아이디어를 얻습니다). 이제 ng.getComponent(...) 를 사용하고 이전에 기본적으로 $0 선택한 DOM 태그를 직접 전달할 수 있습니다. 구성 요소를 변수에 저장한 다음 상호 작용을 시작할 수 있습니다.



예를 들어 toggle()의 <mat-drawer> 함수를 호출하여 사이드 메뉴를 닫아 보겠습니다.



(확인out the vid in the original post )

실행되는 명령은 다음과 같습니다.

// grab the component instance of the DOM element stored in $0
let matDrawer = ng.getComponent($0);

// interact with the component's API
matDrawer.toggle();

// trigger change detection on the component
ng.markDirty(matDrawer);

ng.probe API는 어떻게 되나요?

아마도 Ivy에서 지원하지 않을 것입니다.

In Ivy, we don't support NgProbe because we have our own set of testing utilities with more robust functionality. We shouldn't bring in NgProbe because it prevents DebugNode and friends from tree-shaking properly.

More details here .

결론

이 새로운 API를 사용하면 편집기와 브라우저 사이를 오갈 필요 없이 구성 요소와 빠르게 상호 작용하고 테스트할 수 있습니다. 그러나 더 나아가 이러한 API를 기반으로 새로운 devtools 확장을 개발하여 우리의 삶을 훨씬 더 용이하게 할 수 있습니다. 예를 들어, 구성 요소를 살펴보면 __ngContext__가 연결되어 있으며 여기에는 구성 요소와 템플릿 속성을 쿼리하는 흥미로운 메서드가 많이 포함된 debug 개체가 있습니다. 그러나 이러한 API(또는 그 중 일부)는 개발 모드에서만 사용할 수 있으며 프로덕션 모드에서 컴파일됩니다.