Мы работали с множеством концепций в Angular, но когда дело доходит до отладки нашего приложения Angular, именно тогда это становится одной из самых сложных частей работы.

Самый первый шаг, когда дело доходит до решения ошибок в нашем приложении, - это правильно читать и понимать сообщения об ошибках. В большинстве случаев мы выясняем, что ошибка - это что-то еще, что компилятор на самом деле не имеет в виду и не указывает. Кроме того, иногда компилятор выдает неправильную ошибку, но указывает на правильный файл, а затем, когда мы переходим к файлу и проверяем, мы в основном можем обнаружить синтаксическую ошибку, которая привела к неправильному сообщению об ошибке компиляции.

Понимание сообщения об ошибке

Например, ниже перечислено сообщение об ошибке, отображаемое компилятором.

В этом случае компилятор говорит, что app-product по какой-то причине не является известным элементом. Мы часто получаем такую ​​ошибку, когда забываем объявить наши пользовательские компоненты внутри модуля. Или, может быть, когда мы добавили компонент, может быть случай, когда у нас есть несколько модулей внутри нашего приложения, но они не взаимодействуют должным образом.
Или проверьте синтаксические ошибки в названии селектора или в объявлениях компонентов.

И если мы по-прежнему не можем определить ошибку, GitHub и потоки переполнения стека всегда приходят на помощь!

Использование подхода console.log ()

Теперь, после того, как мы правильно прочитали сообщения об ошибках, другой подход к отладке нашего приложения angular заключается в использовании обычного метода использования console.log () и регистрации различных свойств, объектов и т. Д., Чтобы посмотреть на их в консоли JavaScript в браузере и проверять их значения на разных этапах программы. Очевидно, что это не лучший подход к отладке нашего приложения, но он может пригодиться во многих случаях.

импортировать {Директива, ElementRef, Renderer, HostListener} из «@ angular / core»; @Directive ({селектор: ‘[app-ch-color]’}) класс экспорта bgDirective {конструктор (частный el: ElementRef, частный рендерер: Renderer) {this.changeColor («красный»); } @HostListener (‘click’) foo () {console.log (‘Host Element is clicked’); this.changeColor («зеленый»); } changeColor (цвет: строка) {this.renderer.setElementStyle (this.el.nativeElement, «цвет», цвет); }}

Здесь console.log будет отображаться и проверять наличие ошибок, если таковые имеются! Тогда мы сможем найти ошибку.

Исходные карты

Другой метод - использовать исходные карты, которые предоставляет нам CLI. Исходные карты - это небольшие файлы, которые используются инструментами разработчика браузера для создания моста от скомпилированного кода JavaScript, запущенного в браузере, к исходным файлам, которые мы находим легко читаемыми. Итак, Source Maps используются вместе с инструментами разработчика браузера.

Например,

У нас есть сломанный код Angular, который показывает некоторую ошибку. Теперь для нас исходная карта, мы переходим в раздел «Источники» внутри консоли браузера и ищем папку webpack в проекте CLI. Внутри папки webpack мы найдем src ›app, и эта папка приложения копирует структуру нашего приложения, поэтому мы можем заглянуть в любой из наших файлов машинописного текста и установить там точки останова, чтобы посмотреть значения свойств в любой момент выполнения. применение.

Эти инструменты очень мощные в использовании, поскольку они позволяют нам очень легко экспериментировать и проверять наличие ошибок. Кроме того, самое приятное то, что эти инструменты доступны в Интернете бесплатно.

Augury

Augury - это расширение Google Chrome Dev Tool для отладки приложений Angular во время выполнения. Это дает подробное представление о работе приложения. Плюсы использования Augury по сравнению с инструментами Browser Dev заключаются в том, что Augury знает об архитектуре Angular, т. Е. Дает обзор компонентов, свойств, внедрения зависимостей и т. Д., К которым DOM не имеет доступа!

Augury можно загрузить с помощью расширений инструмента chrome dev:

Инструменты Redux Dev

И последнее, но не менее важное: когда мы используем NgRx, мы используем инструменты Redux Dev, связанные с приложениями NgRx. Мы можем взглянуть на хранилище NgRx с помощью инструментов разработки redux, начиная с создания редуктора до хранилища.

Это одни из лучших инструментов для работы и отладки приложений Angular.