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 на базі 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 (додаток)
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). Рекомендується підключати лише необхідні плагіни та відключати невикористовувані через інтерфейс десктопного додатка.