Использование инструментов отладки в браузере для дебага и ускорения разработки веб-страниц

1. Отладка в процессе
разработки
Курс Frontend-разработки на Javascript + Vue/React

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

3. Рефакторинг
• Рефакторинг – процесс переработки кода работающего
приложения с целью улучшения его производительности или
архитектурной простоты.
• Рефакторинг является, по сути, «переписыванием» уже
работающего кода. Применяется, в основном, для:
• Улучшения качества кода приложения – изменение структуры, архитектуры и
применяемых технологий
• Оптимизация производительности и требовательности кода к ресурсам
• Избавление от старых зависимостей и технологий

4. Отладка Frontend-приложений
• Отладка клиентского веб-приложения осуществляется, в основном,
в браузере.
• Chrome Developer Tools предлагает мощный и разнообразный
инструментарий, позволяющий осуществлять отладку приложений
на разных уровнях и с различных сторон.

5. Точки останова Javascript
• Точка останова – возможность приостановить выполнение
Javascript-кода в любой точке и рассмотреть значения,
задействованные в этом месте кода.
• Отладка по точкам останова позволяет:
• Просмотреть значения переменных
• Проследить за выполнением кода и последовательностью вызова функций
• Отлавливать ошибки выполнения кода в не известных заранее местах
• Точку останова можно установить и в тексте скрипта при помощи
ключевого слова debugger. Однако следует вычищать эти точки из
результирующих скриптов!

6. Точки останова
• Поставить точку останова можно во вкладке Sources, выбрав
нужный файл скрипта слева и нажав на номер строки.
• Не забывайте снимать точки останова по завершении отладки!

7. Доступ к текущему узлу
• В Chrome DevTools, выбрав какой-либо элемент в DOM-дереве, к
нему можно получить доступ в консоли разработки при помощи
предопределенной переменной $0.
• С этим узлом можно проделывать все операции, как и в обычном
скрипте. Как правило, это используется для написания
экспериментальных скриптов, которые затем переносятся в
основной скрипт.

8. DOM-точки останова
• DOM Breakpoints – возможность отследить, какой Javascript-код
отвечает за изменение структуры дерева документа в каком-то
конкретном месте, например:
• Изменение атрибутов элемента
• Удаление элемента
• Изменение внутренностей элемента
• Эта возможность бывает полезна в случаях, когда вы работаете с
чужим кодом и нужно узнать, в каком месте осуществляется
операция на странице, с которой вы намерены работать.

9. DOM Breakpoint
• Для установки точки останова на узле документа найдите его во
вкладке Elements в дереве, нажмите правой кнопкой мыши и
нажмите Break On > один из необходимых вариантов.
• Не забывайте снимать точки останова по завершении отладки!
Снимается точка останова так же, как и устанавливается.

10. Список обработчиков
• В панели разработки имеется возможность просмотреть список
всех обработчиков событий, установленных на элемент.
• В этом списке фигурируют как собственные, так и делегированные
обработчики.
• Просматривать список обработчиков удобно для того, чтобы
отыскать в чужом коде место, в котором на данный элемент
устанавливается обработчик, и отыскать сам код обработчика.
• Список обработчиков доступен во вкладке Elements -> Event
Listeners.

11. Данные сайта
• Под данными сайта подразумеваются все данные, которые сайт
сохраняет на компьютере пользователя. К ним относятся:
• Cookie
• localStorage, sessionStorage
• IndexedDB, WebSQL
• Инструмент Application в инструментах отладки позволяет
просмотреть все данные сайта и при необходимости –
модифицировать.

12. Сетевая активность
• Сетевая активность – общее название для всех запросов, которые
делает веб-сайт в течение всего времени, что сайт открыт в
браузере пользователя.
• Инструмент Network позволяет отследить все запросы, которые
делает сайт, просмотреть их содержимое и HTTP-заголовки
запросов и ответов, а также сымитировать ситуации различной
скорости интернет-соединения.

13. Сенсоры
• Вкладка Сенсоры (в дополнительной панели инструментов)
позволяет искусственно задать значения, которые отдадут странице
сенсоры браузера.
• К таким сенсорам относят:
• Геолокация
• Ориентация экрана и угол поворота устройства
• Тачпад
• Переопределение работы сенсоров позволяет тестировать
приложения без необходимости создавать физические условия для
тестирования.

14. Профайлинг
• Профайлинг – процесс записи работы приложения в течение
некоторого времени с предоставлением подробного отчета. Такой
отчет используется для:
• Оценки общей производительности выполнения кода
• Оценки корректности работы кода в целом
• Оценки затрат на выполнение отдельных операций или функций в коде
• Профайлинг в Chrome DevTools расположены во вкладке
Permormance. В этой вкладке можно построить подробный профиль
работы приложения и далее анализировать на предмет слабых
мест.

15. Замер времени исполнения кода
• В приложении порой требуется узнать точно, сколько по времени
работал тот или иной код. В консольных командах есть инструмент,
позволяющий сделать естественный замер без необходимости
писать собственный код:
console.time('1');
console.time('2');
// Some code
console.timeEnd('1');
// Some code
console.timeEnd('2');

16. Покрытие кода
• Покрытие кода – инструмент, позволяющий увидеть, насколько
полно задействован весь написанный для приложения код во время
его работы.
• Чем выше покрытие кода приложения – тем, конечно, лучше. Тем не
менее, в современных приложениях нередко существует много
неиспользуемого кода, подтягиваемого вместе с фреймворками
или библиотеками.
• Покрытие кода можно просмотреть во вкладке Coverage
дополнительной панели инструментов.

17. Дополнительные материалы
Документация по инструментам отладки в Chrome
https://developers.google.com/web/tools/chrome-devtools/open
Небольшой пример отладки кода
https://medium.com/devschacht/brandon-morelli-learn-how-to-debug-
javascript-with-chrome-devtools-4a8fb7db375c