Инструменты дебага JavaScript в Chrome DevTools

Введение

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

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

Разбираемся с JavaScript в браузере; серверный Node.js здесь не рассматривается. Из инструментов достаточно Google Chrome: пока вы не меняете логику приложения, часто не понадобится ни редактор, ни IDE.

Как открыть DevTools

Нажмите F12, либо правой кнопкой по странице → «Просмотреть код», либо меню браузера (три точки) → «Дополнительные инструменты» → «Инструменты разработчика».

Основные вкладки панели:

Курсор на квадратике — выбор HTML-элемента на странице.
Режим устройств — как сайт выглядит на планшете, смартфоне.
Elements — DOM текущей страницы.
Console — выполнение JavaScript в контексте страницы.
Sources — файлы, которые используются на странице.
Network — список сетевых запросов.
Performance — анализ производительности.
Memory — потребление памяти.
Security — HTTPS, сертификаты.
Application — Cookie, LocalStorage и другое.
Lighthouse — аналог PageSpeed Insights в браузере.
Network Conditions — настройки сети.
Вкладки установленных расширений.

Работа с DOM

DOM — объектная модель документа, которую браузер создаёт в памяти по HTML с сервера. Условно: HTML — текст, DOM — связанные объекты после разбора.

Во вкладке Elements, выбрав элемент, видны: сам узел; стили с приоритетом и ссылкой на файл и строку (клик ведёт к объявлению); псевдоклассы вроде :hover; вкладки стилей, событий и свойств.

На вкладке Event Listeners перечислены обработчики на элементе. Часто кнопка собрана из нескольких тегов — смотрите события на всех. События с document тоже попадают в список. Подходящее событие часто узнаётся по селектору; по имени файла можно перейти в Sources.

Если непонятно, какой обработчик нужен, удаляйте по одному кнопкой Remove и проверяйте поведение. Если нужное перестало срабатывать — это он; обновите страницу и продолжайте.

Console

В консоли JavaScript выполняется так, как если бы код был на странице: доступ к переменным, вызов и создание функций, навешивание событий. Здесь же ошибки и логи. Консоль доступна даже когда выполнение остановлено по breakpoint.

Чтобы найти объявление функции, введите её имя без скобок и нажмите Enter — браузер покажет фрагмент кода; клик по первой строке откроет файл и строку объявления.

Полезные элементы интерфейса: поле ввода; очистка вывода; выбор контекста (в т.ч. iframe); выражения для мониторинга переменных; фильтр типов сообщений.

Sources

Вкладка для файлов страницы: дерево подключённых файлов; область кода — клик по номеру строки ставит breakpoint, при доходе выполнения JS останавливается.

Кнопка форматирования упрощает чтение минифицированного кода. Панель управления: шаги, продолжение, отключение всех точек остановки. В контексте при остановке видны локальные переменные и Call Stack.

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

Network

Рекомендуемые настройки: включить Use large request rows, остальное по смыслу снять. Важно: запись лога, очистка списка, опция сохранять историю после перезагрузки, отключение кеша на время работы с DevTools, имитация медленного соединения.

Фильтры: Fetch/XHR — для Ajax (Fetch и XMLHttpRequest). В карточке запроса: заголовки; тело ответа; кто инициировал запрос (Initiator) — удобно для Ajax; тайминги.

В новых версиях Chrome тело POST смотрите во вкладке Payload. Ответ может не отображаться, если его не было или после перезагрузки при включённом сохранении лога ответы могут быть очищены.

Headers

Заголовки запроса и ответа: куки, код ответа, директивы кеширования.

Preview и Response

Обе показывают ответ сервера; Preview пытается отформатировать.

Initiator

Показывает цепочку откуда ушёл запрос. Типичный сценарий: разобрать форму — в Network отправить форму, найти нужный запрос (не метрики), открыть Initiator: библиотека вроде jquery.min.js редко интересна, а прикладной файл — да; его открывают в Sources и форматируют.

Network conditions

В новых Chrome отдельная панель: отключение кеша, throttling, смена User-Agent, выбор типов сжатия ответов.

User agent

Позволяет подставить другое имя браузера в заголовках (видно в Request Headers отдельного запроса в Network). Сайты иногда ветвят логику по UA.

Пример: закрытие индексации по User-Agent — если в строке запрещённая подстрока вроде YandexBot, сервер может вернуть Forbidden; при возврате «браузер по умолчанию» доступ восстанавливается. Подробнее в материале автора о закрытии сайта по User-Agent.

Практика

Чтобы закрепить навыки, имеет смысл открыть учебную страницу автора и пройтись по сценариям с Elements, Console, Sources и Network — без правок серверного кода.

Источник: Роман Морозов, блог о JavaScript и отладке в Chrome.