Как дебажить Angular-приложение в браузере?angular-101

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

1. Augury

Лучший инструмент специально для Angular, устанавливается как расширение Chrome/Firefox.

Что позволяет:

  • Просматривать дерево компонентов с их свойствами
  • Анализировать состояние инжектора
  • Отслеживать изменения Input/Output
  • Профилировать производительность
// Пример использования:
// 1. Установите Augury из Chrome Web Store
// 2. Откройте DevTools (F12) → вкладка Augury
// 3. Навигация по компонентам и их зависимостям

2. Angular Source Maps

Для отладки TypeScript-кода (не транcпилированного JS):

// angular.json
"build": {
  "options": {
    "sourceMap": true,
    "vendorSourceMap": true
  }
}

После этого в Sources Chrome DevTools вы увидите оригинальные TS-файлы.

3. console.angular

Специальные методы для отладки:

// Вывести компонент в консоль
ng.probe($0).componentInstance

// Получить инжектор
ng.probe($0).injector

// Вывести сервис из инжектора
ng.probe($0).injector.get(MyService)

4. Breakpoints в DevTools

Полезные места для брейкпоинтов:

  • Жизненный цикл компонента (ngOnInit, ngOnChanges)
  • Хендлеры событий
  • HTTP-интерсепторы
  • RxJS операторы (tap, catchError)
// Пример debugger в коде:
processData(data) {
  debugger; // Остановит выполнение
  return data.map(item => ({...item, processed: true}));
}

5. Логирование изменений

Для отслеживания изменений в шаблоне:

// В компоненте:
ngAfterViewChecked() {
  console.log('CD:', this.changeDetector['_view'].nodes);
}

6. Профилирование производительности

  1. Откройте Chrome DevTools → Performance
  2. Запишите работу приложения
  3. Анализируйте:
    • Дерево вызовов
    • Время Change Detection
    • Проблемные компоненты

7. Отладка RxJS

Используйте оператор tap:

this.dataService.getData().pipe(
  tap(data => console.log('Data received:', data)),
  catchError(err => {
    console.error('Error:', err);
    return throwError(err);
  })
);

8. Расширенные методы

Для сложных случаев:

  • ng.getDirectives($0) - получить директивы элемента
  • ng.applyChanges(component) - форсировать Change Detection
  • window.ng - доступ к Angular runtime API

Полезные сочетания клавиш

  • Ctrl+Shift+F - поиск по всем файлам в DevTools
  • Ctrl+P → :line - переход к строке
  • Ctrl+Shift+P → Coverage - анализ покрытия кода

Резюмируем

эффективная отладка Angular-приложений требует комбинации специальных инструментов (Augury), правильной настройки source maps, использования Angular-specific console методов и классических подходов к отладке JavaScript. Всегда начинайте с Augury для анализа структуры приложения, затем переходите к точечной отладке в DevTools.

Вопросы

Собеседования