Flipper – co to jest, możliwości i zastosowanie

Czym jest Flipper?

Flipper to otwarta platforma do debugowania aplikacji mobilnych, stworzona przez Facebook (Meta) w 2018 roku. Początkowo projekt nazywał się Sonar i był przeznaczony do wewnętrznych potrzeb firmy, ale w 2019 roku Meta opublikowała kod źródłowy na licencji MIT. Platforma składa się z dwóch komponentów: aplikacji desktopowej na Electron i SDK, który integruje się z projektami Android i iOS.

Główna różnica między Flipper a innymi narzędziami debugowania to modułowa architektura. Zamiast monolitycznego debugera programista podłącza tylko te wtyczki, które są rzeczywiście potrzebne w projekcie. Zmniejsza to obciążenie aplikacji i upraszcza interfejs: debuger pokazuje dokładnie to, co wybrał programista. Android Studio udostępnia wbudowane profilery, ale działają one tylko przez ADB i nie oferują takiego poziomu personalizacji jak Flipper.

Według danych Meta, Flipper jest używany w ponad 2000 projektów wewnątrz firmy i obsługuje integrację z Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite i innymi popularnymi bibliotekami. Platforma jest kompatybilna z Android API 16+ i iOS 11+.

Architektura Flipper: jak działa połączenie desktop – urządzenie

Architektura Flipper opiera się na modelu klient-serwer. Aplikacja desktopowa pełni rolę serwera, a urządzenia mobilne – klientów. Połączenie nawiązywane jest przez USB lub TCP/IP, po czym rozpoczyna się dwukierunkowa wymiana wiadomości za pomocą protokołu Flipper Protocol opartego na WebSocket.

Po stronie Androida komunikację zapewnia biblioteka android-client, która wykorzystuje ADB do tunelowania ruchu. Klient iOS łączy się przez idb (iOS Device Bridge) – własne rozwiązanie Meta do interakcji z urządzeniami iOS bez Xcode. Wewnątrz aplikacji każda wtyczka rejestruje się w FlipperClient i otrzymuje własny kanał komunikacji z analogiem desktopowym.

Proces przesyłania danych wygląda następująco: wtyczka na urządzeniu wysyła zdarzenie przez FlipperClient, klient serializuje je do JSON i przesyła przez WebSocket na desktop. Aplikacja desktopowa deserializuje wiadomość i wysyła ją do odpowiedniej wtyczki w interfejsie. Według blogu technicznego Meta (2024), opóźnienie transmisji wiadomości wynosi mniej niż 15 milisekund przy połączeniu USB.

Jak zainstalować i skonfigurować Flipper

Instalacja Flipper składa się z trzech kroków: instalacja aplikacji desktopowej, dodanie SDK do projektu i uruchomienie debugera. Aplikację desktopową można pobrać z oficjalnej strony fbflipper.com – dostępne są wersje dla Windows, macOS i Linux w formatach dmg, exe i AppImage. Po instalacji aplikacja automatycznie wykrywa podłączone urządzenia przez ADB.

Dla projektu Android Flipper dodaje się przez zależności w build.gradle. Należy określić wersję Flipper, która odpowiada wersji klienta desktopowego, i dodać wtyczki dla używanych bibliotek. Poniżej znajduje się przykładowa konfiguracja dla projektu w Kotlin:

// build.gradle (aplikacja)
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 synchronizacji Gradle należy zainicjować FlipperClient w klasie Application. Inicjalizacja odbywa się w kompilacji debug – w wersji release biblioteka nie powinna być dołączana, aby nie ujawniać informacji debugowania użytkownikom.

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

Dla iOS Flipper dodaje się przez CocoaPods. W Podfile określa się frameworki Flipper i FlipperKit, a także Flipper-Folly i Flipper-PeerTalk do organizacji kanału komunikacji. Po pod install i uruchomieniu aplikacji na symulatorze lub urządzeniu klient desktopowy automatycznie wykryje nową sesję.

Sprawdzenie połączenia

Po uruchomieniu aplikacji otwórz desktopowego Flippera – w lewym panelu pojawi się lista podłączonych urządzeń. Jeśli urządzenie nie jest wyświetlane, sprawdź: czy ADB jest zainstalowane, czy debugowanie przez USB jest włączone na Androidzie, czy uruchomiony jest most idb dla iOS. Każde urządzenie jest wyświetlane z nazwą modelu i wersją systemu operacyjnego.

Wtyczki Flipper dla Android i iOS

Wtyczki Flipper to modułowe rozszerzenia, które dodają panele w interfejsie desktopowym do konkretnych zadań. Meta obsługuje oficjalne wtyczki dla najpopularniejszych bibliotek: Network Plugin dla OkHttp i URLSession, Database Plugin dla SQLite i Realm, Layout Inspector dla hierarchii View, SharedPreferences Plugin i Crash Reporter.

Oprócz oficjalnych istnieje ekosystem wtyczek zewnętrznych opracowanych przez społeczność. Na przykład MMKV Plugin do debugowania magazynu Tencent MMKV, Redux Debugger dla React Native, LeakCanary Plugin do wykrywania wycieków pamięci. Wtyczki są dystrybuowane przez Maven Central i CocoaPods i dodawane jako zwykłe zależności.

Ważną zaletą Flipper jest możliwość pisania własnych wtyczek. Wtyczka składa się z dwóch części: klienckiej (w Kotlin lub Swift), która rejestruje się w aplikacji mobilnej, i desktopowej (w TypeScript lub JavaScript), która dodaje panel UI w interfejsie. Meta udostępnia API do tworzenia niestandardowych wtyczek z obsługą WebSocket i wiadomości JSON.

Główne wtyczki dla Android

Debugowanie sieci przez Flipper

Network Plugin – jedna z najczęściej używanych wtyczek Flipper. Przechwytuje wszystkie żądania HTTP/HTTPS przechodzące przez OkHttp na Androidzie lub URLSession na iOS i wyświetla je w interfejsie desktopowym w czasie rzeczywistym. Dla każdego żądania dostępne są: URL, metoda, kod statusu, nagłówki żądania i odpowiedzi, treść żądania i odpowiedzi, czas wykonania i rozmiar.

Aby podłączyć Network Plugin na Androidzie, wystarczy dodać zależność flipper-network-plugin i przekazać OkHttpClient do konstruktora NetworkFlipperPlugin. Flipper automatycznie owija OkHttpClient w przechwytywacz. Na iOS wtyczka integracji z URLSession wymaga konfiguracji przez FlipperNetworkInterceptor.

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

Kluczową cechą Network Plugin jest obsługa wyszukiwania i filtrowania żądań. Programista może filtrować żądania według URL, metody, kodu statusu lub typu treści. Można wymusić ponowne wykonanie dowolnego żądania z interfejsu – jest to przydatne do testowania endpointów bez pisania osobnego zapytania curl. Według ankiety wśród programistów Meta (2024), Network Plugin jest używany w 78% projektów, w których zainstalowano Flipper.

Debugowanie bazy danych i SharedPreferences

Database Plugin otwiera dostęp do baz danych SQLite i Realm bezpośrednio z klienta desktopowego. Programista widzi wszystkie tabele, ich schemat i zawartość w postaci tabelarycznej. Można wykonywać dowolne zapytania SQL, dodawać, edytować i usuwać rekordy bez pisania kodu. Znacznie przyspiesza to debugowanie stanów aplikacji w porównaniu z użyciem adb shell.

SharedPreferences Plugin działa podobnie: wyświetla wszystkie klucze i wartości przechowywane w SharedPreferences na Androidzie. Edycja odbywa się natychmiast – zmiany są od razu widoczne w aplikacji. Istnieje jednak ważne ograniczenie: po ponownym uruchomieniu aplikacji Flipper łączy się ponownie, a wszystkie zmiany dokonane przez wtyczkę są zachowywane, ponieważ są stosowane bezpośrednio do pliku SharedPreferences.

Dla iOS odpowiednikiem jest NSUserDefaults Plugin. Działa z UserDefaults i pokazuje wszystkie zapisane pary klucz-wartość. Wtyczka obsługuje edycję ciągów znaków, liczb, dat i tablic. Zmiany są stosowane natychmiast, ponieważ Flipper uzyskuje dostęp do UserDefaults przez interfejs runtime.

Layout Inspector i logowanie

Layout Inspector od Flipper udostępnia wizualną reprezentację hierarchii View na Androidzie. Programista widzi drzewo komponentów, ich atrybuty (szerokość, wysokość, marginesy, tło, tekst) i może interaktywnie wybierać dowolny element na ekranie urządzenia. Jest to alternatywa dla wbudowanego Layout Inspector w Android Studio, ale z istotną różnicą – Flipper pokazuje hierarchię w czasie rzeczywistym bez zatrzymywania aplikacji.

Do logowania używany jest Logs Plugin. Wszystkie logi z Logcat trafiają do interfejsu desktopowego z filtrowaniem według poziomu (Debug, Info, Warn, Error) i tagu. W przeciwieństwie do Android Studio Logcat, interfejs Flipper nie przeciąża ekranu – logi są grupowane według tagu i podświetlane według poziomu. Obsługiwane jest wyszukiwanie i eksport logów do JSON.

Kolejną przydatną funkcją jest Console Plugin, który wyświetla console.log z kodu JavaScript w React Native lub komponentach WebView. Upraszcza to debugowanie aplikacji hybrydowych: programista widzi zarówno logi natywne, jak i JS w jednym interfejsie. Wtyczka obsługuje filtrowanie według źródła (Native lub JS) i poziomu logowania.

Konfiguracja wtyczek Flutter

Dla aplikacji Flutter Flipper podłącza się przez pakiet flipper z pub.dev. Wtyczka flutter_flipper udostępnia integrację z warstwą sieciową Dio, magazynem SharedPreferences i nawigacją Flutter. Instalacja wymaga dodania zależności w pubspec.yaml i inicjalizacji FlipperClient w funkcji main aplikacji. Wtyczki Flutter są obecnie mniej funkcjonalne niż natywne, ale pokrywają podstawowe scenariusze debugowania.

Wydajność podczas debugowania

Flipper zużywa zasoby urządzenia i desktopa proporcjonalnie do liczby aktywnych wtyczek. Przy podłączeniu wszystkich wtyczek jednocześnie na emulatorze Androida obserwuje się spadek wydajności o 5–10% według pomiarów Meta (2024). Zaleca się podłączanie tylko niezbędnych wtyczek i wyłączanie nieużywanych przez interfejs aplikacji desktopowej.