Интеграция Flipper для отладки мобильного приложения (React Native/Android)
Flipper — десктопный инструмент от Meta для отладки мобильных приложений. На React Native и Android он даёт то, чего нет в стандартном Chrome DevTools: инспектор нативного layout, network inspector с телами запросов, просмотр SharedPreferences и AsyncStorage, crash reporter и логи устройства — всё в одном окне.
Базовая интеграция для React Native
Начиная с React Native 0.62 Flipper включён в шаблон проекта. Если создавали проект командой npx react-native init, Flipper уже есть — нужно только запустить Flipper-приложение на Mac/Windows и запустить приложение в дебаг-режиме. Клиент-серверное соединение устанавливается автоматически через локальную сеть.
Для старых проектов или при сломанной интеграции — добавляем зависимости вручную:
Android (android/app/build.gradle):
dependencies {
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
exclude group:'com.facebook.fbjni'
}
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
exclude group:'com.facebook.fbjni'
}
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
}
Application.kt:
if (BuildConfig.DEBUG) {
SoLoader.init(this, false)
val client = AndroidFlipperClient.getInstance(this)
client.addPlugin(InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()))
client.addPlugin(NetworkFlipperPlugin())
client.addPlugin(SharedPreferencesFlipperPlugin(this))
client.start()
}
Критично: Flipper только в debug builds. if (BuildConfig.DEBUG) обязателен — в release SDK не должен инициализироваться.
Network Inspector
Самый полезный плагин. Показывает все HTTP-запросы с заголовками, телами и временем ответа. Для React Native — подключается к fetch и XMLHttpRequest автоматически. Для OkHttp в нативном Android:
val networkInterceptor = FlipperOkhttpInterceptor(NetworkFlipperPlugin())
OkHttpClient.Builder().addNetworkInterceptor(networkInterceptor).build()
Layout Inspector
Аналог Chrome DevTools Elements для нативного UI. Позволяет кликнуть на любой элемент экрана и увидеть его нативные свойства: реальные размеры, margins, accessibility properties. Для React Native особенно полезен при отладке Yoga layout — видно computed flex values, которые не видны в JS-инспекторе.
Проблемы при настройке
Flipper чувствителен к версиям. Типичный краш при интеграции — несовместимость flipper-folly с NDK версией в проекте, или конфликт fbjni. Если видите CMake Error при сборке Android — проверьте, что версии в android/gradle.properties:
FLIPPER_VERSION=0.182.0
совпадают с тем, что ожидает текущая версия RN. Матрица совместимости есть в официальной документации Flipper.
На M1/M2 Mac нужен Rosetta для запуска iOS-симулятора с Flipper в некоторых конфигурациях — это известная проблема, решается через arch -x86_64 pod install.
Сроки
Настройка Flipper с Network Inspector и Layout Inspector — 1 день, включая решение типичных проблем совместимости версий.