Что можно посмотреть в Debugger кроме переменных?

Расширенные возможности современных DevTools Debugger

При отладке в современных браузерах (Chrome DevTools, Firefox Developer Tools, Safari Web Inspector) доступен целый арсенал инструментов, выходящих далеко за рамки простого просмотра переменных.

1. Стек вызовов (Call Stack)

Call Stack показывает цепочку выполнения — какие функции вызывали текущую функцию. Это критически важно для понимания потока выполнения и поиска источника ошибки.

function first() {
  second(); // Вызов появится в стеке
}
function second() {
  third();  // Еще один уровень
}
function third() {
  debugger; // Здесь стек будет: third -> second -> first
}
first();

В стеке можно:

• Кликать по любому фрейму для перехода к соответствующему контексту выполнения
• Просматривать переменные и замыкания для каждого уровня стека
• Анализировать асинхронные вызовы в Async Call Stack (включая промисы, таймауты, события)

2. Область видимости (Scope)

В разделе Scope отображаются все доступные области видимости в текущей точке останова:

• Local — локальные переменные и параметры функции
• Closure — переменные из внешних функций (замыкания)
• Global — глобальные переменные (window в браузере)
• Script — переменные внутри модуля
• Module — для ES6 модулей

Это позволяет понять, откуда берутся переменные и как работают замыкания.

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

Помимо обычных breakpoints, существуют специализированные типы:

• Условные точки останова — срабатывают только при выполнении условия

// Сработает только если i === 5
for (let i = 0; i < 10; i++) {
  console.log(i); // Установить условный брейкпойнт: i === 5
}

• Точки останова на события DOM — на клик, фокус, изменение атрибутов
• XHR/Fetch Breakpoints — останавливают выполнение при определенных AJAX-запросах
• Событийные точки останова — на события мыши, клавиатуры, тач-события
• Точки останова на исключения — автоматическая остановка при возникновении ошибок

4. Мониторинг выражений (Watch Expressions)

Можно отслеживать значения выражений в реальном времени без добавления console.log:

// В Watch можно добавить:
element.offsetWidth > 300
user.isActive && user.hasPermission('admin')
JSON.stringify(myObject)

5. Работа с DOM и CSS

• Живое редактирование DOM — изменения сразу отображаются на странице
• Просмотр и изменение CSS в реальном времени
• Инспектор макетов — просмотр flexbox/grid контейнеров, отступов, размеров
• Анализ перерисовок (Paint Flashing) — подсветка перерисовываемых элементов

6. Производительность и профилирование

• Performance монитор — отслеживание потребления CPU, памяти, DOM-узлов
• Heap Snapshot — снимки памяти для поиска утечек
• Allocation instrumentation — трассировка выделения памяти во времени

7. Сетевые запросы (Network)

• Throttling — эмуляция медленных сетевых соединений
• Просмотр заголовков и тел запросов/ответов
• Анализ времени загрузки ресурсов с водопадом (waterfall)

8. Консоль отладки

// Специальные команды отладки:
console.trace(); // Вывод трассировки стека
console.dir(obj); // Иерархическое представление объекта
console.table(data); // Табличное представление массивов/объектов
debug(functionName); // Включение отладки для функции
undebug(functionName); // Выключение отладки

9. Продвинутые функции

• Черные ящики (Blackboxing) — исключение библиотек/фреймворков из отладки
• Logpoints — вывод логов без остановки выполнения
• Reverse продолжение — в некоторых DevTools можно "откатить" выполнение назад
• Source Map поддержка — отладка минифицированного/транспилированного кода

Практический пример комплексной отладки

async function loadUserData(userId) {
  // 1. Установить условную точку останова: userId === null
  const response = await fetch(`/api/users/${userId}`);
  
  // 2. В Network tab видеть этот запрос
  const data = await response.json();
  
  // 3. В Watch добавить: data?.permissions?.length
  // 4. В Scope увидеть closure variables
  const processor = new DataProcessor(data);
  
  // 5. Установить Event Listener Breakpoint на click
  document.getElementById('process').addEventListener('click', () => {
    processor.process();
  });
}

Эффективная отладка — это не просто просмотр переменных, а системное использование всех доступных инструментов для понимания состояния приложения, потока выполнения и производительности. Современные DevTools превращают отладку из поиска багов в процесс глубокого анализа работы приложения, что существенно повышает качество кода и скорость разработки.