DevTools -- Sources и отладка JS

Sources — панель DevTools с файловым деревом скриптов страницы и полноценным отладчиком JavaScript: breakpoints, step-by-step выполнение, просмотр переменных.

Зачем нужно

console.log — примитивный метод отладки. Sources позволяет остановить выполнение кода в любой точке, изучить все переменные в стеке вызовов, выполнять код пошагово. Это позволяет точно понять, почему код ведёт себя не так, как ожидается.

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

  • Отладка сложной логики с несколькими функциями
  • Поиск причины исключения или неожиданного поведения
  • Отладка асинхронного кода (Promise, async/await)
  • Отслеживание изменений переменных в цикле
  • Работа с minified-кодом через source maps

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

Открытие

F12 → Sources. Структура панели:

  • Левая часть — файловое дерево (Page, Snippets, Overrides)
  • Центр — редактор кода с breakpoints
  • Правая часть — панель отладчика

Установка breakpoint

Клик на номер строки в редакторе → появится синяя метка. При выполнении кода в этой строке — выполнение остановится.

Или в коде добавь debugger; — браузер остановится здесь, если DevTools открыт.

function calculateTotal(items) {
  let total = 0;
  for (const item of items) {
    debugger; // Остановится здесь на каждой итерации
    total += item.price * item.quantity;
  }
  return total;
}

Управление выполнением (тулбар отладчика)

Кнопка Клавиша Действие
Resume F8 Продолжить до следующего breakpoint
Step over F10 Шаг через строку (не входит в функцию)
Step into F11 Шаг внутрь функции
Step out Shift+F11 Выйти из текущей функции
Deactivate — Отключить все breakpoints

Панели правой части

Scope — все переменные текущего scope и их значения в момент паузы.

Call Stack — стек вызовов: какая функция вызвала текущую.

Watch — добавь выражения для постоянного наблюдения:

items.length
total
item.price * item.quantity

Breakpoints — список всех breakpoints с возможностью включить/выключить.

Условные breakpoints

Правый клик на breakpoint → Edit breakpoint → введи условие:

item.price > 1000  // остановится только для дорогих товаров

Source Maps

При работе с минифицированным кодом — нажми {} (Pretty print) в нижнем тулбаре редактора. Если есть source maps — Sources покажет оригинальные файлы TypeScript/JSX.

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

  • debugger в продакшен-коде — DevTools нет у пользователей, но debugger в коде без открытых DevTools просто игнорируется; однако убирай перед коммитом
  • Breakpoint в минифицированном файле — код на одной строке, шаг by step бессмысленен; используй {} Pretty print или source maps
  • Асинхронный код — breakpoint внутри callback/Promise может не сработать ожидаемо; используй Async call stack в настройках DevTools

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

Ресурсы