Как дебажить frontend-приложение в браузере?

Основы отладки в браузере

Инструменты разработчика (DevTools) — это набор встроенных в браузер средств, которые позволяют анализировать и отлаживать frontend-приложения. Они доступны во всех современных браузерах (Chrome, Firefox, Edge, Safari) и открываются клавишей F12 или через контекстное меню.

Ключевые возможности DevTools

• Elements (Инспектор) — просмотр и редактирование HTML-структуры и CSS-стилей в реальном времени. Позволяет экспериментировать с вёрсткой без перезагрузки страницы.
• Console (Консоль) — вывод ошибок, предупреждений и логов. Можно выполнять произвольный JavaScript-код для проверки гипотез.
• Sources (Исходники) — просмотр исходного кода, установка точек остановки (breakpoints), пошаговое выполнение кода, просмотр значений переменных.
• Network (Сеть) — анализ всех сетевых запросов: время загрузки, заголовки, тело ответа. Помогает диагностировать проблемы с API или загрузкой ресурсов.
• Performance (Производительность) — запись и анализ производительности страницы: загрузка, рендеринг, выполнение скриптов.

Пример использования breakpoints

// Исходный код функции, которую нужно отладить
function calculateTotal(price, tax) {
  const taxAmount = price * tax;
  const total = price + taxAmount;
  return total;
}

// В DevTools вкладка Sources, находим этот файл,
// кликаем на номер строки с const total = ..., чтобы поставить breakpoint.
// При вызове функции выполнение остановится на этой строке,
// можно посмотреть значения price, tax, taxAmount в панели Scope.

Работа с source maps

Если код минифицирован или транспилирован (например, из TypeScript или React), source maps позволяют видеть оригинальный исходный код, а не скомпилированный. Для этого в сборщике (Webpack, Vite) нужно включить генерацию source maps.

Вывод

DevTools — незаменимый инструмент для каждого frontend-разработчика. Они позволяют быстро находить и исправлять ошибки в вёрстке, логике и производительности, не покидая браузер.