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 (приложение)
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 компилация – в release версията библиотеката не трябва да се свързва, за да не разкрива информация за отстраняване на грешки на потребителите.

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 компоненти. Това опростява отстраняването на грешки в хибридни приложения: разработчикът вижда както native логове, така и JS логове в един интерфейс. Плъгинът поддържа филтриране по източник (Native или JS) и ниво на регистриране.

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

За Flutter приложения Flipper се свързва чрез пакета flipper от pub.dev. Плъгинът flutter_flipper предоставя интеграция с мрежовия слой Dio, хранилището SharedPreferences и навигацията на Flutter. Инсталирането изисква добавяне на зависимост в pubspec.yaml и инициализиране на FlipperClient в main функцията на приложението. Flutter плъгините в момента отстъпват по функционалност на native плъгините, но покриват основните сценарии за отстраняване на грешки.

Производителност при отстраняване на грешки

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