Flipper : qu'est-ce que c'est, fonctionnalités et application

Qu'est-ce que Flipper ?

Flipper est une plateforme de débogage d'applications mobiles open source créée par Facebook (Meta) en 2018. Le projet s'appelait à l'origine Sonar et était destiné à un usage interne, mais en 2019, Meta a publié le code source sous licence MIT. La plateforme se compose de deux composants : une application desktop basée sur Electron et un SDK qui s'intègre aux projets Android et iOS.

La principale différence entre Flipper et les autres outils de débogage est son architecture modulaire. Au lieu d'un débogueur monolithique, le développeur connecte uniquement les plugins réellement nécessaires au projet. Cela réduit la charge sur l'application et simplifie l'interface : le débogueur montre exactement ce que le développeur a choisi. Android Studio fournit des profileurs intégrés, mais ils ne fonctionnent que via ADB et n'offrent pas le même niveau de personnalisation que Flipper.

Selon Meta, Flipper est utilisé dans plus de 2000 projets au sein de l'entreprise et prend en charge l'intégration avec Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite et d'autres bibliothèques populaires. La plateforme est compatible avec Android API 16+ et iOS 11+.

Architecture de Flipper : comment fonctionne la communication desktop-appareil

L'architecture de Flipper est basée sur un modèle client-serveur. L'application desktop agit comme un serveur et les appareils mobiles comme des clients. La connexion est établie via USB ou TCP/IP, après quoi un échange bidirectionnel de messages commence en utilisant le protocole Flipper basé sur WebSocket.

Côté Android, la communication est assurée par la bibliothèque android-client qui utilise ADB pour le tunneling du trafic. Le client iOS se connecte via idb (iOS Device Bridge), un développement propre à Meta pour interagir avec les appareils iOS sans Xcode. Dans l'application, chaque plugin s'enregistre auprès de FlipperClient et reçoit son propre canal de communication avec son homologue desktop.

Le processus de transfert de données fonctionne comme suit : le plugin sur l'appareil envoie un événement via FlipperClient, le client le sérialise en JSON et le transmet via WebSocket au desktop. L'application desktop désérialise le message et l'envoie au plugin correspondant dans l'interface. Selon le blog technique de Meta (2024), la latence de transmission des messages est inférieure à 15 millisecondes en connexion USB.

Comment installer et configurer Flipper

L'installation de Flipper comprend trois étapes : installer l'application desktop, ajouter le SDK au projet et lancer le débogueur. L'application desktop est téléchargée depuis le site officiel fbflipper.com — des versions sont disponibles pour Windows, macOS et Linux aux formats dmg, exe et AppImage. Après l'installation, l'application détecte automatiquement les appareils connectés via ADB.

Pour un projet Android, Flipper est connecté via des dépendances dans build.gradle. Vous devez spécifier la version de Flipper qui correspond à la version du client desktop et ajouter des plugins pour les bibliothèques utilisées. Voici un exemple de configuration pour un projet 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"
    )
}

Après la synchronisation Gradle, vous devez initialiser FlipperClient dans la classe Application. L'initialisation est effectuée dans la compilation de débogage — la bibliothèque ne doit pas être connectée dans la version release pour éviter d'exposer les informations de débogage aux utilisateurs.

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

Pour iOS, Flipper est ajouté via CocoaPods. Dans le Podfile, les frameworks Flipper et FlipperKit sont spécifiés, ainsi que Flipper-Folly et Flipper-PeerTalk pour organiser le canal de communication. Après pod install et l'exécution de l'application sur un simulateur ou un appareil, le client desktop détectera automatiquement une nouvelle session.

Vérification de la connexion

Après avoir lancé l'application, ouvrez Flipper desktop — une liste des appareils connectés apparaîtra dans le panneau gauche. Si l'appareil ne s'affiche pas, vérifiez : si ADB est installé, si le débogage USB est activé sur Android, ou si le pont idb est en cours d'exécution pour iOS. Chaque appareil est affiché avec le nom du modèle et la version du système d'exploitation.

Plugins Flipper pour Android et iOS

Les plugins Flipper sont des extensions modulaires qui ajoutent des panneaux à l'interface desktop pour des tâches spécifiques. Meta maintient des plugins officiels pour les bibliothèques les plus populaires : Network Plugin pour OkHttp et URLSession, Database Plugin pour SQLite et Realm, Layout Inspector pour la hiérarchie des vues, SharedPreferences Plugin et Crash Reporter.

En plus des plugins officiels, il existe un écosystème de plugins tiers développés par la communauté. Par exemple, MMKV Plugin pour déboguer le stockage Tencent MMKV, Redux Debugger pour React Native, LeakCanary Plugin pour détecter les fuites mémoire. Les plugins sont distribués via Maven Central et CocoaPods et sont connectés comme des dépendances régulières.

Un avantage important de Flipper est la possibilité d'écrire des plugins personnalisés. Un plugin se compose de deux parties : une partie côté client (en Kotlin ou Swift) qui s'enregistre dans l'application mobile, et une partie côté desktop (en TypeScript ou JavaScript) qui ajoute un panneau d'interface utilisateur à l'interface. Meta fournit une API pour créer des plugins personnalisés avec prise en charge de WebSocket et des messages JSON.

Principaux plugins pour Android

Débogage réseau via Flipper

Network Plugin est l'un des plugins Flipper les plus populaires. Il intercepte toutes les requêtes HTTP/HTTPS qui passent par OkHttp sur Android ou URLSession sur iOS et les affiche dans l'interface desktop en temps réel. Pour chaque requête sont disponibles : URL, méthode, code de statut, en-têtes de requête et de réponse, corps de requête et de réponse, temps d'exécution et taille.

Pour connecter Network Plugin sur Android, ajoutez simplement la dépendance flipper-network-plugin et passez OkHttpClient au constructeur NetworkFlipperPlugin. Flipper enveloppe automatiquement OkHttpClient dans un intercepteur. Sur iOS, le plugin d'intégration avec URLSession nécessite une configuration via FlipperNetworkInterceptor.

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

Une fonctionnalité clé de Network Plugin est la prise en charge de la recherche et du filtrage des requêtes. Le développeur peut filtrer les requêtes par URL, méthode, code de statut ou type de contenu. Toute requête peut être forcée d'être réessayée depuis l'interface — ceci est utile pour tester des endpoints sans écrire de requête curl séparée. Selon une enquête des développeurs Meta (2024), Network Plugin est utilisé dans 78 % des projets où Flipper est installé.

Débogage de base de données et SharedPreferences

Database Plugin donne accès aux bases de données SQLite et Realm directement depuis le client desktop. Le développeur voit toutes les tables, leur schéma et leur contenu dans une vue tabulaire. Des requêtes SQL arbitraires peuvent être exécutées et des enregistrements peuvent être ajoutés, modifiés et supprimés sans écrire de code. Cela accélère considérablement le débogage des états de l'application par rapport à l'utilisation de adb shell.

SharedPreferences Plugin fonctionne de la même manière : il affiche toutes les clés et valeurs stockées dans SharedPreferences sur Android. L'édition se produit instantanément — les modifications sont immédiatement visibles dans l'application. Cependant, il y a une limitation importante : après le redémarrage de l'application, Flipper se reconnecte et toutes les modifications effectuées via le plugin sont préservées car elles sont appliquées directement au fichier SharedPreferences.

Pour iOS, l'équivalent est NSUserDefaults Plugin. Il fonctionne avec UserDefaults et montre toutes les paires clé-valeur sauvegardées. Le plugin prend en charge l'édition de chaînes, nombres, dates et tableaux. Les modifications sont appliquées instantanément, car Flipper accède à UserDefaults via l'interface d'exécution.

Layout Inspector et journalisation

Layout Inspector de Flipper fournit une représentation visuelle de la hiérarchie des vues sur Android. Le développeur voit l'arborescence des composants, leurs attributs (largeur, hauteur, marges internes, fond, texte) et peut sélectionner interactivement n'importe quel élément sur l'écran de l'appareil. C'est une alternative au Layout Inspector intégré dans Android Studio, mais avec une différence importante — Flipper montre la hiérarchie en temps réel sans arrêter l'application.

Pour la journalisation, le Logs Plugin est utilisé. Tous les logs de Logcat apparaissent dans l'interface desktop avec filtrage par niveau (Debug, Info, Warn, Error) et par tag. Contrairement à Android Studio Logcat, l'interface de Flipper n'encombre pas l'écran — les logs sont regroupés par tag et surlignés par niveau. La recherche et l'exportation des logs en JSON sont prises en charge.

Une autre fonctionnalité utile est le Console Plugin, qui affiche console.log du code JavaScript dans les composants React Native ou WebView. Cela simplifie le débogage des applications hybrides : le développeur voit à la fois les logs natifs et les logs JS dans une seule interface. Le plugin prend en charge le filtrage par source (Native ou JS) et niveau de journalisation.

Configuration des plugins Flutter

Pour les applications Flutter, Flipper est connecté via le package flipper de pub.dev. Le plugin flutter_flipper fournit une intégration avec la couche réseau Dio, le stockage SharedPreferences et la navigation Flutter. L'installation nécessite d'ajouter la dépendance à pubspec.yaml et d'initialiser FlipperClient dans la fonction main de l'application. Les plugins Flutter sont encore inférieurs aux plugins natifs en termes de fonctionnalités, mais ils couvrent les principaux scénarios de débogage.

Performances pendant le débogage

Flipper consomme des ressources de l'appareil et du desktop proportionnellement au nombre de plugins actifs. Lorsque tous les plugins sont connectés simultanément sur un émulateur Android, une baisse de performance de 5 à 10 % est observée selon les mesures de Meta (2024). Il est recommandé de connecter uniquement les plugins nécessaires et de désactiver ceux qui ne sont pas utilisés via l'interface de l'application desktop.