AngularJS
Le débogage

Débogage de base dans le balisage

Test de la portée et sortie du modèle

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

Parfois, il peut être utile de voir s'il existe une nouvelle portée pour résoudre les problèmes de portée. $scope.$id peut être utilisé dans une expression partout dans votre balisage pour voir s'il y a un nouveau $ scope.

Dans l'exemple, vous pouvez voir que l'extérieur de ul-tag a la même portée ($ id = 2) et à l'intérieur de ng-repeat il y a de nouvelles étendues enfants pour chaque itération.

Une sortie du modèle dans une pré-balise est utile pour voir les données actuelles de votre modèle. Le filtre json crée une belle sortie formatée. La pré-balise est utilisée car à l'intérieur de cette balise, tout caractère de nouvelle ligne \n sera correctement affiché.

démo

Utilisation de l'extension chrome ng-inspect

ng-inspect est une extension Chrome légère pour le débogage des applications AngularJS.

Lorsqu'un nœud est sélectionné dans le panneau des éléments, les informations relatives à la portée sont affichées dans le panneau ng-inspect.

Expose peu de variables globales pour un accès rapide à 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)

Permet d'accéder facilement aux services / usines.

Utilisez $get() pour récupérer l'instance d'un service / d'une usine par son nom.

Les performances de l'application peuvent être surveillées en comptant le nombre de portées, d'isolateScopes, d'observateurs et d'auditeurs de l'application.

Utilisez $count() pour obtenir le nombre de portées, isolateScopes, les observateurs et les écouteurs.

Remarque: cette extension ne fonctionnera que lorsque le paramètre debugInfo est activé.

Téléchargez ng-inspect ici

Obtenir la portée de l'élément

Dans une application angulaire, tout tourne autour de la portée, si l'on peut obtenir une étendue d'éléments, il est facile de déboguer l'application angulaire. Comment accéder à la portée de l'élément:

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

Obtenir la portée du contrôleur: -

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

Un autre moyen facile d'accéder à un élément DOM à partir de la console (comme mentionné par jm) consiste à cliquer dessus dans l'onglet "elements", et il sera automatiquement stocké sous la forme $ 0.

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