React Native Debugger и Flipper

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

Возможности Flipper

  • React DevTools — просмотр дерева компонентов, их пропсов и состояния.
  • Redux / Zustand / Context DevTools — если вы используете систему управления состоянием, Flipper может отображать историю изменений (при наличии соответствующего плагина).
  • Network Inspector — отслеживание всех HTTP(S)-запросов: метод, URL, заголовки, тело запроса и ответа.
  • Logs — сбор всех вызовов console.log(), console.warn(), console.error() в одном месте с возможностью фильтрации.
  • Crash Reporter — автоматическое уведомление об ошибках времени выполнения.
  • Device Logs — просмотр системных логов устройства (особенно полезно на Android).

Установка и подключение

  1. Скачайте Flipper с официального сайта: https://fbflipper.com.
  2. Запустите ваше React Native-приложение (npx react-native run-android или run-ios).
  3. Откройте Flipper — он автоматически обнаружит подключённое приложение, если оно запущено в режиме разработки.
  4. Убедитесь, что в проекте установлены необходимые зависимости:
    • Для React DevTools: обычно встроены по умолчанию.
    • Для Redux DevTools: требуется установка @redux-devtools/flipper и настройка стора.

Примечание: Expo Go не поддерживает Flipper напрямую. Для использования Flipper с Expo необходимо перейти на bare workflow или использовать EAS Build с кастомной нативной конфигурацией.

Альтернатива: React Native Debugger (устаревший)

Ранее популярный инструмент React Native Debugger объединял React DevTools, Redux DevTools и Chrome DevTools в одном окне. Однако он больше не поддерживается и несовместим с новыми версиями React Native. Рекомендуется использовать Flipper как основной инструмент отладки.

Flipper значительно упрощает диагностику проблем и позволяет глубже понимать поведение приложения без постоянного переключения между терминалом, браузером и эмулятором.