Flipper – wat is het, mogelijkheden en toepassing

Wat is Flipper?

Flipper is een open platform voor het debuggen van mobiele applicaties, gemaakt door Facebook (Meta) in 2018. Oorspronkelijk heette het project Sonar en was het bedoeld voor interne behoeften van het bedrijf, maar in 2019 publiceerde Meta de broncode onder de MIT-licentie. Het platform bestaat uit twee componenten: een desktopapplicatie op Electron en een SDK die wordt geïntegreerd in Android- en iOS-projecten.

Het belangrijkste verschil tussen Flipper en andere debugtools is de modulaire architectuur. In plaats van een monolithische debugger sluit de ontwikkelaar alleen die plugins aan die echt nodig zijn in het project. Dit vermindert de belasting van de applicatie en vereenvoudigt de interface: de debugger toont precies wat de ontwikkelaar heeft geselecteerd. Android Studio biedt ingebouwde profilers, maar deze werken alleen via ADB en bieden niet het aanpassingsniveau van Flipper.

Volgens Meta wordt Flipper gebruikt in meer dan 2000 projecten binnen het bedrijf en ondersteunt het integratie met Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite en andere populaire bibliotheken. Het platform is compatibel met Android API 16+ en iOS 11+.

Flipper-architectuur: hoe werkt de verbinding tussen desktop en apparaat

Flipper-architectuur is gebouwd op het client-server-model. De desktopapplicatie fungeert als server en mobiele apparaten als clients. De verbinding wordt tot stand gebracht via USB of TCP/IP, waarna de tweerichtingsuitwisseling van berichten begint via het Flipper Protocol op basis van WebSocket.

Aan de Android-kant wordt de communicatie verzorgd door de android-clientbibliotheek, die ADB gebruikt voor het tunnelen van verkeer. De iOS-client maakt verbinding via idb (iOS Device Bridge) – een eigen ontwikkeling van Meta voor interactie met iOS-apparaten zonder Xcode. Binnen de applicatie registreert elke plugin zich in FlipperClient en krijgt zijn eigen communicatiekanaal met de desktop-tegenhanger.

Het gegevensoverdrachtproces ziet er als volgt uit: de plugin op het apparaat stuurt een gebeurtenis via FlipperClient, de client serialiseert deze naar JSON en verzendt deze via WebSocket naar de desktop. De desktopapplicatie deserialiseert het bericht en stuurt het naar de corresponderende plugin in de interface. Volgens de technische blog van Meta (2024) is de berichtvertraging minder dan 15 milliseconden bij USB-verbinding.

Flipper installeren en configureren

De installatie van Flipper bestaat uit drie stappen: installatie van de desktopapplicatie, toevoegen van de SDK aan het project en starten van de debugger. De desktopapplicatie wordt gedownload van de officiële website fbflipper.com – er zijn versies beschikbaar voor Windows, macOS en Linux in de formaten dmg, exe en AppImage. Na installatie detecteert de applicatie automatisch aangesloten apparaten via ADB.

Voor een Android-project wordt Flipper aangesloten via dependencies in build.gradle. De Flipper-versie moet overeenkomen met de versie van de desktopclient en er moeten plugins worden toegevoegd voor de gebruikte bibliotheken. Hieronder staat een voorbeeldconfiguratie voor een project in 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"
    )
}

Na Gradle-synchronisatie moet FlipperClient worden geïnitialiseerd in de Application-klasse. Initialisatie vindt plaats in de debug-build – in de releaseversie mag de bibliotheek niet worden aangesloten om debug-informatie niet aan gebruikers bloot te stellen.

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

Voor iOS wordt Flipper toegevoegd via CocoaPods. In Podfile worden de frameworks Flipper en FlipperKit gespecificeerd, evenals Flipper-Folly en Flipper-PeerTalk voor het organiseren van het communicatiekanaal. Na pod install en het starten van de applicatie op de simulator of het apparaat detecteert de desktopclient automatisch een nieuwe sessie.

Verbinding controleren

Na het starten van de applicatie opent u desktop Flipper – in het linkerpaneel verschijnt een lijst met aangesloten apparaten. Als het apparaat niet wordt weergegeven, controleert u: is ADB geïnstalleerd, is USB-debuggen ingeschakeld op Android, is de idb-brug voor iOS gestart. Elk apparaat wordt weergegeven met de modelnaam en de versie van het besturingssysteem.

Flipper-plugins voor Android en iOS

Flipper-plugins zijn modulaire extensies die panelen toevoegen aan de desktopinterface voor specifieke taken. Meta ondersteunt officiële plugins voor de populairste bibliotheken: Network Plugin voor OkHttp en URLSession, Database Plugin voor SQLite en Realm, Layout Inspector voor de View-hiërarchie, SharedPreferences Plugin en Crash Reporter.

Naast de officiële plugins is er een ecosysteem van third-party plugins ontwikkeld door de community. Bijvoorbeeld MMKV Plugin voor het debuggen van Tencent MMKV-opslag, Redux Debugger voor React Native, LeakCanary Plugin voor het detecteren van geheugenlekken. Plugins worden gedistribueerd via Maven Central en CocoaPods en worden aangesloten als gewone dependencies.

Een belangrijk voordeel van Flipper is de mogelijkheid om eigen plugins te schrijven. Een plugin bestaat uit twee delen: een clientdeel (in Kotlin of Swift) dat zich registreert in de mobiele applicatie, en een desktopdeel (in TypeScript of JavaScript) dat een UI-paneel toevoegt aan de interface. Meta biedt een API voor het maken van aangepaste plugins met ondersteuning voor WebSocket en JSON-berichten.

Belangrijkste plugins voor Android

Netwerkdebuggen met Flipper

Network Plugin – een van de meest gevraagde Flipper-plugins. Het onderschept alle HTTP/HTTPS-verzoeken die via OkHttp op Android of URLSession op iOS gaan en geeft ze weer in de desktopinterface in realtime. Voor elk verzoek zijn beschikbaar: URL, methode, statuscode, verzoek- en antwoordheaders, verzoek- en antwoordbody, uitvoeringstijd en grootte.

Om Network Plugin op Android aan te sluiten, volstaat het om de dependency flipper-network-plugin toe te voegen en OkHttpClient door te geven aan de constructor van NetworkFlipperPlugin. Flipper wikkelt OkHttpClient automatisch in een interceptor. Op iOS vereist de plugin voor integratie met URLSession configuratie via FlipperNetworkInterceptor.

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

De belangrijkste functie van Network Plugin is ondersteuning voor zoeken en filteren van verzoeken. De ontwikkelaar kan verzoeken filteren op URL, methode, statuscode of inhoudstype. Elk verzoek kan gedwongen opnieuw worden verzonden vanuit de interface – dit is handig voor het testen van endpoints zonder een apart curl-verzoek te schrijven. Volgens een Meta-ontwikkelaarsenquête (2024) wordt Network Plugin gebruikt in 78% van de projecten waar Flipper is geïnstalleerd.

Database- en SharedPreferences-debuggen

Database Plugin opent toegang tot SQLite- en Realm-databases rechtstreeks vanuit de desktopclient. De ontwikkelaar ziet alle tabellen, hun schema en inhoud in tabelweergave. Er kunnen willekeurige SQL-query's worden uitgevoerd, records worden toegevoegd, bewerkt en verwijderd zonder code te schrijven. Dit versnelt het debuggen van applicatiestatus aanzienlijk in vergelijking met het gebruik van adb shell.

SharedPreferences Plugin werkt vergelijkbaar: het toont alle sleutels en waarden die zijn opgeslagen in SharedPreferences op Android. Bewerken gebeurt onmiddellijk – wijzigingen zijn direct zichtbaar in de applicatie. Er is echter een belangrijke beperking: na het opnieuw opstarten van de applicatie maakt Flipper opnieuw verbinding en blijven alle wijzigingen die via de plugin zijn gemaakt behouden, omdat ze rechtstreeks op het SharedPreferences-bestand worden toegepast.

Voor iOS is de tegenhanger NSUserDefaults Plugin. Het werkt met UserDefaults en toont alle opgeslagen sleutel-waardeparen. De plugin ondersteunt het bewerken van tekenreeksen, getallen, datums en arrays. Wijzigingen worden onmiddellijk toegepast, omdat Flipper toegang krijgt tot UserDefaults via de runtime-interface.

Layout Inspector en loggen

Layout Inspector van Flipper biedt een visuele weergave van de View-hiërarchie op Android. De ontwikkelaar ziet de componentenboom, hun attributen (breedte, hoogte, marges, achtergrond, tekst) en kan interactief elk element op het scherm van het apparaat selecteren. Dit is een alternatief voor de ingebouwde Layout Inspector in Android Studio, maar met een belangrijk verschil – Flipper toont de hiërarchie in realtime zonder de applicatie te stoppen.

Voor loggen wordt Logs Plugin gebruikt. Alle logs uit Logcat komen in de desktopinterface met filtering op niveau (Debug, Info, Warn, Error) en tag. In tegenstelling tot Android Studio Logcat overlaadt de Flipper-interface het scherm niet – logs worden gegroepeerd op tag en gemarkeerd op niveau. Zoeken en exporteren van logs naar JSON wordt ondersteund.

Een andere handige functie is Console Plugin, die console.log uit JavaScript-code in React Native of WebView-componenten weergeeft. Dit vereenvoudigt het debuggen van hybride applicaties: de ontwikkelaar ziet zowel native logs als JS-logs in één interface. De plugin ondersteunt filtering op bron (Native of JS) en logniveau.

Flutter-plugins configureren

Voor Flutter-applicaties wordt Flipper aangesloten via het flipper-pakket van pub.dev. De flutter_flipper-plugin biedt integratie met de netwerklaag Dio, SharedPreferences-opslag en Flutter-navigatie. Installatie vereist het toevoegen van een dependency in pubspec.yaml en initialisatie van FlipperClient in de main-functie van de applicatie. Flutter-plugins zijn momenteel minder functioneel dan native plugins, maar dekken de belangrijkste debugscenario's.

Prestaties tijdens debuggen

Flipper verbruikt bronnen van het apparaat en de desktop in verhouding tot het aantal actieve plugins. Bij het gelijktijdig aansluiten van alle plugins op de Android-emulator wordt een prestatievermindering van 5–10% waargenomen volgens Meta-metingen (2024). Het wordt aanbevolen alleen de benodigde plugins aan te sluiten en ongebruikte plugins uit te schakelen via de interface van de desktopapplicatie.