В прошлой статье я рассказал про базовый функционал консоли в Chrome Developer Tools. Но для полноценной отладки JavaScript одной консоли недостаточно. Отладка начинается с поиска ошибки, и в этом деле очень полезно уметь остановить выполнение кода в определенном месте или при определенных условиях.

Точки остановки (Breakpoints)

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

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

Условные точки остановки (Conditional breakpoints)

Точки остановки, несомненно, очень полезный инструмент, но часто строка кода исполняется тысячи раз, а с точки зрения отладки интересна лишь при определенных условиях. В такой ситуации на помощь приходят условные точки остановки.

Чтобы создать условную точку остановки, нужно кликнуть правой кнопкой мышки по номеру строки, выбрать «Add conditional breakpoint…» и ввести выражение. Если в момент исполнения кода выражение истинно, исполнение будет приостановлено.

Точки остановки DOM (DOM Breakpoints)

Часто бывают ситуации, когда какой-то скрипт модифицирует элемент на странице или его содержимое, но идентифицировать обидчика не получается. Для таких случаев в Chrome Developer Tools предусмотрены точки остановки DOM. Они позволяют приостановить исполнение кода в случае изменения атрибутов элемента («Attributes modifications»), изменений в дереве дочерних элементов («Subtree modifications») либо удаления элемента («Node removal»).

Для создания точки остановки DOM необходимо найти элемент во вкладке «Elements», щелкнуть его правой кнопкой мыши и в открывшемся меню выбрать пункт «Break on…».

Точки остановки XHR (XHR Breakpoints)

При разработке веб-приложений регулярно возникает необходимость отлаживать ajax-запросы. Задача усложняется, если ошибка возникает лишь при обращении к определенному URL-адресу. На помощь в этой ситуации приходят точки остановки XHR (XmlHttpRequest). Они останавливают исполнение кода в момент отправки ajax-запроса, позволяя задать URL-адрес либо его часть.

Установить точку остановки XHR можно со вкладки «Sources», нажав на иконку плюсика напротив заголовка «XHR Breakpoints» в правой панели.

Точки остановки по событиям (Event Listener Breakpoints)

Допустим, один из скриптов где-то создает обработчик событий, и необходимо его найти, зная лишь название события. Для этого идеально подойдет точка остановки по событиям. Chrome Developer Tools позволяет установить точку остановки как на конкретное событие (например click или keypress), так и на целую группу событий (например «Mouse» или «Keyboard»).

Чтобы установить точку остановки по событиям, нужно перейти во вкладку «Sources» и в правой панели под заголовком «Event Listener Breakpoints» выбрать интересующие события.

 

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