Chrome 브라우저를 사용하여 AngularJS 애플리케이션을 디버깅하는 방법_AngularJS

AngularJS 애플리케이션을 구축할 때 Chrome, Firefox, IE와 같은 브라우저의 JavaScript 콘솔을 통해 애플리케이션에 숨겨진 데이터와 서비스에 액세스하는 것은 항상 약간 어렵습니다. 다음은 Javascript 콘솔을 통해 실행 중인 Angular 애플리케이션을 보거나 제어하여 Angular 애플리케이션을 실시간으로 더 쉽게 테스트, 수정 및 수정하는 데 도움이 되는 몇 가지 간단한 기술입니다.
1: 액세스 범위

JS의 간단한 줄을 사용하여 페이지의 모든 범위(격리된 범위도 포함)에 액세스하세요.

> angular.element(targetNode).scope()
-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

격리 범위의 경우:

> angular.element(targetNode).isolateScope()
-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

여기서는 HTML 노드에 대한 참조로 `targetNode`를 사용하세요. `document.querySelector()`를 통해 `targetNode`를 쉽게 생성할 수 있습니다

2: 범위 트리 보기

애플리케이션을 효과적으로 디버깅하기 위해 페이지에서 범위 계층 구조를 확인해야 하는 경우가 있습니다. AngularJS Batarang은 우리에게 꼭 필요한 것입니다. 현재 범위 계층 구조를 표시할 수 있고 기타 매우 유용한 기능을 제공하는 Chrome 브라우저 확장 프로그램입니다.

3: 원하는 서비스 이용

ngApp이 정의된 위치에 관계없이 인젝터 기능을 사용하여 모든 서비스에 대한 참조를 가져올 수 있습니다(Angular의 부트스트랩 방법을 사용하는 경우 $rootElement를 수동으로 가져올 수 있음).

> angular.element('html').injector().get('MyService')
-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

그런 다음 서비스를 삽입할 수 있는 것처럼 서비스를 호출할 수 있습니다.

4: 액세스 컨트롤러 사용 지침

일부 지시문은 추가(일반적으로 공유) 기능이 있는 컨트롤러를 정의합니다. 콘솔에서 특정 지시어에 대한 컨트롤러 인스턴스에 액세스하려면 간단히 컨트롤러() 메서드를 사용하세요.

> angular.element('my-pages').controller()
-> Constructor {}

마지막 접근 방식은 더욱 발전되었으며 덜 일반적으로 사용됩니다.
5: Chrome 콘솔 기능

Chrome 콘솔에는 브라우저 앱 디버깅을 위한 다양한 단축키가 있습니다. 다음은 Angular 개발의 모범 사례 중 일부입니다.

• $0-$4: 보기 창에서 최근 선택한 5개의 DOM 요소에 액세스합니다. 크롤링 범위를 선택하는 것이 매우 편리합니다.
• $(selector) 및 $$(selector): 각각 querySelector() 및 querySelectorAll에 대한 빠른 대안

이 방법을 제공해 주신 @zgohr에게 감사드립니다!

결론

몇 가지 간단한 트릭을 사용하면 페이지의 모든 범위에 있는 데이터에 액세스하고, 범위 계층 구조를 보고, 서비스를 삽입하고 명령을 제어할 수 있습니다.

다음번에 약간 수정하고 싶거나 콘솔을 통해 자신의 작업을 확인하거나 AngularJS 애플리케이션을 제어하고 싶다면 이 명령을 기억하고 저처럼 유용하게 사용하시기 바랍니다!