Как устанавливать точки останова Javascript в Chrome?

Быстрый ответ

Для приостановки выполнения JavaScript в Chrome воспользуйтесь командой debugger;, поместите её в нужное место вашего кода. Для работы этой конструкции требуется открыть инструменты разработчика Chrome DevTools. # В таких условиях оператор будет работать как стандартная точка останова.

Пример:

// Здесь все по плану... Хотя, нет, выполнение прервется!
debugger;

Необходимость использования debugger;

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

Лучшие практики использования debugger;

При использовании debugger; стоит помнить следующее:

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

Программные условные точки останова

Зачем ограничиваться статическим применением debugger;, если можно сделать его динамичным? Установите условные точки останова, например:

if (totalOrders > expectedOrders) {
  // Останавливаем выполнение, если количество заказов превысило ожидаемое
  debugger;
  // Имеем повод для гордости – продажи сегодня превзошли все ожидания! 🎉
}

Визуализация

Можно считать установку точки останова в JavaScript аналогом установки специального знака или барьера на "дороге" выполнения кода:

Код движется, словно автомобиль по дороге:

Дорога свободна: 🚧🛣️🚧🛣️🚧🛣️🚧🛣️🚧🛣️🚧🛣️🚧

Вставка 'debugger;': 🚧🛣️🚧🍁(🔍)🛣️🚧🛣️🚧🛣️🚧

Перед обнаруженным знаком автомобиль остановится: 🛑

function calculateSum() {
  var a = 5;
  var b = 10;
  debugger; // 🍁(🔍) Осторожно, "лежачий полицейский"!
  // "Очень надеюсь, что у вас в порядке амортизаторы!" 🚗
  var sum = a + b;
}

Когда выполнение кода встречает такой "лежачий полицейский", представляется возможность изучить все детали текущего состояния.

Погружение с debugger

И хотя debugger; действительно оказывается удобным во многих случаях, иногда возникает желание задавать точки останова динамично через консоль. В этом вам поможет команда <code>debug(function)</code> из Chrome Command Line API. Более подробно о ней вы можете узнать в Command Line API.

Для интерактивной отладки свяжите debugger; с обработчиками событий:

document.querySelector('.suspicious-button').addEventListener('click', function() {
  debugger; // Точка останова будет активирована при клике на кнопку
  // "Кнопка ведёт себя подозрительно, пора разобраться!" 🕵️‍♂️
});

Радостная новость – debugger; стандартизирован начиная с ES5, что обеспечивает его совместимость с различными браузерами.

Не только для браузеров

Знали ли вы, что debugger; может быть использован не только в браузере, но и в Node.js? На самом деле, это универсальный инструмент для временной остановки выполнения в любой JavaScript-среде.

Полезные материалы

1. Остановите код при помощи точек останова | DevTools | Chrome для разработчиков – Исчерпывающее руководство по установке и использованию точек останова в Chrome DevTools.
2. debugger – JavaScript | MDN – Официальная страница MDN с подробным описанием оператора debugger в JavaScript.
3. Просто подождите момент... – Обсуждение методов программной установки точек останова в сообществе разработчиков.
4. Chrome DevTools | Chrome для разработчиков – Обширная инструментальная база по всем аспектам работы с инструментами разработки Chrome, включая детализированную документацию.
5. Отладка JavaScript – Chrome DevTools 101 – YouTube – Обучающее видео, демонстрирующее использование точек останова и отладку JavaScript с помощью Chrome DevTools.