Руководство по отладке фронтенда¶

Отладка фронтенда (debugging) — важный процесс при разработке, позволяющий выявлять и исправлять ошибки, анализировать работу приложения и его производительность. В этом документе описаны основные подходы к дебагу, а также предоставлены специальные команды для управления логами.

Основные принципы отладки фронтенда¶

1. Инструменты разработчика¶

Современные браузеры предоставляют мощные инструменты для отладки: - Консоль (Console) — отображает логи, ошибки, предупреждения и позволяет выполнять JavaScript-код. - Отладчик (Debugger) — позволяет устанавливать точки останова, просматривать стек вызовов, отслеживать переменные и пошагово исполнять код. - Сеть (Network) — анализирует HTTP-запросы, загруженные ресурсы, заголовки и ответы сервера. - Хранилище (Application/Storage) — отображает локальное хранилище (localStorage, sessionStorage), куки и кэшированные данные.

2. Логирование¶

Добавление логов помогает отследить выполнение кода. Основные методы консольного вывода: - console.log() — обычный вывод информации. - console.warn() — предупреждения. - console.error() — ошибки. - console.table() — удобное отображение массивов и объектов. - console.time() / console.timeEnd() — измерение времени выполнения операций.

3. Отладка через `debugger`¶

Вставка debugger; в код позволяет браузеру остановить выполнение в этом месте и перейти в режим отладки.

4. Анализ производительности¶

Раздел Performance в DevTools помогает выявить узкие места и оптимизировать рендеринг, загрузку и обработку данных.

5. Эмуляция состояний и ошибок¶

Throttling (замедление сети) — позволяет тестировать приложение в условиях низкой скорости соединения.
Эмуляция мобильных устройств — переключение в режим мобильного экрана.
Ошибка сети — можно симулировать недоступность сервера.