Angular DevTools — расширение браузера, предоставляющее возможности отладки и профилирования для Angular-приложений.
Установите Angular DevTools из Chrome Web Store или из Firefox Addons.
Открыть Chrome или Firefox DevTools на любой веб-странице можно, нажав F12 или Ctrl+Shift+I (Windows или Linux) и Fn+F12 или Cmd+Option+I (Mac). После открытия DevTools браузера и установки Angular DevTools его можно найти на вкладке «Angular».
ПОЛЕЗНО: Страница новой вкладки Chrome не запускает установленные расширения, поэтому вкладка Angular не появится в DevTools. Откройте любую другую страницу, чтобы увидеть её.
Открытие приложения
При открытии расширения вы увидите четыре дополнительные вкладки:
| Вкладки | Подробности |
|---|---|
| Components | Позволяет исследовать компоненты и директивы в приложении, а также просматривать или редактировать их состояние. |
| Profiler | Позволяет профилировать приложение и понять, где узкое место производительности при выполнении обнаружения изменений. |
| Injector Tree | Позволяет визуализировать иерархию Environment и Element Injector |
| Router Tree | Позволяет визуализировать дерево маршрутизации приложения. |
Другие вкладки, например Transfer State, экспериментальны, включаются в настройках DevTools и пока не документированы.
ПОЛЕЗНО: Пользователям браузеров на базе Chromium может быть интересна интеграция с панелью Performance.
В правом верхнем углу Angular DevTools находится кнопка информации, открывающая всплывающее окно. Во всплывающем окне, среди прочего, указаны версия Angular, работающая на странице, и версия DevTools.
Angular-приложение не обнаружено
Если при открытии Angular DevTools появляется сообщение об ошибке «Angular application not detected», это означает, что расширение не может связаться с Angular-приложением на странице. Самая частая причина — на проверяемой веб-странице нет Angular-приложения. Убедитесь, что вы проверяете нужную страницу и что Angular-приложение запущено.
Обнаружено приложение, собранное с production-конфигурацией
Если появляется сообщение об ошибке «We detected an application built with production configuration. Angular DevTools only supports development builds.», это означает, что Angular-приложение на странице найдено, но оно скомпилировано с production-оптимизациями. При компиляции для production Angular CLI удаляет различные возможности отладки, чтобы минимизировать объём JavaScript на странице и улучшить производительность. В том числе удаляются возможности, необходимые для связи с DevTools.
Чтобы запустить DevTools, нужно скомпилировать приложение с отключёнными оптимизациями. ng serve делает это по умолчанию.
Если нужно отладить развёрнутое приложение, отключите оптимизации в сборке с помощью опции конфигурации optimization ({"optimization": false}).