Отладка: console, debugger, breakpoints

Отладка в JavaScript — процесс поиска и устранения ошибок с помощью инструментов console, оператора debugger и точек останова (breakpoints) в DevTools браузера или IDE.

Зачем нужно

Умение отлаживать код быстро — один из ключевых навыков разработчика. Знание всех методов console и возможностей DevTools позволяет находить ошибки в разы быстрее, чем разбросанный console.log по всему коду.

Где используется

  • Браузерные DevTools (Chrome, Firefox, Edge)
  • Node.js (node --inspect)
  • VS Code (встроенный дебаггер)
  • CI/CD: логи сборки и тестов

Методы console

// Базовые уровни
console.log('Информация');        // стандартный вывод
console.info('Информация');       // синоним log
console.warn('Предупреждение');   // жёлтый цвет в консоли
console.error('Ошибка');          // красный + стек вызовов

// Интерактивный вывод объектов
const user = { name: 'Анна', age: 25 };
console.log(user);        // сворачиваемый объект
console.dir(user);        // детальный просмотр DOM или объекта
console.table([user]);    // табличный вид — удобно для массивов

// Форматирование
console.log('%c Важное!', 'color: red; font-weight: bold');
console.log('%s пользователей: %d', 'Активных', 42);

// Группировка
console.group('Пользователь');
  console.log('Имя:', user.name);
  console.log('Возраст:', user.age);
console.groupEnd;

// Счётчик и время
console.count('клик');   // клик: 1
console.count('клик');   // клик: 2
console.countReset('клик');

console.time('fetch');
await fetch('/api/data');
console.timeEnd('fetch'); // fetch: 123.45ms

// Стек вызовов
console.trace('Откуда вызвано?');

// Условный вывод
console.assert(1 === 2, 'Это не равно!'); // выводит только если false

Оператор debugger

Вставляет программную точку останова — выполнение приостановится, если открыты DevTools:

function calculateTotal(items) {
  const subtotal = items.reduce((sum, item) => sum + item.price, 0);
  debugger; // DevTools откроется с паузой здесь
  const tax = subtotal * 0.2;
  return subtotal + tax;
}

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

Типы breakpoints в Chrome DevTools:

  • Line breakpoint — кликнуть на номер строки в Sources
  • Conditional breakpoint — правый клик → «Add conditional breakpoint» (пауза только при условии)
  • Logpoint — вывод в консоль без остановки
  • DOM breakpoint — пауза при изменении DOM-элемента
  • XHR/fetch breakpoint — пауза при запросе по URL-паттерну
  • Exception breakpoint — пауза при любом или только непойманном исключении

Навигация при паузе:

  • Step over (F10) — следующая строка, не входя в функцию
  • Step into (F11) — войти в функцию
  • Step out (Shift+F11) — выйти из функции
  • Resume (F8) — продолжить до следующей точки

Полезные паттерны

// Условный debugger — только при определённых данных
function process(item) {
  if (item.id === 42) debugger; // пауза только для нужного элемента
  return transform(item);
}

// Быстрый inspect объекта
const data = { a: 1, b: { c: 2 } };
console.log(JSON.stringify(data, null, 2)); // красивый JSON

// Производительность
console.time('render');
renderAll;
console.timeEnd('render');

Частые ошибки

1. Оставленный debugger в продакшне

// Если DevTools не открыты — debugger просто игнорируется
// Но в продакшне это может замедлять или нарушать поведение
// Используй eslint-rule: no-debugger

2. console.log объектов (ссылочное поведение)

const obj = { x: 1 };
console.log(obj);  // {x: 1} — но это живой объект!
obj.x = 2;
// При раскрытии в DevTools увидишь {x: 2}, не {x: 1}

// Для снимка используй:
console.log(JSON.parse(JSON.stringify(obj))); // копия
console.log({ ...obj });                       // shallow copy

3. Забытые console.log в коде

Используй ESLint (no-console) или console-ban для контроля.

Связанные темы

Ресурсы