Отладчик

Вывод значений через console.log или var_dump показывает только то, что вы заранее решили напечатать. Отладчик позволяет остановиться внутри работающего кода и осмотреться: какие сейчас значения у всех переменных, кто вызвал эту функцию, что вернёт следующее выражение. Затем можно выполнить программу по шагу и увидеть, в какой момент данные стали неправильными. Общий процесс поиска ошибок описан в статье об отладке, а отладчик — главный инструмент этого процесса.

Отладчик в браузере

Во всех современных браузерах он встроен в инструменты разработчика (DevTools, вкладка Sources в Chrome, «Отладчик» в Firefox). Точку остановки ставят кликом по номеру строки или прямо в коде:

function applyCoupon(cart, code) {
  const coupon = coupons.find(c => c.code === code);
  debugger; // пауза здесь, если DevTools открыты
  cart.total -= coupon.amount;
  return cart;
}

Оператор debugger ничего не делает, пока инструменты разработчика закрыты, но оставлять его в рабочем коде не стоит — линтеры обычно на это ругаются.

Основные возможности

• Пошаговое выполнение: следующая строка, войти в функцию, выйти из неё, продолжить до следующей точки.
• Условные точки остановки срабатывают, только если выражение истинно, например code === 'SALE10'. Точки-логи печатают значение без остановки.
• Остановки по событиям: на изменении узла DOM, на любом клике, на запросе к определённому адресу.
• Наблюдаемые выражения и стек вызовов — видно всю цепочку функций, которая привела к текущей строке.

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

Отладка PHP

Для серверного кода WordPress и 1С-Битрикса используют расширение Xdebug вместе с IDE — PhpStorm или VS Code. Xdebug подключается к редактору, когда приходит запрос, и останавливает PHP на точке в шаблоне или обработчике. В Xdebug 3 по умолчанию используется порт 9003. На боевом сервере расширение не держат включённым: оно заметно замедляет PHP. Отладку ведут на локальной копии сайта или тестовом сервере.