Flipper – ano ito, mga kakayahan at aplikasyon

Ano ang Flipper?

Flipper ay isang bukas na platform para sa pag-debug ng mga mobile application, na nilikha ng Facebook (Meta) noong 2018. Noong una, ang proyekto ay tinawag na Sonar at nilayon para sa mga panloob na pangangailangan ng kumpanya, ngunit noong 2019 inilathala ng Meta ang source code sa ilalim ng lisensyang MIT. Ang platform ay binubuo ng dalawang bahagi: isang desktop application sa Electron at isang SDK na isinasama sa mga proyektong Android at iOS.

Ang pangunahing pagkakaiba ng Flipper mula sa iba pang mga debugging tool ay ang modular na arkitektura. Sa halip na isang monolithic debugger, ikinokonekta lamang ng developer ang mga plugin na talagang kailangan sa proyekto. Binabawasan nito ang load sa application at pinapasimple ang interface: ang debugger ay nagpapakita nang eksakto kung ano ang pinili ng developer. Ang Android Studio ay nagbibigay ng mga built-in na profiler, ngunit gumagana lamang ang mga ito sa pamamagitan ng ADB at hindi nagbibigay ng antas ng pagpapasadya tulad ng Flipper.

Ayon sa Meta, ang Flipper ay ginagamit sa higit sa 2000 proyekto sa loob ng kumpanya at sumusuporta sa pagsasama sa Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite at iba pang sikat na library. Ang platform ay katugma sa Android API 16+ at iOS 11+.

Arkitektura ng Flipper: paano gumagana ang koneksyon ng desktop – device

Arkitektura ng Flipper ay binuo sa modelo ng client-server. Ang desktop application ay gumaganap bilang server, at ang mga mobile device ay bilang mga client. Ang koneksyon ay itinatag sa pamamagitan ng USB o TCP/IP, pagkatapos ay magsisimula ang dalawang-daanang pagpapalitan ng mga mensahe sa pamamagitan ng Flipper Protocol na batay sa WebSocket.

Sa bahagi ng Android, ang komunikasyon ay ibinigay ng android-client library na gumagamit ng ADB para sa tunneling ng trapiko. Ang iOS client ay kumokonekta sa pamamagitan ng idb (iOS Device Bridge) – sariling pag-unlad ng Meta para sa pakikipag-ugnayan sa mga iOS device nang walang Xcode. Sa loob ng application, bawat plugin ay nagrerehistro sa FlipperClient at tumatanggap ng sarili nitong channel ng komunikasyon sa desktop counterpart.

Ang proseso ng paghahatid ng data ay ganito: ang plugin sa device ay nagpapadala ng event sa pamamagitan ng FlipperClient, isinasailalim ito ng client sa serialization sa JSON at ipinapadala sa pamamagitan ng WebSocket sa desktop. Ang desktop application ay nagde-deserialize ng mensahe at ipinapadala ito sa kaukulang plugin sa interface. Ayon sa teknikal na blog ng Meta (2024), ang latency ng paghahatid ng mensahe ay mas mababa sa 15 millisegundo sa USB connection.

Paano i-install at i-configure ang Flipper

Ang pag-install ng Flipper ay binubuo ng tatlong hakbang: pag-install ng desktop application, pagdaragdag ng SDK sa proyekto, at pagpapatakbo ng debugger. Ang desktop application ay dina-download mula sa opisyal na website na fbflipper.com – available ang mga bersyon para sa Windows, macOS at Linux sa mga format na dmg, exe at AppImage. Pagkatapos ng pag-install, awtomatikong nakikita ng application ang mga nakakonektang device sa pamamagitan ng ADB.

Para sa proyektong Android, ang Flipper ay ikinokonekta sa pamamagitan ng mga dependency sa build.gradle. Kailangang tukuyin ang bersyon ng Flipper na tumutugma sa bersyon ng desktop client at magdagdag ng mga plugin para sa mga ginamit na library. Nasa ibaba ang isang halimbawang configuration para sa isang proyekto sa 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"
    )
}

Pagkatapos ng synchronize ng Gradle, kailangang i-initialize ang FlipperClient sa Application class. Ang initialization ay ginagawa sa debug build – sa release version, hindi dapat ikonekta ang library upang hindi ilantad ang debugging information sa mga user.

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

Para sa iOS, ang Flipper ay idinaragdag sa pamamagitan ng CocoaPods. Sa Podfile, tinutukoy ang mga framework na Flipper at FlipperKit, pati na rin ang Flipper-Folly at Flipper-PeerTalk para sa pag-aayos ng channel ng komunikasyon. Pagkatapos ng pod install at pagpapatakbo ng application sa simulator o device, awtomatikong makikita ng desktop client ang isang bagong session.

Pagsusuri ng koneksyon

Pagkatapos patakbuhin ang application, buksan ang desktop Flipper – sa kaliwang panel ay lilitaw ang listahan ng mga nakakonektang device. Kung hindi lumalabas ang device, suriin: naka-install ba ang ADB, naka-enable ba ang USB debugging sa Android, nasimula na ba ang idb bridge para sa iOS. Ang bawat device ay ipinapakita na may pangalan ng modelo at bersyon ng operating system.

Mga Plugin ng Flipper para sa Android at iOS

Mga Plugin ng Flipper ay mga modular extension na nagdaragdag ng mga panel sa desktop interface para sa mga tiyak na gawain. Sinusuportahan ng Meta ang mga opisyal na plugin para sa mga pinakasikat na library: Network Plugin para sa OkHttp at URLSession, Database Plugin para sa SQLite at Realm, Layout Inspector para sa hierarchy ng View, SharedPreferences Plugin at Crash Reporter.

Bukod sa mga opisyal na plugin, mayroong ecosystem ng third-party na plugin na binuo ng komunidad. Halimbawa, MMKV Plugin para sa pag-debug ng Tencent MMKV storage, Redux Debugger para sa React Native, LeakCanary Plugin para sa pag-detect ng memory leaks. Ang mga plugin ay ipinamamahagi sa pamamagitan ng Maven Central at CocoaPods at ikinokonekta bilang mga ordinaryong dependency.

Isang mahalagang bentahe ng Flipper ay ang kakayahang magsulat ng sariling mga plugin. Ang isang plugin ay binubuo ng dalawang bahagi: ang client na bahagi (sa Kotlin o Swift) na nagrerehistro sa mobile application, at ang desktop na bahagi (sa TypeScript o JavaScript) na nagdaragdag ng UI panel sa interface. Nagbibigay ang Meta ng API para sa paglikha ng mga custom na plugin na may suporta para sa WebSocket at mga mensaheng JSON.

Mga pangunahing plugin para sa Android

Pag-debug ng network sa pamamagitan ng Flipper

Network Plugin – isa sa mga pinaka-hinihinging plugin ng Flipper. Ito ay humaharang sa lahat ng HTTP/HTTPS request na dumadaan sa OkHttp sa Android o URLSession sa iOS at ipinapakita ang mga ito sa desktop interface sa real-time. Para sa bawat request ay available: URL, method, status code, headers ng request at response, body ng request at response, oras ng execution at laki.

Para ikonekta ang Network Plugin sa Android, sapat na idagdag ang dependency na flipper-network-plugin at ipasa ang OkHttpClient sa constructor ng NetworkFlipperPlugin. Awtomatikong bumabalot ang Flipper ng OkHttpClient sa isang interceptor. Sa iOS, ang plugin para sa integrasyon sa URLSession ay nangangailangan ng configuration sa pamamagitan ng FlipperNetworkInterceptor.

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

Ang pangunahing tampok ng Network Plugin ay suporta para sa paghahanap at pag-filter ng mga request. Maaaring i-filter ng developer ang mga request ayon sa URL, method, status code o uri ng content. Maaaring pilit na ulitin ang anumang request mula sa interface – ito ay kapaki-pakinabang para sa pagsubok ng mga endpoint nang hindi nagsusulat ng hiwalay na curl request. Ayon sa survey ng mga developer ng Meta (2024), ang Network Plugin ay ginagamit sa 78% ng mga proyekto kung saan naka-install ang Flipper.

Pag-debug ng database at SharedPreferences

Database Plugin ay nagbubukas ng access sa mga SQLite at Realm database nang direkta mula sa desktop client. Nakikita ng developer ang lahat ng table, ang kanilang schema at nilalaman sa anyong tabular. Maaaring magsagawa ng mga arbitraryong SQL query, magdagdag, mag-edit at magtanggal ng mga record nang hindi nagsusulat ng code. Ito ay makabuluhang nagpapabilis ng pag-debug ng mga estado ng application kumpara sa paggamit ng adb shell.

SharedPreferences Plugin ay gumagana nang katulad: ipinapakita nito ang lahat ng key at value na nakaimbak sa SharedPreferences sa Android. Ang pag-edit ay nangyayari kaagad – ang mga pagbabago ay agad na nakikita sa application. Gayunpaman, mayroong mahalagang limitasyon: pagkatapos ng pag-restart ng application, muling kumokonekta ang Flipper at lahat ng pagbabagong ginawa sa pamamagitan ng plugin ay nananatiling naka-save, dahil ang mga ito ay direktang inilalapat sa file ng SharedPreferences.

Para sa iOS, ang katumbas ay NSUserDefaults Plugin. Gumagana ito sa UserDefaults at ipinapakita ang lahat ng naka-save na pares ng key-value. Sinusuportahan ng plugin ang pag-edit ng mga string, numero, petsa at array. Ang mga pagbabago ay inilalapat kaagad, dahil ang Flipper ay uma-access sa UserDefaults sa pamamagitan ng runtime interface.

Layout Inspector at pag-log

Layout Inspector mula sa Flipper ay nagbibigay ng visual na representasyon ng hierarchy ng View sa Android. Nakikita ng developer ang puno ng mga komponent, ang kanilang mga attribute (lapad, taas, margin, background, teksto) at maaaring pumili nang interaktibo ng anumang elemento sa screen ng device. Ito ay isang alternatibo sa built-in na Layout Inspector sa Android Studio, ngunit may mahalagang pagkakaiba – ipinapakita ng Flipper ang hierarchy sa real-time nang hindi humihinto sa application.

Para sa pag-log, ginagamit ang Logs Plugin. Lahat ng log mula sa Logcat ay pumapasok sa desktop interface na may pag-filter ayon sa level (Debug, Info, Warn, Error) at tag. Hindi tulad ng Android Studio Logcat, ang interface ng Flipper ay hindi nagpapabigat sa screen – ang mga log ay pinapangkat ayon sa tag at naka-highlight ayon sa level. Ang paghahanap at pag-export ng mga log sa JSON ay suportado.

Isa pang kapaki-pakinabang na tampok ay ang Console Plugin, na nagpapakita ng console.log mula sa JavaScript code sa React Native o mga komponent ng WebView. Pinapasimple nito ang pag-debug ng mga hybrid application: nakikita ng developer ang parehong native log at JS log sa isang interface. Sinusuportahan ng plugin ang pag-filter ayon sa source (Native o JS) at level ng pag-log.

Pag-configure ng mga Flutter plugin

Para sa mga Flutter application, ang Flipper ay ikinokonekta sa pamamagitan ng flipper package mula sa pub.dev. Ang flutter_flipper plugin ay nagbibigay ng integrasyon sa network layer na Dio, storage na SharedPreferences at Flutter navigation. Ang pag-install ay nangangailangan ng pagdaragdag ng dependency sa pubspec.yaml at initialization ng FlipperClient sa main function ng application. Ang mga Flutter plugin ay kasalukuyang mas mababa sa functionality kumpara sa mga native plugin, ngunit sumasaklaw sa mga pangunahing debugging scenario.

Performance habang nagde-debug

Ang Flipper ay kumokonsumo ng mga resources ng device at desktop nang proporsyonal sa bilang ng mga aktibong plugin. Kapag sabay na ikinonekta ang lahat ng plugin sa Android emulator, napapansin ang pagbaba ng performance na 5–10% ayon sa mga pagsukat ng Meta (2024). Inirerekomenda na ikonekta lamang ang mga kinakailangang plugin at i-disable ang mga hindi ginagamit sa pamamagitan ng interface ng desktop application.