Введение и проблематика

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

Какую проблему решает?

• Визуализирует иерархию компонентов (не DOM-элементов)
• Показывает @Input и @Output значения в реальном времени
• Позволяет анализировать change detection cycles
• Помогает находить узкие места в производительности

Установка

Основные функции

Component Explorer

Component Explorer — главный инструмент для исследования структуры приложения.

Что показывает:

• Дерево компонентов и директив
• Свойства выбранного компонента (@Input, @Output, обычные свойства)
• Dependency Injection зависимости
• Возможность навигации к исходному коду

// Пример компонента
@Component({
  selector: 'app-user-card',
  template: `<div>{{ user.name }}</div>`
})
export class UserCardComponent {
  @Input() user!: User;          // Видно в DevTools как Input
  @Output() selected = new EventEmitter<User>(); // Видно как Output
 
  isHovered = false;             // Видно как обычное свойство
}

В DevTools вы увидите:

• Inputs: user: { name: 'John', id: 1 }
• Outputs: selected: EventEmitter
• Properties: isHovered: false

Инспекция из консоли

После выбора компонента в DevTools, вы можете обратиться к нему из консоли:

// В консоли браузера
$0  // DOM-элемент выбранного компонента
ng.getComponent($0)  // Получить экземпляр компонента

Profiler

Profiler помогает анализировать производительность приложения, особенно циклы change detection.

Как использовать

1. Перейдите на вкладку Profiler в Angular DevTools
2. Нажмите кнопку записи (красный круг)
3. Выполните действия в приложении
4. Остановите запись

Что показывает

• Время каждого change detection цикла
• Какие компоненты проверялись
• Время, затраченное на каждый компонент
• Количество проверок

// Проблемный компонент — тяжёлые вычисления в шаблоне
@Component({
  template: `{{ heavyCalculation() }}`
})
export class ProblematicComponent {
  heavyCalculation() {
    // Вызывается при КАЖДОМ change detection!
    return this.data.reduce((a, b) => a + b, 0);
  }
}

Profiler покажет, что этот компонент занимает много времени при каждом цикле change detection.

Требования для работы

Development mode

Angular DevTools требует, чтобы приложение было собрано с включёнными отладочными возможностями:

# DevTools работает
ng serve
 
# DevTools НЕ работает (production build)
ng build --configuration production

Версия Angular

• Angular DevTools поддерживает Angular 9+
• Для Angular 12+ рекомендуется использовать Ivy (включён по умолчанию)

Поддерживаемые браузеры

• Google Chrome (основная платформа)
• Microsoft Edge (Chromium-based)
• Не поддерживается: Firefox, Safari

Отличие от Augury

До Angular DevTools существовало расширение Augury. Важно понимать различия:

Практические советы

Быстрая навигация к компоненту

1. Выберите элемент в Elements (стандартная вкладка DevTools)
2. Переключитесь на вкладку Angular
3. DevTools автоматически выделит соответствующий компонент

Изменение значений в runtime

В консоли можно изменять свойства компонента:

// Получить компонент
const comp = ng.getComponent($0);
 
// Изменить свойство
comp.isHovered = true;
 
// Запустить change detection
ng.applyChanges(comp);

Поиск компонентов

Используйте поле поиска в Component Explorer для быстрого нахождения компонентов по имени.

Вопросы интервьюера

Q: Что такое Angular DevTools и зачем он нужен?

Официальное расширение для Chrome, позволяющее инспектировать структуру Angular-приложения, просматривать свойства компонентов и профилировать производительность.

Q: Почему Angular DevTools не работает на production-сайте?

В production-сборке Angular удаляет отладочную информацию и API для доступа к компонентам (ng.getComponent и др.) для уменьшения размера бандла и повышения безопасности.

Q: Чем Angular DevTools лучше Augury?

Angular DevTools — официальный инструмент от команды Angular с активной поддержкой. Augury устарел и не полностью совместим с современными версиями Angular.

Q: Как проанализировать производительность change detection?

Использовать вкладку Profiler: начать запись, выполнить действия в приложении, остановить запись и проанализировать время выполнения каждого цикла и компонента.

Источники

• Angular DevTools Overview
• Chrome Web Store: Angular DevTools
• Angular Blog: Introducing Angular DevTools