AngularJS
Debugging

Eenvoudig debuggen in markup

Scope testen & output van model

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

Soms kan het helpen om te zien of er een nieuwe scope is om problemen met scoping op te lossen. $scope.$id kan overal in uw markup worden gebruikt om te zien of er een nieuwe $ scope is.

In het voorbeeld kun je zien dat buiten de ul-tag hetzelfde bereik is ($ id = 2) en binnen de ng-repeat er nieuwe kindbereiken voor elke iteratie.

Een uitvoer van het model in een pre-tag is handig om de huidige gegevens van uw model te bekijken. Het json filter zorgt voor een mooie, opgemaakte uitvoer. De pre-tag wordt gebruikt omdat binnen die tag elk teken van een nieuwe regel \n correct wordt weergegeven.

demonstratie

Gebruik van ng-inspect Chrome-extensie

ng-inspect is een lichtgewicht Chrome-extensie voor het debuggen van AngularJS-applicaties.

Wanneer een knooppunt wordt geselecteerd in het elementenpaneel, wordt de bereikgerelateerde informatie weergegeven in het paneel ng-inspect.

Toont weinig globale variabelen voor snelle toegang tot 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)

Biedt gemakkelijke toegang tot Services / Fabrieken.

Gebruik $get() om het exemplaar van een service / fabriek op naam op te halen.

De prestaties van de applicatie kunnen worden gecontroleerd door het aantal scopes, isolateScopes, watchers en luisteraars op de applicatie te tellen.

Gebruik $count() om het aantal scopes, isolateScopes, watchers en luisteraars te krijgen.

Opmerking: deze extensie werkt alleen als debugInfo is ingeschakeld.

Download ng-inspect hier

Bereik van het bereik van het element

In een hoekige app gaat alles rond bereik, als we een elementenbereik kunnen krijgen, is het eenvoudig om de hoekige app te debuggen. Hoe toegang te krijgen tot het bereik van het element:

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

Bereik van de controller: -

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

Een andere gemakkelijke manier om toegang te krijgen tot een DOM-element vanaf de console (zoals jm al zei) is door erop te klikken in het tabblad 'elementen' en het wordt automatisch opgeslagen als $ 0.

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