🐞 Дебаг — это не только console.log

Console.log удобный, но иногда этого мало. Сложные баги требуют больше контекста: состояние, стек вызовов, сетевые запросы. Чем лучше мы знаем инструменты отладки, тем быстрее решаем проблемы и меньше нервничаем.

1. Встроенный дебаггер браузера

Ставь точку остановки (breakpoint) в sources и видь значения переменных прямо во время выполнения.
Используй step over, step into, step out, чтобы пройти код построчно.
Добавляй watch expressions, чтобы следить за конкретными выражениями.
Включай pause on exceptions, чтобы ловить ошибки в момент их появления.

2. React DevTools

Смотри дерево компонентов и пропсы в реальном времени.
Проверяй состояние хуков, контекстов и эффекты.
Бери профайлер, чтобы понять, какой компонент рендерится слишком часто.

3. Redux DevTools (и MobX, Zustand-инспекторы)

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

4. Сетевые инструменты

Вкладка Network показывает запросы, ответы, заголовки, статус-коды.
Throttling поможет воспроизвести медленную сеть.
Смотри Initiator, чтобы понять, кто отправил запрос.

5. Логи на сервере и в Sentry

Старайся воспроизводить баг вместе с логами: упавший запрос, ошибка в Sentry, таймстемпы.
Настрой фильтры по пользовательским ID или релизу.

6. Инструменты для верстки

Layout и Flexbox inspector в DevTools помогают понять, почему блок «плавает».
Accessibility вкладка покажет, если элемент недоступен пользователю с читалкой.

7. Инспекторы мобилок

Android Studio / Chrome DevTools для WebView.
Safari Web Inspector для iOS.
Expo dev tools, React Native Flipper — для React Native.

8. Тесты как дебаг

Пиши небольшие unit-тесты для проблемного кейса.
Снимай snapshot, чтобы понять, что меняется.
Используй debug() в Testing Library, чтобы увидеть текущий DOM.

Как сделать эти инструменты привычкой

Потренируйся на несложном баге: пройди через каждый инструмент.
Сохрани шпаргалку с горячими клавишами DevTools.
Делись экранами с коллегами, показывая, как ты дебажишь.
Включай профайлер и инспекторы минимум раз в спринт, даже если всё работает.

Итог

Console.log — быстрый способ проверить гипотезу. Но настоящая сила дебага в инструментах, которые дают картину целиком. Освой их сейчас, и следующий баг решится быстрее и спокойнее. 💪