Как дебажишь код?

Код дебажат через DevTools (точки останова, консоль, сеть), логирование, отладчик IDE и специализированные инструменты (React DevTools, тесты). Подход — воспроизвести, локализовать, исправить, проверить.

Инструменты и приёмы

Chrome DevTools

• Breakpoints — точки останова, пошаговое выполнение (step over/into/out).
• Watch / Scope — смотреть значения переменных, стек вызовов.
• Conditional breakpoints — останов по условию.
• Console — console.log, console.table, console.trace.
• Network — запросы, ответы, статусы, тайминги.
• Performance / Memory — профилирование, поиск утечек.

debugger

function calc(x) {
  debugger; // остановит выполнение здесь при открытых DevTools
  return x * 2;
}

Логирование

console.log/table/group для отслеживания значений и потока (быстро, но временно).

IDE (VS Code)

Встроенный отладчик: breakpoints, watch, отладка Node.js и браузера.

Специализированное

• React DevTools — дерево компонентов, props, state, ре-рендеры.
• Redux DevTools — actions, time-travel.
• Тесты — воспроизвести баг тестом.

Системный подход

1. Воспроизвести баг.
2. Локализовать (сузить область — логи/breakpoints).
3. Понять причину.
4. Исправить и покрыть тестом.

Коротко для собеседования

Дебаг: DevTools (breakpoints, watch, call stack, Network, Performance), debugger, console.log/table, отладчик IDE, React/Redux DevTools, воспроизведение бага тестом. Подход системный: воспроизвести → локализовать → найти причину → исправить → покрыть тестом.