Flipper – mi ez, lehetőségek és alkalmazás

Mi az a Flipper?

Flipper egy nyílt platform mobilalkalmazások hibakeresésére, amelyet a Facebook (Meta) hozott létre 2018-ban. A projekt eredetileg Sonar néven futott, és a vállalat belső igényeire szolgált, de 2019-ben a Meta MIT licenc alatt közzétette a forráskódot. A platform két komponensből áll: egy Electron alapú asztali alkalmazásból és egy SDK-ból, amely Android és iOS projektekbe integrálódik.

A Flipper fő különbsége más hibakereső eszközökhöz képest a moduláris architektúra. A monolit hibakereső helyett a fejlesztő csak azokat a bővítményeket csatlakoztatja, amelyekre valóban szükség van a projektben. Ez csökkenti az alkalmazás terhelését és leegyszerűsíti a felületet: a hibakereső pontosan azt mutatja, amit a fejlesztő kiválasztott. Az Android Studio beépített profilozókat kínál, de ezek csak ADB-n keresztül működnek, és nem nyújtanak olyan testreszabási szintet, mint a Flipper.

A Meta adatai szerint a Flippert több mint 2000 projekten belül használják a vállalatnál, és támogatja az integrációt a Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite és más népszerű könyvtárakkal. A platform kompatibilis az Android API 16+ és iOS 11+ rendszerekkel.

A Flipper architektúrája: hogyan működik az asztali – eszköz kapcsolat

A Flipper architektúrája kliens-szerver modellre épül. Az asztali alkalmazás szerverként, a mobil eszközök pedig kliensekként működnek. A kapcsolat USB-n vagy TCP/IP-n keresztül jön létre, majd megkezdődik a kétirányú üzenetváltás a WebSocket alapú Flipper Protokollon keresztül.

Android oldalon a kommunikációt az android-client könyvtár biztosítja, amely ADB-t használ a forgalom alagutazásához. Az iOS kliens az idb (iOS Device Bridge) segítségével csatlakozik – ez a Meta saját fejlesztése az iOS-eszközökkel való interakcióhoz Xcode nélkül. Az alkalmazáson belül minden bővítmény regisztrálódik a FlipperClient-ben, és saját kommunikációs csatornát kap az asztali megfelelőjével.

Az adatátviteli folyamat a következő: az eszközön lévő bővítmény eseményt küld a FlipperClient-en keresztül, a kliens JSON-ba szerializálja, és WebSocketen keresztül továbbítja az asztali gépre. Az asztali alkalmazás deszerializálja az üzenetet, és elküldi a megfelelő bővítménynek a felületen. A Meta technikai blogja (2024) szerint az üzenetátvitel késleltetése USB-kapcsolat esetén kevesebb mint 15 ezredmásodperc.

A Flipper telepítése és konfigurálása

A Flipper telepítése három lépésből áll: az asztali alkalmazás telepítése, az SDK hozzáadása a projekthez és a hibakereső elindítása. Az asztali alkalmazás a hivatalos fbflipper.com weboldalról tölthető le – Windows, macOS és Linux rendszerekhez elérhetők dmg, exe és AppImage formátumú verziók. A telepítés után az alkalmazás automatikusan észleli a ADB-n keresztül csatlakoztatott eszközöket.

Android projekthez a Flipper a build.gradle függőségein keresztül csatlakoztatható. Meg kell adni a Flipper verzióját, amely megegyezik az asztali kliens verziójával, és hozzá kell adni a bővítményeket a használt könyvtárakhoz. Az alábbiakban egy példa konfiguráció látható Kotlin projekthez:

// build.gradle (alkalmazás)
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"
    )
}

A Gradle szinkronizálása után inicializálni kell a FlipperClient-et az Application osztályban. Az inicializálás a debug build-ben történik – a release verzióban a könyvtárat nem szabad csatlakoztatni, hogy ne fedje fel a hibakeresési információkat a felhasználók számára.

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

iOS esetén a Flipper CocoaPods segítségével adható hozzá. A Podfile-ban meg kell adni a Flipper és FlipperKit keretrendszereket, valamint a Flipper-Folly és Flipper-PeerTalk keretrendszereket a kommunikációs csatorna megszervezéséhez. A pod install és az alkalmazás szimulátoron vagy eszközön történő elindítása után az asztali kliens automatikusan észleli az új munkamenetet.

Kapcsolat ellenőrzése

Az alkalmazás elindítása után nyissa meg az asztali Flippert – a bal oldali panelen megjelenik a csatlakoztatott eszközök listája. Ha az eszköz nem jelenik meg, ellenőrizze: telepítve van-e az ADB, engedélyezve van-e az USB hibakeresés Androidon, elindult-e az idb híd iOS-hez. Minden eszköz a modell nevével és az operációs rendszer verziójával jelenik meg.

Flipper bővítmények Androidhoz és iOS-hez

A Flipper bővítmények moduláris kiterjesztések, amelyek paneleket adnak az asztali felülethez adott feladatokhoz. A Meta hivatalos bővítményeket támogat a legnépszerűbb könyvtárakhoz: Network Plugin OkHttp és URLSession számára, Database Plugin SQLite és Realm számára, Layout Inspector a View hierarchiához, SharedPreferences Plugin és Crash Reporter.

A hivatalos bővítményeken kívül létezik a közösség által fejlesztett harmadik fél bővítményeinek ökoszisztémája. Például MMKV Plugin a Tencent MMKV tároló hibakereséséhez, Redux Debugger React Native számára, LeakCanary Plugin a memóriaszivárgások észleléséhez. A bővítmények a Maven Central és CocoaPods segítségével terjeszthetők, és szokásos függőségekként csatlakoztathatók.

A Flipper fontos előnye, hogy saját bővítményeket lehet írni. Egy bővítmény két részből áll: a kliens oldalból (Kotlin vagy Swift nyelven), amely a mobilalkalmazásban regisztrálódik, és az asztali oldalból (TypeScript vagy JavaScript nyelven), amely egy UI panelt ad a felülethez. A Meta API-t biztosít egyéni bővítmények létrehozásához WebSocket és JSON üzenetek támogatásával.

Fő bővítmények Androidhoz

Hálózati hibakeresés a Flipperen keresztül

Network Plugin – a Flipper egyik legkeresettebb bővítménye. Elfogja az összes HTTP/HTTPS kérést, amely OkHttp-n Androidon vagy URLSession-en iOS-en halad át, és valós időben megjeleníti az asztali felületen. Minden kéréshez elérhetők: URL, metódus, státuszkód, kérés és válasz fejlécek, kérés és válasz törzse, végrehajtási idő és méret.

A Network Plugin Androidon történő csatlakoztatásához elég hozzáadni a flipper-network-plugin függőséget, és átadni az OkHttpClient-et a NetworkFlipperPlugin konstruktorának. A Flipper automatikusan becsomagolja az OkHttpClient-et egy elfogóba. iOS esetén a URLSession integrációs bővítmény konfigurálást igényel a FlipperNetworkInterceptor segítségével.

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

A Network Plugin legfontosabb jellemzője a kérések keresésének és szűrésének támogatása. A fejlesztő szűrheti a kéréseket URL, metódus, státuszkód vagy tartalomtípus szerint. Bármely kérés erőltetett újraküldése lehetséges a felületről – ez hasznos az endpointok teszteléséhez külön curl kérés írása nélkül. A Meta fejlesztői felmérése (2024) szerint a Network Plugin a Flipperrel telepített projektek 78%-ában használatos.

Adatbázis és SharedPreferences hibakeresés

Database Plugin hozzáférést nyit az SQLite és Realm adatbázisokhoz közvetlenül az asztali kliensből. A fejlesztő látja az összes táblát, azok sémáját és tartalmát táblázatos formában. Tetszőleges SQL lekérdezések hajthatók végre, rekordok adhatók hozzá, szerkeszthetők és törölhetők kód írása nélkül. Ez jelentősen felgyorsítja az alkalmazásállapotok hibakeresését az adb shell használatához képest.

SharedPreferences Plugin hasonlóan működik: megjeleníti az összes kulcsot és értéket, amely az Android SharedPreferences-ben tárolódik. A szerkesztés azonnal megtörténik – a változtatások azonnal láthatók az alkalmazásban. Van azonban egy fontos korlátozás: az alkalmazás újraindítása után a Flipper újracsatlakozik, és a bővítményen keresztül végrehajtott összes változtatás megmarad, mivel azok közvetlenül a SharedPreferences fájlra kerülnek alkalmazásra.

iOS esetén a megfelelő a NSUserDefaults Plugin. A UserDefaults-szal dolgozik, és megjeleníti az összes tárolt kulcs-érték párt. A bővítmény támogatja a karakterláncok, számok, dátumok és tömbök szerkesztését. A változtatások azonnal alkalmazásra kerülnek, mivel a Flipper a runtime felületen keresztül fér hozzá a UserDefaults-hoz.

Layout Inspector és naplózás

Layout Inspector a Flippertől vizuális megjelenítést biztosít a View hierarchiáról Androidon. A fejlesztő látja a komponensek fáját, azok attribútumait (szélesség, magasság, margók, háttér, szöveg), és interaktívan kiválaszthat bármely elemet az eszköz képernyőjén. Ez alternatívája az Android Studio beépített Layout Inspectorának, de fontos különbséggel – a Flipper valós időben mutatja a hierarchiát az alkalmazás leállítása nélkül.

A naplózáshoz a Logs Plugin használható. A Logcat összes naplója szint szerinti (Debug, Info, Warn, Error) és címke szerinti szűréssel érkezik az asztali felületre. Az Android Studio Logcattal ellentétben a Flipper felület nem terheli túl a képernyőt – a naplók címke szerint csoportosítva és szint szerint kiemelve jelennek meg. Támogatott a keresés és a naplók JSON-ba exportálása.

Egy másik hasznos funkció a Console Plugin, amely a console.log kimenetet jeleníti meg a JavaScript kódból React Native vagy WebView komponensekben. Ez leegyszerűsíti a hibrid alkalmazások hibakeresését: a fejlesztő mind a natív, mind a JS naplókat egyetlen felületen látja. A bővítmény támogatja a forrás szerinti (Native vagy JS) és naplózási szint szerinti szűrést.

Flutter bővítmények konfigurálása

Flutter alkalmazásokhoz a Flipper a flipper csomagon keresztül csatlakoztatható a pub.dev-ről. A flutter_flipper bővítmény integrációt biztosít a Dio hálózati réteggel, a SharedPreferences tárolóval és a Flutter navigációval. A telepítéshez hozzá kell adni a függőséget a pubspec.yaml-ben, és inicializálni kell a FlipperClient-et az alkalmazás main függvényében. A Flutter bővítmények jelenleg funkcionalitásban elmaradnak a natív bővítményektől, de lefedik a főbb hibakeresési forgatókönyveket.

Teljesítmény hibakeresés közben

A Flipper az aktív bővítmények számával arányosan fogyasztja az eszköz és az asztali gép erőforrásait. Az összes bővítmény egyidejű csatlakoztatásakor az Android emulátoron a Meta mérései (2024) szerint 5–10%-os teljesítménycsökkenés figyelhető meg. Javasolt csak a szükséges bővítményeket csatlakoztatni, és a nem használtakat az asztali alkalmazás felületén keresztül kikapcsolni.