Как использовать Angular DevTools?angular-102

Angular DevTools (ранее Augury) — это официальное расширение для отладки Angular-приложений, разработанное командой Angular. Вот подробный гайд по его использованию:

Установка и базовый функционал

  1. Установка:

  2. Активация:

    • Открыть DevTools (F12 или Ctrl+Shift+I)
    • Перейти на вкладку "Angular"
// Проверка доступности DevTools в консоли:
console.log('Angular DevTools доступны:', window.ng !== undefined);

Основные вкладки инструмента

1. Components

Дерево компонентов с иерархией и свойствами:

  • Просмотр Input/Output свойств
  • Изменение значений в реальном времени
  • Поиск по имени компонента
<!-- Пример отображения свойств -->
<app-user [user]="currentUser" (selected)="onSelect()"></app-user>

В DevTools будет отображено:

  • Input: user: {name: "John", age: 30}
  • Output: selected: EventEmitter

2. Profiler

Запись и анализ производительности:

  1. Нажмите "Start recording"
  2. Взаимодействуйте с приложением
  3. Нажмите "Stop recording"
  4. Анализируйте:
    • Время Change Detection
    • Компоненты с проблемами производительности

3. Injector Graph

Визуализация DI-дерева:

  • Просмотр предоставленных сервисов
  • Поиск circular dependencies
  • Анализ scope сервисов

Продвинутые техники

Отладка изменений

  1. Выделите компонент в DevTools
  2. Включите "Highlight updates"
  3. Наблюдайте за подсветкой изменений

Доступ к инстансу компонента

// В консоли DevTools:
const component = ng.getComponent($0);
console.log(component.someProperty);
component.someMethod();

Изменение состояния

  1. Найдите компонент в дереве
  2. Измените значение свойства
  3. Нажмите Enter для применения

Практические примеры

Пример 1: Отладка бага

  1. Откройте проблемный компонент
  2. Проверьте:
    • Состояние Input-свойств
    • Вызовы жизненного цикла
    • Привязанные обработчики

Пример 2: Анализ производительности

  1. Запустите Profiler
  2. Выполните медленную операцию
  3. Найдите компоненты с долгим рендерингом

Пример 3: Поиск memory leak

  1. Сделайте несколько навигаций
  2. Проверьте оставшиеся компоненты
  3. Анализируйте подписки

Полезные советы

  1. Горячие клавиши:

    • Ctrl+P в DevTools → быстрый переход к компоненту
    • $0 в консоли → доступ к выделенному элементу

  2. Интеграция с IDE:

    • Клик по имени файла компонента → открытие в редакторе

  3. Для библиотек:

    • Работает с Angular Material, NGXS, NGRX
    • Показывает компоненты библиотек в дереве

Резюмируем

Angular DevTools — незаменимый инструмент для разработчика Angular, предоставляющий глубокую интроспекцию приложения через компонентное дерево, профилировщик и граф зависимостей. Для эффективной отладки используйте комбинацию визуального анализа и консольных команд, особенно при работе со сложными состояниями и проблемами производительности.

Вопросы

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