DevTools Обзор¶
28.02.2022
Angular DevTools — это расширение для браузера, предоставляющее возможности отладки и профилирования приложений Angular. Angular DevTools поддерживает Angular v12 и более поздние версии при компиляции с отключенной опцией optimization configuration option ({optimization:false}).
Angular DevTools можно найти в Chrome Web Store и в Firefox Addons.
После установки Angular DevTools найдите расширение на вкладке Angular в DevTools вашего браузера.
Когда вы откроете расширение, вы увидите две дополнительные вкладки:
| Tabs | Details |
|---|---|
| Компоненты | Позволяет исследовать компоненты и директивы в вашем приложении, просматривать или редактировать их состояние. |
| Profiler | Позволяет профилировать приложение и понять, что является узким местом в производительности во время выполнения обнаружения изменений. |
В правом верхнем углу Angular DevTools вы увидите, какая версия Angular запущена на странице, а также хэш последнего коммита для расширения.
Сообщения об ошибках¶
Сообщайте о проблемах и запросах на GitHub.
Чтобы сообщить о проблеме с Profiler, экспортируйте запись Profiler, нажав на кнопку Save Profile, а затем прикрепите этот экспорт в виде файла к проблеме.
Убедитесь, что запись Profiler не содержит никакой конфиденциальной информации.
Отладка вашего приложения¶
Вкладка Компоненты позволяет исследовать структуру вашего приложения. Вы можете визуализировать и проверять экземпляры компонентов и директив, а также просматривать или изменять их состояние.
В следующих двух разделах мы рассмотрим, как эффективно использовать эту вкладку для отладки приложения.
Исследовать структуру приложения¶
На предыдущем снимке экрана вы можете видеть дерево компонентов приложения.
Дерево компонентов отображает иерархические отношения компонентов и директив в вашем приложении. Когда вы выбираете компонент или экземпляр директивы, Angular DevTools представляет дополнительную информацию об этом экземпляре.
Свойства просмотра¶
Нажмите на отдельные компоненты или директивы в проводнике компонентов, чтобы выбрать их и просмотреть их свойства. Angular DevTools отображает их свойства и метаданные в правой части дерева компонентов.
Перемещайтесь по дереву компонентов с помощью мыши или следующих сочетаний клавиш:
| Сочетание клавиш | Детали |
|---|---|
| Стрелки вверх и вниз | Выберите предыдущий и следующий узлы |
| Стрелки влево и вправо | Свернуть и развернуть узел |
Чтобы найти компонент или директиву по имени, используйте поле поиска над деревом компонентов. Чтобы перейти к следующему поисковому запросу, нажмите Enter.
Чтобы перейти к предыдущему поиску, нажмите Shift + Enter.
Переход к узловому элементу¶
Чтобы перейти к узловому элементу определенного компонента или директивы, найдите его в проводнике компонентов и дважды щелкните по нему. DevTools браузера откроет вкладку Elements в Chrome или Inspector в Firefox и выберет связанный узел DOM.
Перейдите к источнику¶
Для компонентов Angular DevTools также позволяет перейти к определению компонента на вкладке источника. После выбора определенного компонента нажмите на значок в правом верхнем углу представления свойств:
Обновить значение свойства¶
Как и в DevTools браузеров, представление свойств позволяет редактировать значение входного, выходного или другого свойства. Щелкните правой кнопкой мыши на значении свойства.
Если для данного типа значения доступна функция редактирования, появится текстовый ввод.
Введите новое значение и нажмите Enter.
Доступ к выбранному компоненту или директиве в консоли¶
В качестве ярлыка в консоли Angular DevTools предоставляет доступ к экземплярам недавно выбранных компонентов или директив. Введите $ng0, чтобы получить ссылку на экземпляр текущего выбранного компонента или директивы, и $ng1 для ранее выбранного экземпляра.
Выберите директиву или компонент¶
Подобно DevTools браузеров, вы можете осмотреть страницу, чтобы выбрать определенный компонент или директиву. Нажмите на значок Inspect element в верхнем левом углу в Angular DevTools и наведите курсор на элемент DOM на странице.
Расширение распознает связанные директивы и/или компоненты и позволит вам выбрать соответствующий элемент в дереве компонентов.
Профиль вашего приложения¶
Вкладка Profiler позволяет вам предварительно просмотреть выполнение обнаружения изменений в Angular.
Профилировщик позволяет начать профилирование или импортировать существующий профиль. Чтобы начать профилирование приложения, наведите курсор на круг в левом верхнем углу вкладки Профилировщик и нажмите Начать запись.
Во время профилирования Angular DevTools фиксирует события выполнения, такие как обнаружение изменений и выполнение хуков жизненного цикла. Чтобы закончить запись, снова нажмите на круг, чтобы Остановить запись.
Вы также можете импортировать существующую запись. Подробнее об этой возможности читайте в разделе "Импорт записи".
Понимание выполнения вашего приложения¶
На следующем снимке экрана показан стандартный вид профайлера после завершения записи.
В верхней части представления вы можете увидеть последовательность полос, каждая из которых символизирует циклы обнаружения изменений в вашем приложении. Чем выше столбик, тем дольше ваше приложение находилось в этом цикле.
Когда вы выбираете столбик, DevTools отображает гистограмму со всеми компонентами и директивами, которые он зафиксировал во время этого цикла.
Ранее на временной шкале обнаружения изменений вы можете узнать, сколько времени Angular провел в этом цикле. Angular DevTools пытается оценить падение кадров в этот момент, чтобы указать, когда выполнение вашего приложения может повлиять на пользовательский опыт.
Angular DevTools также указывает, что вызвало обнаружение изменений (то есть, источник).
Понимание выполнения компонентов¶
Когда вы нажимаете на панель, вы получаете подробное представление о том, сколько времени ваше приложение провело в конкретной директиве или компоненте:
На рисунке показано общее время, затраченное директивой NgforOf, и какой метод был вызван в ней. Здесь также показана родительская иерархия выбранной директивы.
Иерархические представления¶
Вы также можете предварительно просмотреть выполнение обнаружения изменений в виде пламенного графа. Каждая плитка в графе представляет элемент на экране в определенной позиции в дереве рендеринга.
Например, если во время одного цикла обнаружения изменений в определенной позиции дерева компонентов у вас был ComponentA, этот компонент был удален, а на его место Angular отобразил ComponentB, вы увидите оба компонента на одной плитке.
Каждый тайл окрашивается в зависимости от того, сколько времени Angular провел там. DevTools определяет интенсивность цвета по времени, проведенному относительно плитки, на которой мы провели больше всего времени при обнаружении изменений.
Когда вы нажимаете на определенную плитку, вы увидите подробную информацию о ней на панели справа. Двойной щелчок по плитке увеличивает ее, чтобы можно было просмотреть вложенные дочерние элементы.
Отладка OnPush¶
Чтобы просмотреть компоненты, в которых Angular выполнил обнаружение изменений, установите флажок Обнаружение изменений вверху, над графиком пламени.
В этом представлении все плитки, в которых Angular выполнил обнаружение изменений, окрашены в зеленый цвет, а остальные — в серый:
Импорт записи¶
Нажмите кнопку Сохранить профиль в левом верхнем углу записанного сеанса профилирования, чтобы экспортировать его в файл JSON и сохранить на диске. Затем импортируйте файл в начальном представлении профилировщика, нажав на вход Выбрать файл:
