Из-за упаковки, компиляции и сжатия кода отладка Angular всегда была проблемой для разработчиков, но дело не в том, что метода отладки нет, а в том, что эффективных методов много, сегодня я его представлю!
Три метода отладки:
1. Augury: плагин для отладки Chrome для Angular
1.1 Установка предзнаменования
augury.angular.io/
Augury — это плагин для Chrome, который можно установить напрямую.
1.2 Как использовать
Откройте консоль браузера, и вы увидите меню Augury.
1.2.1 Просмотр структуры компонента
1.2.2 Просмотр свойств/методов/внедрения зависимостей/исходного кода
Вы также можете дважды щелкнуть, чтобы изменить свойство, и оно будет возвращено на страницу в режиме реального времени.
1.2.3 Диаграмма взаимосвязей компонентов
1.2.4 Структура маршрутизации
Вы можете просмотреть полные отношения маршрутизации, детали маршрутизации и т. д.:
2. Отладка исходников
Те, кто знаком с отладкой JS, должны были использовать его.
согласно с
Уведомление:
3. WebStorm + JetBrains IDE Support
Используя отладку WebStorm и подключаемый модуль для Chrome, вы можете легко выполнять отладку.
3.1 Установка поддержки JetBrains IDE
Расширение Chrome:chrome.Google.com/Интернет-магазин/wipe…
3.2 Конфигурация отладки WebStorm
Прежде чем начать отладку, нам нужно выполнить простую настройку.
Откройте меню:
настроить
Имя может быть произвольным, а URL-адрес вводится для запуска проекта.
3.3 Добавьте точки останова
Аналогично отладке Sources, мы добавляем точки останова в WebStorm:
можно также добавить
3.4 Начать отладку
Нажмите на ошибку, чтобы начать отладку:
Когда кнопка нажата, она автоматически переходит в браузер
Далее вы можете увидеть соответствующие изменения данных:
На сегодня это все, если у вас есть лучший метод отладки или у вас есть какие-либо вопросы, вы можете оставить сообщение в области комментариев ниже!
Три метода отладки:
- Augury: плагин для отладки Chrome для Angular.
- Отладка источников
- WebStorm + JetBrains IDE Support
1. Augury: плагин для отладки Chrome для Angular
1.1 Установка предзнаменования
augury.angular.io/
Augury — это плагин для Chrome, который можно установить напрямую.
1.2 Как использовать
Откройте консоль браузера, и вы увидите меню Augury.
1.2.1 Просмотр структуры компонента
1.2.2 Просмотр свойств/методов/внедрения зависимостей/исходного кода
Вы также можете дважды щелкнуть, чтобы изменить свойство, и оно будет возвращено на страницу в режиме реального времени.
1.2.3 Диаграмма взаимосвязей компонентов
1.2.4 Структура маршрутизации
Вы можете просмотреть полные отношения маршрутизации, детали маршрутизации и т. д.:
2. Отладка исходников
Те, кто знаком с отладкой JS, должны были использовать его.
Sources调试.согласно с
F12Откройте консоль браузера, выберитеSources вкладку, затем выберите в дереве слева webpack:// После расширения узла войдите в каталог исходного кода, чтобы установить точку останова.Уведомление:
- Если вы используете Angular CLI, то ng serve по умолчанию предоставляет полную исходную карту, просто щелкните мышью, чтобы сломать точку.
- Если это среда Webpack (Devtool), настроенная вами самостоятельно, вам нужно выбрать исходную карту с версией модуля, чтобы сопоставить содержимое пакета обратно с исходным файлом, например, cheap-module-eval-source-map.
3. WebStorm + JetBrains IDE Support
Используя отладку WebStorm и подключаемый модуль для Chrome, вы можете легко выполнять отладку.
3.1 Установка поддержки JetBrains IDE
Расширение Chrome:chrome.Google.com/Интернет-магазин/wipe…
3.2 Конфигурация отладки WebStorm
Прежде чем начать отладку, нам нужно выполнить простую настройку.
Откройте меню:
Run => Editing Configurationsнастроить
JavaScript Debug:Имя может быть произвольным, а URL-адрес вводится для запуска проекта.
地址а также端口(IDE автоматически прочитает проект):3.3 Добавьте точки останова
Аналогично отладке Sources, мы добавляем точки останова в WebStorm:
можно также добавить
Debug条件:3.4 Начать отладку
Нажмите на ошибку, чтобы начать отладку:
Когда кнопка нажата, она автоматически переходит в браузер
Далее вы можете увидеть соответствующие изменения данных:
На сегодня это все, если у вас есть лучший метод отладки или у вас есть какие-либо вопросы, вы можете оставить сообщение в области комментариев ниже!