Отладка приложений Angular

— Чем разработчики занимаются большую часть времени?
— Отладкой.

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

0. Перестаньте паниковать и прочитайте сообщение об ошибке

Большинство возникающих ошибок просты, и их сообщения ясно описывают, что пошло не так и как это исправить. Например

здесь у нас печально известная ошибка ExpressionChanged. В нем указано, что значение было «Angular 13», а затем после проверки оно стало «тестовым». Если следовать документации, вы можете обнаружить, что, скорее всего, это связано с изменениями хука AfterViewInit. Отсюда и значение, указанное в сообщении об ошибке. Поэтому, если мы переместим его на хук ngOnInit, он будет исправлен. Кроме того, в консоли браузера он указывает на место в шаблоне, где была обнаружена проблема, поэтому также обычно ясно, какое свойство было обновлено.

1. консоль.лог

Если код ведет себя неправильно, вы можете поместить сообщения журнала в несколько мест, чтобы быстро следить за потоком в консоли.

...
someMethod() {
  console.log(1)
  this.httpClient.get(...).subscribe(
    (data) => console.log({data}),
    (error) => console.error(error),
    () => console.log('completed)
  )
}

Обычно это полезно при проверке небольших сценариев, где мы можем использовать 1, 2, 3 и т. д. для проверки порядка выполнения и значений журнала.

2. консоль.трассировка

Другой случай — когда у нас есть какой-то кусок кода, который мы видим, выполняющийся, но не понимаем, почему. В этом случае мы можем использовать console.trace() внутри метода, и когда он будет вызван, мы увидим весь стек вызовов и найдем вызывающий метод.

3. Вкладка «Сеть»

Поскольку приложения, которые мы создаем, обычно взаимодействуют с серверами, мы отправляем запросы, и иногда они терпят неудачу или наша обработка не работает.

Для этой цели у нас есть отличный инструмент под названием «Сеть» в devtools.

Здесь у нас есть много полезных фильтров, один из них — «Fetch/XHR», здесь вы найдете все свои запросы к серверу с отфильтрованными статическими файлами, запрошенными браузером. Еще одной полезной вкладкой будет «WS» для тех, кто использует WebSockets для просмотра соединений и изучения своих сообщений.

При изучении запросов у нас есть несколько важных вкладок:

• заголовки — он содержит метод запроса, его статус и, конечно же, заголовки запроса/ответа
• полезная нагрузка — содержит тело сообщения, которое вы передали серверу, если таковое имеется
• превью — красиво оформленный ответ от бэкенда. Если это JSON, то вы можете взаимодействовать с ним, как с любым объектом, зарегистрированным в консоли — разворачивать, сворачивать и т. д.
• response — необработанный ответ от сервера

4. Проверить файл + исходники

Иногда бывают случаи, когда вы пытаетесь добавить точки журнала, точки отладки и так далее, но ни одна из них не срабатывает. Пришло время сделать шаг назад и переосмыслить происходящее. В большинстве случаев, когда происходят такие случаи, кажется, что вы либо работаете с неправильным файлом, неправильным окружением (например, dev env, когда вы размещаете журналы на своем локальном компьютере), сбоями сборки (иногда Angular имеет тенденцию завершаться ошибкой сборки, не жалуясь на это очевидным образом, и вы не знаете об этом, пока не проверите журналы терминала).

Чтобы быстро убедиться, что вы работаете с правильным файлом, и в то же время сборка работает, вы можете открыть консоль, нажать Ctrl (Cmd) + P, ввести имя файла и убедиться, что он содержит ваши журналы.

Вы можете использовать экран выбора элементов, выбрать компонент Angular, ввести в консоли ng.getComponent($0) и выполнить его. Это вернет вам экземпляр выбранного компонента, где вы сможете проверить правильность состояния компонента и его отражение в рендеринге.

Примечание. ng.getComponent доступно только в режиме разработки.

Кроме того, у нас есть несколько других полезных методов для объекта ng.

Мы даже можем использовать это для ручного запуска обнаружения изменений и обновления пользовательского интерфейса извне.

5. Отладчик

Мы можем использовать отладчик, чтобы поставить точки останова в коде, чтобы выполнение остановило поток на них, и мы могли проверить состояние, внести некоторые изменения и т. д. Для этого нам нужно найти наш файл (Ctrl + P) и нажать на строку, которую мы хотим поставить точку останова. Чтобы продолжить поток, мы можем нажать на стрелку рядом с синей, чтобы увидеть, куда мы попадем после выполнения этой строки. Кнопка воспроизведения продолжит выполнение, остановит выполнение и продолжит поток.

Однако это далеко не все, что может нам дать отладчик. Если мы щелкнем правой кнопкой мыши номер строки, мы обнаружим меню с некоторыми полезными опциями.

Логпойнт — аналог console.log с той разницей, что вам не нужно пересобирать приложение при использовании. Внутри него мы могли бы использовать console.trace, чтобы увидеть трассировку стека вызовов.

Условная точка останова делает то, что говорит. Вы определяете какое-то условие, поэтому JS остановит выполнение только тогда, когда условие будет выполнено.

6. Угловые инструменты разработки

Установите расширение devtools, разработанное официальной командой Angular. После этого вы найдете новую вкладку в инструментах разработки под названием Angular.

Здесь мы можем изучить дерево компонентов, их состояния, добраться до их исходного кода (стрелки под углом в правом верхнем углу).

7. Прочитайте трассировку стека

Часто бывает так, что ошибку не так просто понять. Вы читаете сообщение, а толку никакого, гугл ничего не дает.

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

Вот и все. Я надеюсь, что это поможет вам повысить скорость отладки и увеличить количество ошибок, которые вы сможете понять, исправить и предотвратить в будущем.