AngularJS
Debug

Debug di base nel markup

Test dell'ottica e produzione del modello

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

A volte può essere d'aiuto vedere se esiste un nuovo ambito per risolvere i problemi dell'ambito. $scope.$id può essere usato in un'espressione ovunque nel markup per vedere se c'è un nuovo $ scope.

Nell'esempio si può vedere che al di fuori del ul-tag è lo stesso scope ($ id = 2) e all'interno di ng-repeat ci sono nuovi ambiti figlio per ogni iterazione.

Un output del modello in un pre-tag è utile per vedere i dati correnti del tuo modello. Il filtro json crea un output formattato piacevole. Il pre-tag è usato perché all'interno di quel tag qualsiasi carattere di nuova riga \n verrà visualizzato correttamente.

dimostrazione

Utilizzando l'estensione chrome di ng-inspect

ng-inspect è una leggera estensione Chrome per il debug delle applicazioni AngularJS.

Quando viene selezionato un nodo dal pannello degli elementi, le informazioni relative all'ambito vengono visualizzate nel pannello di ispezione.

Espone alcune variabili globali per l'accesso rapido di 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)

Fornisce un facile accesso a servizi / fabbriche.

Utilizzare $get() per recuperare l'istanza di un servizio / fabbrica per nome.

Le prestazioni dell'applicazione possono essere monitorate contando il no.of scopes, isolationScopes, watcher e ascoltatori sull'applicazione.

Usa $count() per ottenere il conteggio degli ambiti, isolareScopes, osservatori e ascoltatori.

Nota: questa estensione funzionerà solo quando il debugInfo è abilitato.

Scarica ng-inspect qui

Ottenere l'ambito dell'elemento

In un'app angolare tutto gira attorno all'ambito, se potessimo ottenere uno scope di elementi allora è facile eseguire il debug dell'applicazione angolare. Come accedere all'ambito dell'elemento:

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

Ottenere lo scopo del controller: -

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

Un altro modo semplice per accedere a un elemento DOM dalla console (come menzionato da jm) è di fare clic su di esso nella scheda 'elementi' e viene automaticamente salvato come $ 0.

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