Flipper: nedir, özellikleri ve uygulaması

Flipper nedir?

Flipper, 2018 yılında Facebook (Meta) tarafından oluşturulmuş açık kaynaklı bir mobil uygulama hata ayıklama platformudur. Proje aslında Sonar olarak adlandırılıyordu ve şirket içi kullanım için tasarlanmıştı, ancak 2019'da Meta, MIT lisansı altında kaynak kodunu yayınladı. Platform iki bileşenden oluşur: Electron tabanlı bir masaüstü uygulaması ve Android ile iOS projelerine entegre olan bir SDK.

Flipper ile diğer hata ayıklama araçları arasındaki temel fark, modüler mimarisidir. Tek parça bir hata ayıklayıcı yerine, geliştirici projede gerçekten ihtiyaç duyulan eklentileri bağlar. Bu, uygulama üzerindeki yükü azaltır ve arayüzü basitleştirir: hata ayıklayıcı, geliştiricinin seçtiği şeyi tam olarak gösterir. Android Studio yerleşik profilleyiciler sunar, ancak bunlar yalnızca ADB üzerinden çalışır ve Flipper kadar özelleştirme sunmaz.

Meta'ya göre Flipper, şirket içinde 2000'den fazla projede kullanılmakta ve Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite ve diğer popüler kütüphanelerle entegrasyonu desteklemektedir. Platform, Android API 16+ ve iOS 11+ ile uyumludur.

Flipper Mimarisi: masaüstü-cihaz iletişimi nasıl çalışır

Flipper Mimarisi, istemci-sunucu modeli üzerine inşa edilmiştir. Masaüstü uygulaması sunucu, mobil cihazlar ise istemci görevi görür. Bağlantı USB veya TCP/IP üzerinden kurulur, ardından WebSocket tabanlı Flipper Protokolü kullanılarak iki yönlü mesaj alışverişi başlar.

Android tarafında, iletişim trafik tünellemesi için ADB kullanan android-client kütüphanesi tarafından sağlanır. iOS istemcisi, Xcode olmadan iOS cihazlarıyla etkileşim için Meta'nın kendi geliştirmesi olan idb (iOS Device Bridge) aracılığıyla bağlanır. Uygulama içinde, her eklenti FlipperClient'a kaydolur ve masaüstü karşılığıyla kendi iletişim kanalını alır.

Veri aktarım süreci şu şekilde çalışır: cihazdaki eklenti FlipperClient aracılığıyla bir olay gönderir, istemci bunu JSON'a serileştirir ve WebSocket üzerinden masaüstüne iletir. Masaüstü uygulaması mesajı deserileştirir ve arayüzdeki ilgili eklentiye gönderir. Meta'nın teknik bloguna (2024) göre, USB bağlantısında mesaj iletim gecikmesi 15 milisaniyeden azdır.

Flipper nasıl kurulur ve yapılandırılır

Flipper kurulumu üç adımdan oluşur: masaüstü uygulamasını kurma, projeye SDK ekleme ve hata ayıklayıcıyı başlatma. Masaüstü uygulaması resmi web sitesi fbflipper.com'dan indirilir — Windows, macOS ve Linux için dmg, exe ve AppImage formatlarında yapılar mevcuttur. Kurulumdan sonra uygulama, ADB aracılığıyla bağlı cihazları otomatik olarak algılar.

Bir Android projesi için Flipper, build.gradle'daki bağımlılıklar aracılığıyla bağlanır. Masaüstü istemci sürümüyle eşleşen Flipper sürümünü belirtmeniz ve kullanılan kütüphaneler için eklentiler eklemeniz gerekir. Aşağıda bir Kotlin projesi için yapılandırma örneği verilmiştir:

// build.gradle (uygulama)
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"
    )
}

Gradle senkronizasyonundan sonra, Application sınıfında FlipperClient'ı başlatmanız gerekir. Başlatma, hata ayıklama yapısında yapılır — kütüphane, kullanıcılara hata ayıklama bilgilerini ifşa etmemek için sürüm sürümünde bağlanmamalıdır.

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

iOS için Flipper, CocoaPods aracılığıyla eklenir. Podfile'da Flipper ve FlipperKit çerçeveleri ile iletişim kanalını düzenlemek için Flipper-Folly ve Flipper-PeerTalk belirtilir. pod install ve uygulamanın bir simülatör veya cihazda çalıştırılmasından sonra, masaüstü istemcisi otomatik olarak yeni bir oturum algılayacaktır.

Bağlantı Kontrolü

Uygulamayı başlattıktan sonra masaüstü Flipper'ı açın — sol panelde bağlı cihazların bir listesi görünecektir. Cihaz görüntülenmiyorsa, ADB'nin kurulu olup olmadığını, Android'de USB hata ayıklamanın etkin olup olmadığını veya iOS için idb köprüsünün çalışıp çalışmadığını kontrol edin. Her cihaz, model adı ve işletim sistemi sürümüyle birlikte görüntülenir.

Android ve iOS için Flipper Eklentileri

Flipper Eklentileri, belirli görevler için masaüstü arayüzüne paneller ekleyen modüler uzantılardır. Meta, en popüler kütüphaneler için resmi eklentileri sürdürür: OkHttp ve URLSession için Network Plugin, SQLite ve Realm için Database Plugin, View hiyerarşisi için Layout Inspector, SharedPreferences Plugin ve Crash Reporter.

Resmi olanların yanı sıra, topluluk tarafından geliştirilen üçüncü taraf eklentileri ekosistemi de vardır. Örneğin, Tencent MMKV depolamasını hata ayıklamak için MMKV Plugin, React Native için Redux Debugger, bellek sızıntılarını tespit etmek için LeakCanary Plugin. Eklentiler Maven Central ve CocoaPods aracılığıyla dağıtılır ve normal bağımlılıklar olarak bağlanır.

Flipper'ın önemli bir avantajı, özel eklentiler yazabilme yeteneğidir. Bir eklenti iki bölümden oluşur: mobil uygulamaya kaydolan istemci tarafı bölümü (Kotlin veya Swift) ve arayüze UI paneli ekleyen masaüstü tarafı bölümü (TypeScript veya JavaScript). Meta, WebSocket ve JSON mesajları desteğiyle özel eklentiler oluşturmak için API sağlar.

Android için Ana Eklentiler

Flipper ile Ağ Hata Ayıklama

Network Plugin, en popüler Flipper eklentilerinden biridir. Android'de OkHttp veya iOS'ta URLSession üzerinden geçen tüm HTTP/HTTPS isteklerini yakalar ve bunları masaüstü arayüzünde gerçek zamanlı olarak görüntüler. Her istek için şunlar mevcuttur: URL, yöntem, durum kodu, istek ve yanıt başlıkları, istek ve yanıt gövdesi, yürütme süresi ve boyut.

Android'de Network Plugin'i bağlamak için flipper-network-plugin bağımlılığını ekleyin ve OkHttpClient'ı NetworkFlipperPlugin yapıcısına iletin. Flipper, OkHttpClient'ı otomatik olarak bir yakalayıcıya sarar. iOS'ta, URLSession entegrasyon eklentisi FlipperNetworkInterceptor aracılığıyla yapılandırma gerektirir.

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

Network Plugin'in önemli bir özelliği, istek arama ve filtreleme desteğidir. Geliştirici, istekleri URL, yöntem, durum kodu veya içerik türüne göre filtreleyebilir. Herhangi bir istek, arayüzden zorla yeniden denenebilir — bu, ayrı bir curl isteği yazmadan uç noktaları test etmek için kullanışlıdır. Bir Meta geliştirici anketine (2024) göre Network Plugin, Flipper'ın kurulu olduğu projelerin %78'inde kullanılmaktadır.

Veritabanı ve SharedPreferences Hata Ayıklama

Database Plugin, masaüstü istemcisinden doğrudan SQLite ve Realm veritabanlarına erişim sağlar. Geliştirici tüm tabloları, şemalarını ve içeriklerini tablo görünümünde görür. Kod yazmadan rastgele SQL sorguları yürütülebilir ve kayıtlar eklenebilir, düzenlenebilir ve silinebilir. Bu, adb shell kullanımına kıyasla uygulama durumlarının hata ayıklamasını önemli ölçüde hızlandırır.

SharedPreferences Plugin benzer şekilde çalışır: Android'de SharedPreferences'te depolanan tüm anahtarları ve değerleri görüntüler. Düzenleme anında gerçekleşir — değişiklikler uygulamada hemen görünür. Ancak önemli bir sınırlama vardır: uygulamayı yeniden başlattıktan sonra Flipper yeniden bağlanır ve eklenti aracılığıyla yapılan tüm değişiklikler korunur çünkü bunlar doğrudan SharedPreferences dosyasına uygulanır.

iOS için eşdeğeri NSUserDefaults Plugin'dir. UserDefaults ile çalışır ve kaydedilmiş tüm anahtar-değer çiftlerini gösterir. Eklenti, dizeleri, sayıları, tarihleri ve dizileri düzenlemeyi destekler. Flipper, UserDefaults'a çalışma zamanı arayüzü aracılığıyla eriştiği için değişiklikler anında uygulanır.

Layout Inspector ve Günlükleme

Flipper Layout Inspector, Android'de View hiyerarşisinin görsel bir temsilini sağlar. Geliştirici bileşen ağacını, özniteliklerini (genişlik, yükseklik, dolgu, arka plan, metin) görür ve cihaz ekranındaki herhangi bir öğeyi etkileşimli olarak seçebilir. Bu, Android Studio'da yerleşik Layout Inspector'a bir alternatiftir, ancak önemli bir farkla — Flipper, uygulamayı durdurmadan gerçek zamanlı olarak hiyerarşiyi gösterir.

Günlükleme için Logs Plugin kullanılır. Logcat'teki tüm günlükler, düzeye (Debug, Info, Warn, Error) ve etikete göre filtreleme ile masaüstü arayüzünde görünür. Android Studio Logcat'in aksine, Flipper arayüzü ekranı karmaşıklaştırmaz — günlükler etikete göre gruplandırılır ve düzeye göre vurgulanır. JSON'da günlük arama ve dışa aktarma desteklenir.

Başka bir kullanışlı özellik, React Native veya WebView bileşenlerinde JavaScript kodundan console.log'u görüntüleyen Console Plugin'dir. Bu, hibrit uygulamaların hata ayıklamasını basitleştirir: geliştirici, tek bir arayüzde hem yerel günlükleri hem de JS günlüklerini görür. Eklenti, kaynağa (Native veya JS) ve günlükleme düzeyine göre filtrelemeyi destekler.

Flutter Eklentilerini Yapılandırma

Flutter uygulamaları için Flipper, pub.dev'deki flipper paketi aracılığıyla bağlanır. flutter_flipper eklentisi, Dio ağ katmanı, SharedPreferences depolama ve Flutter navigasyonu ile entegrasyon sağlar. Kurulum, pubspec.yaml'a bağımlılık eklemeyi ve uygulamanın ana işlevinde FlipperClient'ı başlatmayı gerektirir. Flutter eklentileri işlevsellik açısından yerel eklentilerden hala daha düşüktür, ancak ana hata ayıklama senaryolarını kapsar.

Hata Ayıklama Sırasında Performans

Flipper, etkin eklenti sayısıyla orantılı olarak cihaz ve masaüstü kaynaklarını tüketir. Tüm eklentiler aynı anda bir Android öykünücüsüne bağlandığında, Meta'nın ölçümlerine (2024) göre %5–10 oranında bir performans düşüşü gözlemlenir. Yalnızca gerekli eklentilerin bağlanması ve kullanılmayanların masaüstü uygulama arayüzü aracılığıyla devre dışı bırakılması önerilir.