Как использовать точки останова в своем коде на JavaScript

Читать в полной версии →

Рассказываем, как использовать брейкпоинты, чтобы специально приостанавливать выполнение кода на JavaScript, причем тут DevTools и зачем вообще нужен отладчик.

Когда использовать брейкпоинты и какие точки останова бывают

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

Какие еще есть виды брейкпоинтов:

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

Читайте также: Что такое рекурсия, рекурсивный и итеративный процесс в программировании

Точки останова в коде через DevTools

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

Открыть DevTools из браузера Google Chrome можно двумя способами:

  1. Сочетанием горячих клавиш: для Windows и Linux — Ctrl + Shift + I, а для macOS cmd + Shift + I.
  2. Через интерфейс: для этого на странице нужно кликнуть правой кнопкой мыши в любом месте и выбрать «Просмотреть код». Более подробно про работу с DevTools читайте в нашей большой статье.

Вот что нужно сделать для того, чтобы установить точку останова строки кода в DevTools.

Точки останова в коде, который специально поставил разработчик

Для создания такого брейкпоинта нужно просто вызвать debugger в коде. Этот подход эквивалентен предыдущему способу, через DevTools, только без использования визуального интерфейса.

console.log('a');
console.log('b');
debugger;
console.log('c');

Точки останова для условий

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

Как установить условный брейкпоинт:

Управление точками останова

Управлять брейкпоинтами можно с помощью плашки breakpoints во вкладке Sources через Devtools.

Точки останова в DOM

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

Как это сделать:

Типы точек останова для изменения DOM

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

Attribute modifications — запускается, когда пользователь добавляет или удаляет атрибут у выбранного в данный момент узла. Также Attribute modifications запускается при изменении значения атрибута.

Node removal — срабатывает, когда текущий выбранный узел удаляется.

Читайте также: Что такое callback-функция в JavaScript?

Использование точек останова с XHR/Fetch

Используйте брейкпоинты с XHR, если выполнение кода нужно прервать, когда URL-адрес запроса XHR содержит заранее указанную строку. DevTools остановится на той строке кода, где XHR вызывает функцию send(). Эта же функция также работает с Fetch API.

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

Как установить брейкпоинт для XHR:

Точки останова для обработчика событий

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

Как установить брейкпоинт для обработчика событий:

Точки останова для исключений

Используйте брейкпоинты, если нужно остановить выполнение кода, которое вызывает перехваченное или необработанное исключение.

Как запустить брейкпоинты для исключений:

Точки останова для функций

Можно вызывать debug(functionName), где functionName — это имя функции, которую вы собираетесь отладить. Она будет вызывать брейкпоинты каждый раз перед выполнением, чтобы ее можно было спокойно отдебажить.

Для приостановки выполнения кода можно как вставить debug() в код, так и вызвать его в DevTools. При этом debug() будет эквивалентна установке брейкпоинта в первой строчке кода функции:

const sum = (a, b) => {
  const result = a + b; // В DevTools будет пауза на этой строке
  return result;
}
debug(sum); // Передаем объект функции
sum();

Убедитесь, что ваша функция находится в области видимости.

DevTools выдает ReferenceError, если функция, которую вы хотите отлаживать, не входит в область действия.

const func = () => {
  const hey = () => {
    console.log('hey');
  };
  const yo = () => {
    console.log('yo');
  };
  debug(yo); // Работает
  yo();
};

func();

debug(hey); // Не работает. Функция hey() не входит в область действия

При этом убедиться, что функция находится в нужной области видимости, может быть достаточно сложно, особенно если вы используете debug() внутри консоли в DevTools. Как это можно исправить:

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях