JS отладка в DevTools

DevTools — встроенные инструменты разработчика браузера (Chrome, Firefox, Edge), позволяющие пошагово отлаживать JavaScript, инспектировать переменные и профилировать производительность.

Зачем нужно

Навык отладки в DevTools многократно ускоряет разработку по сравнению с отладкой через console.log. Breakpoints позволяют остановить выполнение в любой точке, увидеть состояние всех переменных и пройти код пошагово. Вкладка Performance помогает найти узкие места, Network — анализировать запросы, Sources — работать с source maps и оригинальным TypeScript/JSX.

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

  • Отладка логики JavaScript: неверные вычисления, неожиданные значения переменных
  • Анализ сетевых запросов: Headers, Payload, Response, Timing
  • Профилирование производительности: медленные функции, Layout Thrashing
  • Отладка стилей: Computed, Box Model, CSS-анимации
  • Работа с памятью: Memory Heap Snapshots, выявление утечек

Основной контент

console API

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

// Группировка вывода
console.group('Пользователь');
console.log('Имя: Иван');
console.log('Возраст: 30');
console.groupEnd;

// Таблица для массивов и объектов
const users = [{ name: 'Иван', age: 30 }, { name: 'Мария', age: 25 }];
console.table(users);

// Измерение времени
console.time('fetchData');
// ... некий код ...
console.timeEnd('fetchData'); // "fetchData: 23.4ms"

// Счётчик
for (let i = 0; i < 3; i++) {
  console.count('итерация'); // "итерация: 1", "итерация: 2", ...
}

// Трассировка стека
function a() { b; }
function b() { console.trace('откуда вызван b?'); }
a;

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

// Программный breakpoint — выполнение остановится здесь
function processData(data) {
  debugger; // открывает DevTools и ставит на паузу
  return data.map(item => item * 2);
}

// В DevTools вкладка Sources:
// - кликнуть на номер строки → conditional breakpoint
// - правый клик на строке → Add conditional breakpoint: data.length > 100
// - XHR/fetch breakpoints: остановиться при запросе к /api/users
// - Event listener breakpoints: остановиться при клике, submit и т.д.

Навигация по коду при паузе

F8 / Cmd+\    — Resume (продолжить до следующего breakpoint)
F10           — Step Over (следующая строка, не заходить в функцию)
F11           — Step Into (войти в функцию)
Shift+F11     — Step Out (выйти из текущей функции)

Вкладка Network

// Анализ запросов:
// - Filter: XHR/Fetch — только API-запросы
// - Нажать на запрос → Headers, Preview, Response, Timing
// - Preserve log — сохранять при переходе на другую страницу
// - Throttling: Fast 3G / Slow 3G — имитация медленного соединения

// Воспроизведение запроса:
// Правый клик на запросе → Copy → Copy as fetch → вставить в консоль

Вкладка Performance

// 1. Нажать Record
// 2. Воспроизвести сценарий (клик, скролл, загрузка)
// 3. Stop
// Результат: Flame Chart — визуализация стека вызовов по времени

// Полезные панели:
// - Summary: Scripting / Rendering / Painting / Idle
// - Bottom-Up: самые тяжёлые функции по self time
// - Call Tree: иерархия вызовов

Живое редактирование в Sources

// Вкладка Sources → найти файл → кликнуть на код → изменить → Ctrl+S
// Изменения применяются немедленно (без перезагрузки)
// Работает с source maps — редактируете TypeScript, изменения в браузере

// Local Overrides:
// Sources → Overrides → добавить папку → изменения сохраняются между перезагрузками

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

  • console.log объектов: объект логируется по ссылке — к моменту просмотра значение уже могло измениться. Используйте console.log(JSON.parse(JSON.stringify(obj))) или spread: console.log({...obj}).
  • Забыть удалить debugger: debugger в production-коде заморозит браузер у пользователя при открытых DevTools.
  • Отладка без source maps: минифицированный код нечитаем — убедитесь, что source maps включены в сборщике.
  • Игнорирование вкладки Network: многие баги — это неожиданный формат ответа API, а не ошибка в JS-логике.

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

Ресурсы