AngularJS
디버깅

마크 업에서의 기본 디버깅

스코프 테스트 및 모델 출력

<div ng-app="demoApp" ng-controller="mainController as ctrl">
    {{$id}}
    <ul>
        <li ng-repeat="item in ctrl.items">
            {{$id}}<br/>
            {{item.text}}
        </li>
    </ul>
    {{$id}}
    <pre>
       {{ctrl.items | json : 2}}
    </pre>
</div>


angular.module('demoApp', [])
.controller('mainController', MainController);

function MainController() {
    var vm = this;
    vm.items = [{
        id: 0,
        text: 'first'
    },
    {
        id: 1,
        text: 'second'
    },
    {
        id: 2,
        text: 'third'
    }];
}

때로는 범위 지정 문제를 해결할 새 범위가 있는지 확인하는 데 도움이 될 수 있습니다. $scope.$id 는 새 $ 범위가 있는지 확인하기 위해 마크 업의 모든 표현식에서 사용할 수 있습니다.

위의 예에서 ul-tag의 바깥 쪽은 동일한 범위 ($ id = 2)이고 ng-repeat 안의 각 반복마다 새 하위 범위가 있음을 볼 수 있습니다.

사전 태그의 모델 출력은 모델의 현재 데이터를 보는 데 유용합니다. json 필터는 멋진 형식의 출력을 만듭니다. 이 태그 안에는 개행 문자 \n 이 올바르게 표시되기 때문에 사전 태그가 사용됩니다.

데모

ng-inspect 크롬 확장 사용

ng-inspect 는 AngularJS 응용 프로그램을 디버깅하기위한 경량 Chrome 확장 프로그램입니다.

요소 패널에서 노드를 선택하면 범위 관련 정보가 ng-inspect 패널에 표시됩니다.

scope/isolateScope 의 빠른 액세스를위한 전역 변수가 거의 scope/isolateScope .

$s      -- scope of the selected node
$is     -- isolateScope of the selected node
$el     -- jQuery element reference of the selected node (requiers jQuery)
$events -- events present on the selected node (requires jQuery)

서비스 / 공장에 쉽게 접근 할 수 있습니다.

$get() 을 사용하여 서비스 / 팩토리의 인스턴스를 이름으로 검색하십시오.

응용 프로그램의 scope, isolateScopes, watchers 및 listener를 계산하여 응용 프로그램의 성능을 모니터 할 수 있습니다.

$count() 를 사용하여 scope, isolateScopes, watchers 및 listeners의 수를 얻습니다.

참고 :이 확장은 debugInfo가 활성화 된 경우에만 작동합니다.

ng-inspect를 여기에서 다운로드 하십시오.

요소의 범위 가져 오기

각도 응용 프로그램에서는 모든 것이 범위를 벗어나지 만, 요소 범위를 얻을 수 있다면 각도 응용 프로그램을 쉽게 디버그 할 수 있습니다. 요소의 범위에 액세스하는 방법 :

angular.element(myDomElement).scope();
e.g.
angular.element(document.getElementById('yourElementId')).scope()  //accessing by ID

컨트롤러 범위 가져 오기 : -

 angular.element('[ng-controller=ctrl]').scope()

콘솔에서 DOM 요소에 액세스하는 또 다른 쉬운 방법은 ( 'jm'에서 언급했듯이) '요소'탭에서 DOM 요소를 클릭하면 자동으로 $ 0으로 저장됩니다.

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