user gravatar

Отладка приложение на AngularJS из консоли

Отладка приложение на AngularJS из консоли

При создании приложений на AngularJS, очень трудно получить глубоко скрытые в приложении данные и сервисы через Javascript консоль Chrome, Firefox, IE. С помощью трюков, которыми я поделюсь в этом посте, вы сможете проверять и контролировать ваше приложение через Javascript консоль браузера. За счет этого вам будет легче тестировать, модифицировать и даже программировать приложение на AngularJS в реальном времени.

1. Доступ к области видимости переменных

Мы можем получить доступ к любой области видимости переменных (даже изолированным) на странице с помощью простой Javascript команды:

> angular.element(targetNote).scope()

-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

Для изолированных областей видимости переменных вы можете использовать:

> angular.element(targetNode).isolateScope()

-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

'targetNote' заменяете на HTML Node. Вы можете легко получить его используя document.querySelector()

2. Получение дерева областей видимости переменных

Иногда нам нужно увидеть что представляют собой области видимости на странице для эффективной отладки приложения. AngularJS Batarang это расширение для Chrome, которое показывает полезную информацию относительно вашего приложения, в том числе иерархию дерева областей видимости..

Проверка Дерева Областей

3. Получить любой сервис

Мы можем получить ссылку к любому сервису используя функцию injector элемента где ngApp был объявлен (или получить $rootElement вручную):

> angular.element('html').injector().get('MyService')

-> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

После чего мы можем вызывать методы сервиса.

4. Получить доступ к контроллеру директивы

Некоторые директивы объявляют контроллер с определенной дополнительной функциональностью. Для того чтобы получить доступ к контроллеру заданной директивы из консоли, просто используйте функцию controller():

> angular.element('my-pages').controller()

-> Constructor {}

5. Особенности консоли Chrome

В браузере Chrome есть куча хороших функций для отладки приложений из консоли. Вот самые полезные сокращений при разработке AngularJS приложений:

  • $0 - $4: Получить последние 5 DOM элементов выбранные в окне инспектора. Это очень удобно при получении областей к выбранным областям: ```angular.element($0).scope()

  • $(selector) и $$(selector): Быстрая замена для querySelector() и querySelectorAll.

Вывод

С помощью пары простых трюков мы можем получить данные из любой области страницы, получить иерархию областей, внедрять сервисы и контролировать директивы.

Так что в следующий раз когда вы захотите добавить новый функционал в приложение, проверить вашу работу или контролировать ваше приложение на AngularJS через консоль, я надеюсь вы вспомните эти команды и найдете им применение!

(Original - Отладка приложение на AngularJS из консоли)