AngularJS
Debugowanie

Podstawowe debugowanie w znacznikach

Testowanie zakresu i wyjście modelu

<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'
    }];
}

Czasami może pomóc sprawdzić, czy istnieje nowy zakres do rozwiązywania problemów z zasięgiem. $scope.$id może być używany w wyrażeniu w dowolnym miejscu twojego znacznika, aby sprawdzić, czy jest nowy $ scope.

W przykładzie widać, że poza ul-tag jest ten sam zakres ($ id = 2), a wewnątrz ng-repeat są nowe zakresy potomne dla każdej iteracji.

Dane wyjściowe modelu w tagu wstępnym są przydatne, aby wyświetlić bieżące dane modelu. Filtr json tworzy ładnie sformatowane wyjście. Znacznik wstępny jest używany, ponieważ wewnątrz tego znacznika dowolny znak nowej linii \n będzie poprawnie wyświetlany.

próbny

Korzystanie z rozszerzenia chrome-ng-inspect

ng-inspect to lekkie rozszerzenie Chrome do debugowania aplikacji AngularJS.

Po wybraniu węzła z panelu elementów informacje związane z zakresem są wyświetlane w panelu ng-inspect.

Udostępnia kilka zmiennych globalnych dla szybkiego dostępu do 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)

Zapewnia łatwy dostęp do usług / fabryk.

Użyj $get() aby pobrać instancję usługi / fabryki według nazwy.

Wydajność aplikacji można monitorować, licząc liczbę zakresów, zakresów isolate, obserwatorów i słuchaczy w aplikacji.

Użyj $count() aby uzyskać liczbę zakresów, isolScopes, obserwatorów i słuchaczy.

Uwaga: To rozszerzenie będzie działać tylko wtedy, gdy włączone jest debugInfo.

Pobierz ng-inspect tutaj

Uzyskiwanie zakresu elementu

W aplikacji kątowej wszystko kręci się wokół zakresu, jeśli moglibyśmy uzyskać zakres elementów, łatwo jest debugować aplikację kątową. Jak uzyskać dostęp do zakresu elementu:

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

Uzyskanie zakresu kontrolera: -

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

Innym łatwym sposobem na uzyskanie dostępu do elementu DOM z konsoli (jak wspomniano w jm) jest kliknięcie go w zakładce „elementy” i automatycznie zostanie on zapisany jako 0 USD.

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