Flipper – co to je, možnosti a použití

Co je Flipper?

Flipper je otevřená platforma pro ladění mobilních aplikací vytvořená společností Facebook (Meta) v roce 2018. Původně se projekt jmenoval Sonar a byl určen pro interní potřeby společnosti, ale v roce 2019 Meta zveřejnila zdrojový kód pod licencí MIT. Platforma se skládá ze dvou komponent: desktopové aplikace na Electronu a SDK, které se integruje do projektů Android a iOS.

Hlavní rozdíl mezi Flipperem a jinými ladicími nástroji je modulární architektura. Místo monolitického debuggeru vývojář připojuje pouze ty pluginy, které jsou v projektu skutečně potřeba. To snižuje zatížení aplikace a zjednodušuje rozhraní: debugger zobrazuje přesně to, co vývojář vybral. Android Studio poskytuje vestavěné profiler, ale fungují pouze přes ADB a neposkytují úroveň přizpůsobení jako Flipper.

Podle Meta se Flipper používá ve více než 2000 projektech uvnitř společnosti a podporuje integraci s Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite a dalšími populárními knihovnami. Platforma je kompatibilní s Android API 16+ a iOS 11+.

Architektura Flipper: jak funguje spojení desktop – zařízení

Architektura Flipper je postavena na modelu klient-server. Desktopová aplikace funguje jako server a mobilní zařízení jako klienti. Spojení se navazuje přes USB nebo TCP/IP, poté začíná obousměrná výměna zpráv pomocí protokolu Flipper Protocol založeného na WebSocket.

Na straně Androidu je komunikace zajištěna knihovnou android-client, která používá ADB k tunelování provozu. iOS klient se připojuje přes idb (iOS Device Bridge) – vlastní vývoj Meta pro interakci s iOS zařízeními bez Xcode. Uvnitř aplikace se každý plugin registruje ve FlipperClient a získává vlastní komunikační kanál s desktopovým protějškem.

Proces přenosu dat vypadá takto: plugin na zařízení odešle událost přes FlipperClient, klient ji serializuje do JSON a přenese přes WebSocket na desktop. Desktopová aplikace deserializuje zprávu a odešle ji odpovídajícímu pluginu v rozhraní. Podle technického blogu Meta (2024) je zpoždění přenosu zprávy méně než 15 milisekund při USB připojení.

Jak nainstalovat a nakonfigurovat Flipper

Instalace Flipper se skládá ze tří kroků: instalace desktopové aplikace, přidání SDK do projektu a spuštění debuggeru. Desktopová aplikace se stahuje z oficiálních stránek fbflipper.com – k dispozici jsou verze pro Windows, macOS a Linux ve formátech dmg, exe a AppImage. Po instalaci aplikace automaticky detekuje připojená zařízení přes ADB.

Pro Android projekt se Flipper připojuje přes závislosti v build.gradle. Je třeba uvést verzi Flipper, která odpovídá verzi desktopového klienta, a přidat pluginy pro používané knihovny. Níže je uveden příklad konfigurace pro projekt v Kotlin:

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

Po synchronizaci Gradle je třeba inicializovat FlipperClient ve třídě Application. Inicializace se provádí v debug sestavení – v release verzi by knihovna neměla být připojena, aby neodhalovala ladicí informace uživatelům.

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

Pro iOS se Flipper přidává přes CocoaPods. V Podfile se uvádějí frameworky Flipper a FlipperKit, stejně jako Flipper-Folly a Flipper-PeerTalk pro organizaci komunikačního kanálu. Po pod install a spuštění aplikace na simulátoru nebo zařízení desktopový klient automaticky detekuje novou relaci.

Kontrola připojení

Po spuštění aplikace otevřete desktopový Flipper – v levém panelu se objeví seznam připojených zařízení. Pokud se zařízení nezobrazuje, zkontrolujte: je nainstalován ADB, je povoleno ladění přes USB na Androidu, je spuštěn most idb pro iOS. Každé zařízení se zobrazuje s názvem modelu a verzí operačního systému.

Pluginy Flipper pro Android a iOS

Pluginy Flipper jsou modulární rozšíření, která přidávají panely do desktopového rozhraní pro konkrétní úkoly. Meta podporuje oficiální pluginy pro nejoblíbenější knihovny: Network Plugin pro OkHttp a URLSession, Database Plugin pro SQLite a Realm, Layout Inspector pro hierarchii View, SharedPreferences Plugin a Crash Reporter.

Kromě oficiálních pluginů existuje ekosystém pluginů třetích stran vyvinutých komunitou. Například MMKV Plugin pro ladění úložiště Tencent MMKV, Redux Debugger pro React Native, LeakCanary Plugin pro detekci úniků paměti. Pluginy jsou distribuovány přes Maven Central a CocoaPods a připojují se jako běžné závislosti.

Důležitou výhodou Flipperu je možnost psát vlastní pluginy. Plugin se skládá ze dvou částí: klientské (v Kotlin nebo Swift), která se registruje v mobilní aplikaci, a desktopové (v TypeScript nebo JavaScript), která přidává UI panel do rozhraní. Meta poskytuje API pro vytváření vlastních pluginů s podporou WebSocket a JSON zpráv.

Hlavní pluginy pro Android

Ladění sítě přes Flipper

Network Plugin – jeden z nejžádanějších pluginů Flipperu. Zachycuje všechny HTTP/HTTPS požadavky procházející přes OkHttp na Androidu nebo URLSession na iOS a zobrazuje je v desktopovém rozhraní v reálném čase. Pro každý požadavek jsou k dispozici: URL, metoda, stavový kód, hlavičky požadavku a odpovědi, tělo požadavku a odpovědi, doba provedení a velikost.

Pro připojení Network Plugin na Androidu stačí přidat závislost flipper-network-plugin a předat OkHttpClient do konstruktoru NetworkFlipperPlugin. Flipper automaticky obalí OkHttpClient do zachycovače. Na iOS plugin integrace s URLSession vyžaduje konfiguraci přes FlipperNetworkInterceptor.

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

Klíčovou vlastností Network Plugin je podpora vyhledávání a filtrování požadavků. Vývojář může filtrovat požadavky podle URL, metody, stavového kódu nebo typu obsahu. Libovolný požadavek lze z rozhraní vynuceně opakovat – to je užitečné pro testování endpointů bez psaní samostatného curl požadavku. Podle průzkumu vývojářů Meta (2024) se Network Plugin používá v 78 % projektů, kde je nainstalován Flipper.

Ladění databáze a SharedPreferences

Database Plugin otevírá přístup k databázím SQLite a Realm přímo z desktopového klienta. Vývojář vidí všechny tabulky, jejich schéma a obsah v tabulkovém zobrazení. Lze provádět libovolné SQL dotazy, přidávat, upravovat a mazat záznamy bez psaní kódu. To výrazně urychluje ladění stavů aplikace ve srovnání s použitím adb shell.

SharedPreferences Plugin funguje podobně: zobrazuje všechny klíče a hodnoty uložené v SharedPreferences na Androidu. Úprava probíhá okamžitě – změny jsou ihned viditelné v aplikaci. Existuje však důležité omezení: po restartu aplikace se Flipper znovu připojí a všechny změny provedené přes plugin zůstanou zachovány, protože jsou aplikovány přímo na soubor SharedPreferences.

Pro iOS je obdobou NSUserDefaults Plugin. Pracuje s UserDefaults a zobrazuje všechny uložené páry klíč-hodnota. Plugin podporuje úpravu řetězců, čísel, dat a polí. Změny se aplikují okamžitě, protože Flipper přistupuje k UserDefaults přes runtime rozhraní.

Layout Inspector a logování

Layout Inspector od Flipperu poskytuje vizuální reprezentaci hierarchie View na Androidu. Vývojář vidí strom komponent, jejich atributy (šířka, výška, okraje, pozadí, text) a může interaktivně vybrat libovolný prvek na obrazovce zařízení. Jedná se o alternativu k vestavěnému Layout Inspector v Android Studio, ale s důležitým rozdílem – Flipper zobrazuje hierarchii v reálném čase bez zastavení aplikace.

Pro logování se používá Logs Plugin. Všechny logy z Logcatu se dostávají do desktopového rozhraní s filtrováním podle úrovně (Debug, Info, Warn, Error) a tagu. Na rozdíl od Android Studio Logcat rozhraní Flipperu nepřetěžuje obrazovku – logy jsou seskupeny podle tagu a zvýrazněny podle úrovně. Podporováno je vyhledávání a export logů do JSON.

Další užitečnou funkcí je Console Plugin, který zobrazuje console.log z JavaScriptového kódu v React Native nebo WebView komponentách. To zjednodušuje ladění hybridních aplikací: vývojář vidí jak nativní logy, tak JS logy v jednom rozhraní. Plugin podporuje filtrování podle zdroje (Native nebo JS) a úrovně logování.

Konfigurace Flutter pluginů

Pro Flutter aplikace se Flipper připojuje přes balíček flipper z pub.dev. Plugin flutter_flipper poskytuje integraci se síťovou vrstvou Dio, úložištěm SharedPreferences a navigací Flutter. Instalace vyžaduje přidání závislosti do pubspec.yaml a inicializaci FlipperClient v main funkci aplikace. Flutter pluginy v současnosti zaostávají za nativními v funkčnosti, ale pokrývají hlavní scénáře ladění.

Výkon při ladění

Flipper spotřebovává zdroje zařízení a desktopu úměrně počtu aktivních pluginů. Při připojení všech pluginů současně na Android emulátoru je pozorován pokles výkonu o 5–10 % podle měření Meta (2024). Doporučuje se připojovat pouze potřebné pluginy a vypínat nepoužívané přes rozhraní desktopové aplikace.