Flipper – vad är det, funktioner och tillämpning

Vad är Flipper?

Flipper är en öppen plattform för felsökning av mobilapplikationer, skapad av Facebook (Meta) 2018. Ursprungligen hette projektet Sonar och var avsett för företagets interna behov, men 2019 publicerade Meta källkoden under MIT-licens. Plattformen består av två komponenter: ett skrivbordsprogram på Electron och ett SDK som integreras i Android- och iOS-projekt.

Den största skillnaden mellan Flipper och andra felsökningsverktyg är den modulära arkitekturen. Istället för en monolitisk felsökare ansluter utvecklaren bara de plugins som verkligen behövs i projektet. Detta minskar belastningen på applikationen och förenklar gränssnittet: felsökaren visar exakt vad utvecklaren valt. Android Studio erbjuder inbyggda profilerare, men de fungerar bara via ADB och ger inte samma anpassningsnivå som Flipper.

Enligt Meta används Flipper i över 2000 projekt inom företaget och stöder integration med Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite och andra populära bibliotek. Plattformen är kompatibel med Android API 16+ och iOS 11+.

Flipper-arkitektur: hur fungerar anslutningen mellan skrivbord och enhet

Flipper-arkitekturen är byggd på klient-server-modellen. Skrivbordsprogrammet fungerar som server och mobila enheter som klienter. Anslutningen upprättas via USB eller TCP/IP, varefter tvåvägsmeddelandeutbyte påbörjas via Flipper-protokollet baserat på WebSocket.

På Android-sidan tillhandahålls kommunikationen av android-client-biblioteket, som använder ADB för tunneling av trafik. iOS-klienten ansluter via idb (iOS Device Bridge) – en egen utveckling av Meta för interaktion med iOS-enheter utan Xcode. Inne i applikationen registrerar varje plugin sig i FlipperClient och får en egen kommunikationskanal med sin skrivbordsmotsvarighet.

Dataöverföringsprocessen ser ut så här: pluginet på enheten skickar en händelse via FlipperClient, klienten serialiserar den till JSON och överför via WebSocket till skrivbordet. Skrivbordsprogrammet deserialiserar meddelandet och skickar det till motsvarande plugin i gränssnittet. Enligt Metas tekniska blogg (2024) är meddelandefördröjningen mindre än 15 millisekunder vid USB-anslutning.

Hur man installerar och konfigurerar Flipper

Installation av Flipper består av tre steg: installation av skrivbordsprogrammet, tillägg av SDK till projektet och start av felsökaren. Skrivbordsprogrammet laddas ner från den officiella webbplatsen fbflipper.com – versioner finns för Windows, macOS och Linux i formaten dmg, exe och AppImage. Efter installation upptäcker programmet automatiskt anslutna enheter via ADB.

För Android-projekt ansluts Flipper via beroenden i build.gradle. Man måste ange Flipper-versionen som matchar skrivbordsklientens version och lägga till plugins för de använda biblioteken. Nedan ges ett exempel på konfiguration för ett projekt i 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"
    )
}

Efter Gradle-synkronisering måste FlipperClient initieras i Application-klassen. Initiering sker i debug-bygget – i release-versionen bör biblioteket inte anslutas för att inte avslöja felsökningsinformation för användarna.

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

För iOS läggs Flipper till via CocoaPods. I Podfile anges ramverken Flipper och FlipperKit, samt Flipper-Folly och Flipper-PeerTalk för att organisera kommunikationskanalen. Efter pod install och start av applikationen på simulatorn eller enheten upptäcker skrivbordsklienten automatiskt en ny session.

Kontrollera anslutning

Efter att applikationen startats, öppna skrivbords-Flipper – i den vänstra panelen visas en lista över anslutna enheter. Om enheten inte visas, kontrollera: är ADB installerat, är USB-felsökning aktiverad på Android, är idb-bryggan för iOS startad. Varje enhet visas med modellnamn och version av operativsystemet.

Flipper-plugins för Android och iOS

Flipper-plugins är modulära tillägg som lägger till paneler i skrivbordsgränssnittet för specifika uppgifter. Meta stöder officiella plugins för de mest populära biblioteken: Network Plugin för OkHttp och URLSession, Database Plugin för SQLite och Realm, Layout Inspector för View-hierarki, SharedPreferences Plugin och Crash Reporter.

Förutom de officiella plugins finns ett ekosystem av tredjepartsplugins utvecklade av communityn. Till exempel MMKV Plugin för felsökning av Tencent MMKV-lagring, Redux Debugger för React Native, LeakCanary Plugin för att upptäcka minnesläckor. Plugins distribueras via Maven Central och CocoaPods och ansluts som vanliga beroenden.

En viktig fördel med Flipper är möjligheten att skriva egna plugins. Ett plugin består av två delar: en klientdel (i Kotlin eller Swift) som registreras i mobilapplikationen, och en skrivbordsdel (i TypeScript eller JavaScript) som lägger till en UI-panel i gränssnittet. Meta tillhandahåller API för att skapa anpassade plugins med stöd för WebSocket och JSON-meddelanden.

Huvudsakliga plugins för Android

Nätverksfelsökning via Flipper

Network Plugin – en av de mest efterfrågade Flipper-plugins. Den fångar upp alla HTTP/HTTPS-förfrågningar som går via OkHttp på Android eller URLSession på iOS och visar dem i skrivbordsgränssnittet i realtid. För varje förfrågan finns tillgängligt: URL, metod, statuskod, begäran- och svarshuvuden, begäran- och svarstext, exekveringstid och storlek.

För att ansluta Network Plugin på Android räcker det att lägga till beroendet flipper-network-plugin och skicka OkHttpClient till NetworkFlipperPlugin-konstruktorn. Flipper omsluter automatiskt OkHttpClient i en avlyssnare. På iOS kräver plugin för integration med URLSession konfiguration via FlipperNetworkInterceptor.

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

Nyckelfunktionen hos Network Plugin är stöd för sökning och filtrering av förfrågningar. Utvecklaren kan filtrera förfrågningar efter URL, metod, statuskod eller innehållstyp. Vilken förfrågan som helst kan tvångsskickas igen från gränssnittet – detta är användbart för att testa endpoints utan att skriva en separat curl-förfrågan. Enligt Metas utvecklarenkät (2024) används Network Plugin i 78% av projekten där Flipper är installerat.

Databas- och SharedPreferences-felsökning

Database Plugin öppnar åtkomst till SQLite- och Realm-databaser direkt från skrivbordsklienten. Utvecklaren ser alla tabeller, deras schema och innehåll i tabellform. Godtyckliga SQL-frågor kan utföras, poster kan läggas till, redigeras och tas bort utan att skriva kod. Detta påskyndar avsevärt felsökning av applikationstillstånd jämfört med att använda adb shell.

SharedPreferences Plugin fungerar på liknande sätt: det visar alla nycklar och värden som lagras i SharedPreferences på Android. Redigering sker omedelbart – ändringarna syns direkt i applikationen. Det finns dock en viktig begränsning: efter omstart av applikationen återansluter Flipper och alla ändringar som gjorts via pluginet sparas, eftersom de tillämpas direkt på SharedPreferences-filen.

För iOS är motsvarigheten NSUserDefaults Plugin. Det fungerar med UserDefaults och visar alla sparade nyckel-värdepar. Pluginet stöder redigering av strängar, nummer, datum och arrayer. Ändringar tillämpas omedelbart eftersom Flipper får åtkomst till UserDefaults via runtime-gränssnittet.

Layout Inspector och loggning

Layout Inspector från Flipper ger en visuell representation av View-hierarkin på Android. Utvecklaren ser komponentträdet, deras attribut (bredd, höjd, marginaler, bakgrund, text) och kan interaktivt välja vilket element som helst på enhetens skärm. Detta är ett alternativ till den inbyggda Layout Inspector i Android Studio, men med en viktig skillnad – Flipper visar hierarkin i realtid utan att stoppa applikationen.

För loggning används Logs Plugin. Alla loggar från Logcat kommer till skrivbordsgränssnittet med filtrering efter nivå (Debug, Info, Warn, Error) och tagg. Till skillnad från Android Studio Logcat överbelastar Flipper-gränssnittet inte skärmen – loggar grupperas efter tagg och markeras efter nivå. Sökning och export av loggar till JSON stöds.

En annan användbar funktion är Console Plugin, som visar console.log från JavaScript-kod i React Native eller WebView-komponenter. Detta förenklar felsökning av hybridapplikationer: utvecklaren ser både interna loggar och JS-loggar i ett gränssnitt. Pluginet stöder filtrering efter källa (Native eller JS) och loggningsnivå.

Konfiguration av Flutter-plugins

För Flutter-applikationer ansluts Flipper via paketet flipper från pub.dev. Plugin flutter_flipper erbjuder integration med nätverkslagret Dio, SharedPreferences-lagring och Flutter-navigering. Installation kräver att ett beroende läggs till i pubspec.yaml och att FlipperClient initieras i applikationens main-funktion. Flutter-plugins är för närvarande mindre funktionella än inbyggda plugins men täcker de viktigaste felsökningsscenarierna.

Prestanda under felsökning

Flipper förbrukar enhetens och skrivbordets resurser proportionellt mot antalet aktiva plugins. Vid samtidig anslutning av alla plugins på Android-emulatorn observeras en prestandaminskning på 5–10% enligt Meta-mätningar (2024). Det rekommenderas att endast ansluta nödvändiga plugins och stänga av oanvända via skrivbordsapplikationens gränssnitt.