AngularJS
Debuggen

Grundlegendes Debugging in Markup

Umfangstest und Ausgabe des Modells

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

Manchmal kann es hilfreich sein zu sehen, ob es einen neuen Spielraum gibt, um Probleme mit dem Umfang zu beheben. $scope.$id kann überall in Ihrem Markup in einem Ausdruck verwendet werden, um festzustellen, ob es einen neuen $ scope gibt.

Im Beispiel sehen Sie, dass sich außerhalb des ul-Tags derselbe Gültigkeitsbereich ($ id = 2) befindet, und innerhalb der ng-repeat gibt es für jede Iteration neue untergeordnete Gültigkeitsbereiche.

Eine Ausgabe des Modells in einem Pre-Tag ist hilfreich, um die aktuellen Daten Ihres Modells anzuzeigen. Der json Filter erzeugt eine gut aussehende formatierte Ausgabe. Das Pre-Tag wird verwendet, da innerhalb dieses Tags alle neuen Zeilen \n korrekt angezeigt werden.

Demo

Mit ng-inspect Chromverlängerung

ng-inspect ist eine leichte Chrome-Erweiterung zum Debuggen von AngularJS-Anwendungen.

Wenn ein Knoten im Elementbereich ausgewählt wird, werden die Informationen zum Bereich im Bereich ng-inspect angezeigt.

Stellt einige globale Variablen für den schnellen Zugriff auf 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)

Bietet einfachen Zugriff auf Services / Factories.

Verwenden Sie $get() , um die Instanz eines Service / Factory nach Namen abzurufen.

Die Leistung der Anwendung kann überwacht werden, indem die Anzahl der Bereiche, IsolateScopes, Beobachter und Listener in der Anwendung gezählt wird.

Verwenden Sie $count() , um die Anzahl der Bereiche, isolateScopes, Beobachter und Zuhörer zu ermitteln.

Hinweis: Diese Erweiterung funktioniert nur, wenn DebugInfo aktiviert ist.

Download ng-inspizieren hier

Den Umfang des Elements erhalten

In einer Winkel-App geht alles um den Umfang. Wenn wir einen Element-Bereich erhalten könnten, ist es einfach, die Winkel-App zu debuggen. So greifen Sie auf den Umfang des Elements zu:

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

Den Umfang des Controllers erhalten: -

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

Eine andere einfache Möglichkeit, auf ein DOM-Element über die Konsole zuzugreifen (wie von jm erwähnt), ist das Klicken auf das Register "Elemente". Es wird automatisch als $ 0 gespeichert.

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