Как получить доступ к Angular2 компонентам в консоли?

Ответ 1

обновление 4.0.0

Пример StackBlitz

обновить RC.1

Пример плунжера В верхнем левом углу консоли браузера (символ фильтра) выберите plunkerPreviewTarget (или запустите демонстрационное приложение в своем собственном окне), затем введите, например,

Выберите компонент в узле DOM и выполните в консоли

ng.probe($0);

или для IE - спасибо Крису Холленбеку (см. комментарии)

ng.probe(document.getElementById('myComponentId')).componentInstance

Alternative

Подсказка: включение инструментов отладки переопределяет ng.probe()

Включить инструменты отладки, такие как:

import {enableDebugTools} from '@angular/platform-browser';

bootstrap(App, []).then(appRef => enableDebugTools(appRef))

Используйте приведенный выше пример Plunker и в консоли выполните, например:

• ng.profiler.appRef
• ng.profiler.appRef._rootComponents[0].instance
• ng.profiler.appRef._rootComponents[0].hostView.internalView
• ng.profiler.appRef._rootComponents[0].hostView.internalView.viewChildren[0].viewChildren

Я еще не нашел способ исследовать директиву Bar.

Augury предоставляет лучший опыт отладки, основанный на этом API

• https://augury.angular.io/
• https://www.youtube.com/watch?v=b1YV9vJKXEA

оригинал (бета)

Вот краткое изложение того, как это сделать https://github.com/angular/angular/blob/master/TOOLS_JS.md (неработающая ссылка, и я не нашел замену).

Включение средств отладки

По умолчанию инструменты отладки отключены. Вы можете включить инструменты отладки следующим образом:

import {enableDebugTools} from 'angular2/platform/browser';

bootstrap(Application).then((appRef) => {
  enableDebugTools(appRef);
});

Использование инструментов отладки

В браузере откройте консоль разработчика (Ctrl + Shift + j в Chrome). Объект верхнего уровня называется ng и содержит более специфические инструменты внутри него.

Пример:

ng.profiler.timeChangeDetection();

Смотри также

• Angular 2: Как включить отладку в angular2 из консоли браузера

Ответ 2

Используйте API ниже для доступа к экземпляру компонента после выбора компонента в chrome с помощью inspect. Вам не нужно выбирать корневой элемент компонента, это может быть любой элемент dom внутри компонента

ng.probe($0).componentInstance

Или вы можете использовать селектор css, как показано в строках ниже, при условии, что выбранный элемент является частью компонента. Здесь '.image-picker' является селектором css

ng.probe($$('.image-picker')[0]).componentInstance

Чтобы сделать это немного проще, зарегистрируйте функцию в области видимости глобального окна, как показано ниже. Затем щелкните любой элемент внутри вашего компонента и вызовите "e()" из консоли.

window['e'] = () => eval('ng.probe($0).componentInstance');

Ответ 3

Использование глобальной переменной области видимости (любой браузер)

index.html

<script>
    var test;
</script>

в файле компонентов

declare var test: any;

После ngOnInit() этого файла компонента

Например

ngOnInit() {
   test = this;

}

Теперь мы можем получить доступ ко всем переменным и функциям этого компонента, включая сервисы (импортированные на этом компоненте).

Если вы хотите запретить доступ к test для выпуска продукции, вы можете условно предоставить доступ к test, например:

constructor(private _configService: ConfigService) {
}
ngOnInit() {
   if(_configService.prod) {
      test = this;
   }

}

Здесь _configService означает экземпляр службы, используемый всеми компонентами и службами.
Таким образом, переменная будет установлена ​​следующим образом:

export class ConfigService {
   prod = false;
}

Ответ 4

Я удивлен, что никто не упомянул здесь Augury, это плагин Chrome, который предоставляет вам удобный доступ ко всей информации в ваших компонентах, а также облегчает непосредственный просмотр этой информации в консоли:

https://augury.rangle.io/