AngularJS
Depuración

Depuración básica en el marcado.

Prueba de alcance y salida del modelo

<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 veces puede ayudar a ver si hay un nuevo alcance para solucionar los problemas de alcance. $scope.$id puede usarse en una expresión en cualquier parte de su marca para ver si hay un nuevo $ scope.

En el ejemplo, puede ver que fuera de la etiqueta ul es el mismo ámbito ($ id = 2) y dentro de la ng-repeat hay nuevos ámbitos secundarios para cada iteración.

Una salida del modelo en una etiqueta previa es útil para ver los datos actuales de su modelo. El filtro json crea una salida con formato de aspecto agradable. La etiqueta previa se usa porque dentro de esa etiqueta se mostrará correctamente cualquier carácter de línea nueva \n .

manifestación

Usando ng-inspect chrome extension

ng-inspect es una extensión ligera de Chrome para depurar aplicaciones AngularJS.

Cuando se selecciona un nodo en el panel de elementos, la información relacionada con el alcance se muestra en el panel de inspección ng.

Expone pocas variables globales para un acceso rápido de 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)

Proporciona fácil acceso a Servicios / Fábricas.

Use $get() para recuperar la instancia de un servicio / fábrica por nombre.

El rendimiento de la aplicación se puede monitorear contando el no.de ámbitos, aislar los microscopios, observadores y oyentes de la aplicación.

Use $count() para obtener el recuento de ámbitos, aislar microscopios, observadores y oyentes.

Nota: esta extensión solo funcionará cuando debugInfo esté habilitado.

Descargar ng-inspect aquí

Consiguiendo el alcance del elemento

En una aplicación angular, todo va alrededor del alcance, si pudiéramos obtener un alcance de elementos, entonces es fácil depurar la aplicación angular. Cómo acceder al alcance del elemento:

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

Conseguir el alcance del controlador: -

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

Otra forma fácil de acceder a un elemento DOM desde la consola (como se mencionó jm) es haciendo clic en él en la pestaña 'elementos', y se almacena automáticamente como $ 0.

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