AngularJS
отладка

Базовая отладка в разметке

Тестирование области и выпуск модели

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

Иногда это может помочь увидеть, есть ли новая область для исправления проблем, связанных с определением области охвата. $scope.$id можно использовать в выражении везде в вашей разметке, чтобы увидеть, есть ли новая область $.

В этом примере вы можете видеть, что за пределами ul-тега используется та же область ($ id = 2), а внутри ng-repeat для каждой итерации есть новые дочерние области.

Вывод модели в предтеге полезен для просмотра текущих данных вашей модели. Фильтр json создает неплохо выглядящий отформатированный вывод. Предтег используется, потому что внутри этого тега будет отображаться правильный символ новой строки \n .

демонстрация

Использование расширения chg ng-inspect

ng-inspect - это небольшое расширение Chrome для отладки приложений AngularJS.

Когда узел выбран на панели элементов, информация об области видимости отображается в панели проверки ng.

Предоставляет несколько глобальных переменных для быстрого доступа к 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)

Обеспечивает легкий доступ к Сервисам / Фабрикам.

Используйте $get() для извлечения экземпляра службы / фабрики по имени.

Производительность приложения может контролироваться путем подсчета количества областей, изолятов, наблюдателей и слушателей в приложении.

Используйте $count() чтобы получить количество областей, isolateScopes, наблюдателей и слушателей.

Примечание. Это расширение будет работать только при включенном debugInfo.

Скачайте ng-inspect здесь

Получение области элемента

В угловом приложении все идет по объему, если мы можем получить область видимости, тогда легко отлаживать угловое приложение. Как получить доступ к объему элемента:

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

Получение объема контроллера: -

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

Еще один простой способ получить доступ к элементу DOM из консоли (как указано в jm) - это щелкнуть по нему на вкладке «Элементы», и он автоматически будет сохранен как $ 0.

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