Flipper: что это такое, возможности и применение

Что такое Flipper?

Flipper — это открытая платформа для отладки мобильных приложений, созданная Facebook (Meta) в 2018 году. Изначально проект назывался Sonar и предназначался для внутренних нужд компании, но в 2019 году Meta опубликовала исходный код под лицензией MIT. Платформа состоит из двух компонентов: десктопного приложения на Electron и SDK, который интегрируется в Android- и iOS-проекты.

Основное отличие Flipper от других отладочных инструментов — модульная архитектура. Вместо монолитного отладчика разработчик подключает только те плагины, которые реально нужны в проекте. Это снижает нагрузку на приложение и упрощает интерфейс: отладчик показывает ровно то, что разработчик выбрал. Android Studio предоставляет встроенные профилировщики, но они работают только через ADB и не дают такого уровня кастомизации, как Flipper.

По данным Meta, Flipper используется в более чем 2000 проектах внутри компании и поддерживает интеграцию с Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite и другими популярными библиотеками. Платформа совместима с Android API 16+ и iOS 11+.

Архитектура Flipper: как работает связь десктоп — устройство

Архитектура Flipper построена по клиент-серверной модели. Десктопное приложение выступает в роли сервера, а мобильные устройства — клиентов. Соединение устанавливается через USB или TCP/IP, после чего начинается двусторонний обмен сообщениями по протоколу Flipper Protocol на базе WebSocket.

На стороне Android связь обеспечивается библиотекой android-client, которая использует ADB для туннелирования трафика. iOS-клиент подключается через idb (iOS Device Bridge) — собственную разработку Meta для взаимодействия с iOS-устройствами без Xcode. Внутри приложения каждый плагин регистрируется в FlipperClient и получает собственный канал связи с десктопным аналогом.

Процесс передачи данных выглядит так: плагин на устройстве отправляет событие через FlipperClient, клиент сериализует его в JSON и передаёт через WebSocket на десктоп. Десктопное приложение десериализует сообщение и отправляет его соответствующему плагину в интерфейсе. По данным технического блога Meta (2024), задержка передачи сообщения составляет менее 15 миллисекунд при USB-подключении.

Как установить и настроить Flipper

Установка Flipper состоит из трёх шагов: установка десктопного приложения, добавление SDK в проект и запуск отладчика. Десктопное приложение скачивается с официального сайта fbflipper.com — доступны сборки для Windows, macOS и Linux в форматах dmg, exe и AppImage. После установки приложение автоматически обнаруживает подключённые устройства через ADB.

Для Android-проекта Flipper подключается через зависимости в build.gradle. Требуется указать версию Flipper, которая совпадает с версией десктопного клиента, и добавить плагины для используемых библиотек. Ниже приведён пример конфигурации для проекта на Kotlin:

// build.gradle (app)
val flipperVersion = "0.265.0"

dependencies {
    debugImplementation("com.facebook.flipper:flipper:$flipperVersion")
    debugImplementation(
        "com.facebook.flipper:flipper-network-plugin:$flipperVersion"
    )
    debugImplementation(
        "com.facebook.flipper:flipper-litho-plugin:$flipperVersion"
    )
}

После синхронизации Gradle нужно инициализировать FlipperClient в Application-классе. Инициализация выполняется в debug-сборке — в релизной версии библиотека не должна подключаться, чтобы не раскрывать отладочную информацию пользователям.

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        if (BuildConfig.DEBUG) {
            SoLoader.init(this, false)
            AndroidFlipperClient
                .getInstance(this)
                .addPlugin(NetworkFlipperPlugin())
                .start()
        }
    }
}

Для iOS Flipper добавляется через CocoaPods. В Podfile указываются фреймворки Flipper и FlipperKit, а также Flipper-Folly и Flipper-PeerTalk для организации канала связи. После pod install и запуска приложения на симуляторе или устройстве десктопный клиент автоматически обнаружит новую сессию.

Проверка подключения

После запуска приложения откройте десктопный Flipper — в левой панели появится список подключённых устройств. Если устройство не отображается, проверьте: установлен ли ADB, включена ли отладка по USB на Android или запущен ли idb-мост для iOS. Каждое устройство отображается с названием модели и версией ОС.

Плагины Flipper для Android и iOS

Плагины Flipper — это модульные расширения, которые добавляют панели в десктопный интерфейс под конкретные задачи. Meta поддерживает официальные плагины для самых популярных библиотек: Network Plugin для OkHttp и URLSession, Database Plugin для SQLite и Realm, Layout Inspector для иерархии View, SharedPreferences Plugin и Crash Reporter.

Кроме официальных, существует экосистема сторонних плагинов, разработанных сообществом. Например, MMKV Plugin для отладки хранилища Tencent MMKV, Redux Debugger для React Native, LeakCanary Plugin для обнаружения утечек памяти. Плагины распространяются через Maven Central и CocoaPods и подключаются как обычные зависимости.

Важное преимущество Flipper — возможность писать собственные плагины. Плагин состоит из двух частей: клиентской (на Kotlin или Swift), которая регистрируется в мобильном приложении, и десктопной (на TypeScript или JavaScript), которая добавляет UI-панель в интерфейс. Meta предоставляет API для создания кастомных плагинов с поддержкой WebSocket и JSON-сообщений.

Основные плагины для Android

Отладка сети через Flipper

Network Plugin — один из самых востребованных плагинов Flipper. Он перехватывает все HTTP/HTTPS запросы, которые проходят через OkHttp на Android или URLSession на iOS, и отображает их в десктопном интерфейсе в реальном времени. Для каждого запроса доступны: URL, метод, статус-код, заголовки запроса и ответа, тело запроса и ответа, время выполнения и размер.

Для подключения Network Plugin на Android достаточно добавить зависимость flipper-network-plugin и передать OkHttpClient в конструктор NetworkFlipperPlugin. Flipper автоматически оборачивает OkHttpClient в перехватчик. На iOS плагин интеграции с URLSession требует настройки через FlipperNetworkInterceptor.

val networkPlugin = NetworkFlipperPlugin()
val client = OkHttpClient.Builder()
    .addNetworkInterceptor(networkPlugin)
    .build()

Ключевая особенность Network Plugin — поддержка поиска и фильтрации запросов. Разработчик может фильтровать запросы по URL, методу, статус-коду или типу контента. Можно принудительно повторить любой запрос из интерфейса — это полезно для тестирования эндпоинтов без написания отдельного curl-запроса. По данным опроса разработчиков Meta (2024), Network Plugin используется в 78% проектов, где установлен Flipper.

Отладка базы данных и SharedPreferences

Database Plugin открывает доступ к SQLite и Realm базам данных прямо из десктопного клиента. Разработчик видит все таблицы, их схему и содержимое в виде табличного представления. Можно выполнять произвольные SQL-запросы, добавлять, редактировать и удалять записи без написания кода. Это значительно ускоряет отладку состояний приложения по сравнению с использованием adb shell.

SharedPreferences Plugin работает аналогично: отображает все ключи и значения, хранящиеся в SharedPreferences на Android. Редактирование происходит мгновенно — изменения сразу видны в приложении. Однако есть важное ограничение: после перезапуска приложения Flipper переподключается, и все изменения, сделанные через плагин, сохраняются, потому что они применяются напрямую к файлу SharedPreferences.

Для iOS аналогом является NSUserDefaults Plugin. Он работает с UserDefaults и показывает все сохранённые пары ключ-значение. Плагин поддерживает редактирование строк, чисел, дат и массивов. Изменения применяются мгновенно, так как Flipper обращается к UserDefaults через runtime-интерфейс.

Layout Inspector и логирование

Layout Inspector от Flipper предоставляет визуальное представление иерархии View на Android. Разработчик видит дерево компонентов, их атрибуты (ширина, высота, отступы, фон, текст) и может интерактивно выбирать любой элемент на экране устройства. Это альтернатива встроенному Layout Inspector в Android Studio, но с важным отличием — Flipper показывает иерархию в реальном времени без остановки приложения.

Для логирования используется Logs Plugin. Все логи из Logcat попадают в десктопный интерфейс с фильтрацией по уровню (Debug, Info, Warn, Error) и тегу. В отличие от Android Studio Logcat, интерфейс Flipper не перегружает экран — логи группируются по тегу и подсвечиваются по уровню. Поддерживается поиск и экспорт логов в JSON.

Ещё одна полезная возможность — Console Plugin, который отображает console.log из JavaScript-кода в React Native или WebView-компонентах. Это упрощает отладку гибридных приложений: разработчик видит и нативные логи, и JS-логи в одном интерфейсе. Плагин поддерживает фильтрацию по источнику (Native или JS) и уровню логирования.

Настройка Flutter-плагинов

Для Flutter-приложений Flipper подключается через пакет flipper из pub.dev. Плагин flutter_flipper предоставляет интеграцию с сетевым слоем Dio, хранилищем SharedPreferences и навигацией Flutter. Установка требует добавления зависимости в pubspec.yaml и инициализации FlipperClient в main-функции приложения. Flutter-плагины пока уступают нативным по функциональности, но покрывают основные сценарии отладки.

Производительность при отладке

Flipper потребляет ресурсы устройства и десктопа пропорционально количеству активных плагинов. При подключении всех плагинов одновременно на Android-эмуляторе наблюдается падение производительности на 5–10% по данным замеров Meta (2024). Рекомендуется подключать только необходимые плагины и отключать неиспользуемые через интерфейс десктопного приложения.