Flipper – τι είναι, δυνατότητες και εφαρμογή

Τι είναι το Flipper;

Flipper είναι μια ανοιχτή πλατφόρμα για τον εντοπισμό σφαλμάτων σε εφαρμογές κινητών, που δημιουργήθηκε από την Facebook (Meta) το 2018. Αρχικά το έργο ονομαζόταν Sonar και προοριζόταν για εσωτερικές ανάγκες της εταιρείας, αλλά το 2019 η Meta δημοσίευσε τον πηγαίο κώδικα υπό την άδεια MIT. Η πλατφόρμα αποτελείται από δύο στοιχεία: μια εφαρμογή επιτραπέζιου υπολογιστή σε Electron και ένα SDK που ενσωματώνεται σε έργα Android και iOS.

Η κύρια διαφορά του Flipper από άλλα εργαλεία εντοπισμού σφαλμάτων είναι η αρθρωτή αρχιτεκτονική. Αντί για έναν μονολιθικό εντοπιστή σφαλμάτων, ο προγραμματιστής συνδέει μόνο εκείνα τα πρόσθετα που χρειάζονται πραγματικά στο έργο. Αυτό μειώνει το φορτίο στην εφαρμογή και απλοποιεί τη διεπαφή: ο εντοπιστής σφαλμάτων δείχνει ακριβώς αυτό που επέλεξε ο προγραμματιστής. Το Android Studio παρέχει ενσωματωμένους προφίλερ, αλλά λειτουργούν μόνο μέσω ADB και δεν προσφέρουν το επίπεδο προσαρμογής όπως το Flipper.

Σύμφωνα με τη Meta, το Flipper χρησιμοποιείται σε περισσότερα από 2000 έργα εντός της εταιρείας και υποστηρίζει ενσωμάτωση με Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite και άλλες δημοφιλείς βιβλιοθήκες. Η πλατφόρμα είναι συμβατή με Android API 16+ και iOS 11+.

Αρχιτεκτονική Flipper: πώς λειτουργεί η σύνδεση επιτραπέζιου – συσκευής

Η αρχιτεκτονική του Flipper είναι χτισμένη στο μοντέλο πελάτη-εξυπηρετητή. Η εφαρμογή επιτραπέζιου λειτουργεί ως εξυπηρετητής και οι κινητές συσκευές ως πελάτες. Η σύνδεση γίνεται μέσω USB ή TCP/IP, μετά την οποία ξεκινά η αμφίδρομη ανταλλαγή μηνυμάτων μέσω του Πρωτοκόλλου Flipper που βασίζεται σε WebSocket.

Στην πλευρά του Android, η επικοινωνία παρέχεται από τη βιβλιοθήκη android-client, η οποία χρησιμοποιεί ADB για τη διοχέτευση κίνησης. Ο πελάτης iOS συνδέεται μέσω idb (iOS Device Bridge) – μιας ιδιόκτητης ανάπτυξης της Meta για αλληλεπίδραση με συσκευές iOS χωρίς Xcode. Μέσα στην εφαρμογή, κάθε πρόσθετο εγγράφεται στο FlipperClient και λαμβάνει το δικό του κανάλι επικοινωνίας με το αντίστοιχο επιτραπέζιο.

Η διαδικασία μετάδοσης δεδομένων έχει ως εξής: το πρόσθετο στη συσκευή στέλνει ένα συμβάν μέσω του FlipperClient, ο πελάτης το σειριοποιεί σε JSON και το μεταδίδει μέσω WebSocket στον επιτραπέζιο. Η εφαρμογή επιτραπέζιου αποσειριοποιεί το μήνυμα και το στέλνει στο αντίστοιχο πρόσθετο στη διεπαφή. Σύμφωνα με το τεχνικό ιστολόγιο της Meta (2024), η καθυστέρηση μετάδοσης μηνύματος είναι μικρότερη από 15 χιλιοστά του δευτερολέπτου κατά τη σύνδεση USB.

Πώς να εγκαταστήσετε και να ρυθμίσετε το Flipper

Η εγκατάσταση του Flipper αποτελείται από τρία βήματα: εγκατάσταση της εφαρμογής επιτραπέζιου, προσθήκη του SDK στο έργο και εκκίνηση του εντοπιστή σφαλμάτων. Η εφαρμογή επιτραπέζιου μεταφορτώνεται από την επίσημη ιστοσελίδα fbflipper.com – διαθέσιμες είναι εκδόσεις για Windows, macOS και Linux σε μορφές dmg, exe και AppImage. Μετά την εγκατάσταση, η εφαρμογή εντοπίζει αυτόματα τις συνδεδεμένες συσκευές μέσω ADB.

Για έργο Android, το Flipper συνδέεται μέσω εξαρτήσεων στο build.gradle. Πρέπει να καθοριστεί η έκδοση του Flipper που ταιριάζει με την έκδοση του επιτραπέζιου πελάτη και να προστεθούν πρόσθετα για τις χρησιμοποιούμενες βιβλιοθήκες. Παρακάτω δίνεται ένα παράδειγμα ρύθμισης για ένα έργο σε Kotlin:

// build.gradle (εφαρμογή)
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, πρέπει να αρχικοποιηθεί το FlipperClient στην κλάση Application. Η αρχικοποίηση γίνεται στην έκδοση debug – στην έκδοση release η βιβλιοθήκη δεν πρέπει να συνδέεται για να μην αποκαλύπτονται πληροφορίες εντοπισμού σφαλμάτων στους χρήστες.

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

Για iOS, το Flipper προστίθεται μέσω CocoaPods. Στο Podfile καθορίζονται τα πλαίσια Flipper και FlipperKit, καθώς και τα Flipper-Folly και Flipper-PeerTalk για την οργάνωση του καναλιού επικοινωνίας. Μετά το pod install και την εκκίνηση της εφαρμογής στον προσομοιωτή ή τη συσκευή, ο επιτραπέζιος πελάτης θα εντοπίσει αυτόματα μια νέα συνεδρία.

Έλεγχος σύνδεσης

Μετά την εκκίνηση της εφαρμογής, ανοίξτε το επιτραπέζιο Flipper – στο αριστερό παράθυρο θα εμφανιστεί η λίστα των συνδεδεμένων συσκευών. Εάν η συσκευή δεν εμφανίζεται, ελέγξτε: είναι εγκατεστημένο το ADB, είναι ενεργοποιημένος ο εντοπισμός σφαλμάτων μέσω USB στο Android, έχει εκκινηθεί η γέφυρα idb για iOS. Κάθε συσκευή εμφανίζεται με το όνομα μοντέλου και την έκδοση του λειτουργικού συστήματος.

Πρόσθετα Flipper για Android και iOS

Τα πρόσθετα Flipper είναι αρθρωτές επεκτάσεις που προσθέτουν πάνελ στη διεπαφή επιτραπέζιου για συγκεκριμένες εργασίες. Η Meta υποστηρίζει επίσημα πρόσθετα για τις πιο δημοφιλείς βιβλιοθήκες: Network Plugin για OkHttp και URLSession, Database Plugin για SQLite και Realm, Layout Inspector για την ιεραρχία View, SharedPreferences Plugin και Crash Reporter.

Εκτός από τα επίσημα πρόσθετα, υπάρχει ένα οικοσύστημα πρόσθετων τρίτων που αναπτύχθηκαν από την κοινότητα. Για παράδειγμα, MMKV Plugin για τον εντοπισμό σφαλμάτων αποθήκευσης Tencent MMKV, Redux Debugger για React Native, LeakCanary Plugin για την ανίχνευση διαρροών μνήμης. Τα πρόσθετα διανέμονται μέσω Maven Central και CocoaPods και συνδέονται ως συνήθεις εξαρτήσεις.

Ένα σημαντικό πλεονέκτημα του Flipper είναι η δυνατότητα σύνταξης δικών σας πρόσθετων. Ένα πρόσθετο αποτελείται από δύο μέρη: το τμήμα πελάτη (σε Kotlin ή Swift), το οποίο εγγράφεται στην εφαρμογή κινητού, και το τμήμα επιτραπέζιου (σε TypeScript ή JavaScript), το οποίο προσθέτει ένα πάνελ UI στη διεπαφή. Η Meta παρέχει API για τη δημιουργία προσαρμοσμένων πρόσθετων με υποστήριξη WebSocket και μηνυμάτων JSON.

Κύρια πρόσθετα για Android

Εντοπισμός σφαλμάτων δικτύου μέσω Flipper

Network Plugin – ένα από τα πιο δημοφιλή πρόσθετα Flipper. Παρεμβάλλεται σε όλα τα αιτήματα HTTP/HTTPS που περνούν μέσω OkHttp σε Android ή URLSession σε iOS και τα εμφανίζει στη διεπαφή επιτραπέζιου σε πραγματικό χρόνο. Για κάθε αίτημα είναι διαθέσιμα: URL, μέθοδος, κωδικός κατάστασης, κεφαλίδες αιτήματος και απόκρισης, σώμα αιτήματος και απόκρισης, χρόνος εκτέλεσης και μέγεθος.

Για να συνδέσετε το Network Plugin σε Android, αρκεί να προσθέσετε την εξάρτηση flipper-network-plugin και να μεταβιβάσετε το OkHttpClient στον κατασκευαστή του NetworkFlipperPlugin. Το Flipper τυλίγει αυτόματα το OkHttpClient σε έναν παρεμβολέα. Σε iOS, το πρόσθετο ενσωμάτωσης με URLSession απαιτεί ρύθμιση μέσω FlipperNetworkInterceptor.

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

Το βασικό χαρακτηριστικό του Network Plugin είναι η υποστήριξη για αναζήτηση και φιλτράρισμα αιτημάτων. Ο προγραμματιστής μπορεί να φιλτράρει αιτήματα κατά URL, μέθοδο, κωδικό κατάστασης ή τύπο περιεχομένου. Κάθε αίτημα μπορεί να σταλεί ξανά αναγκαστικά από τη διεπαφή – αυτό είναι χρήσιμο για τη δοκιμή τελικών σημείων χωρίς τη σύνταξη ξεχωριστού αιτήματος curl. Σύμφωνα με έρευνα προγραμματιστών της Meta (2024), το Network Plugin χρησιμοποιείται στο 78% των έργων όπου είναι εγκατεστημένο το Flipper.

Εντοπισμός σφαλμάτων βάσης δεδομένων και SharedPreferences

Database Plugin ανοίγει πρόσβαση σε βάσεις δεδομένων SQLite και Realm απευθείας από τον επιτραπέζιο πελάτη. Ο προγραμματιστής βλέπει όλους τους πίνακες, το σχήμα και το περιεχόμενό τους σε μορφή πίνακα. Μπορούν να εκτελεστούν αυθαίρετα ερωτήματα SQL, να προστεθούν, να επεξεργαστούν και να διαγραφούν εγγραφές χωρίς σύνταξη κώδικα. Αυτό επιταχύνει σημαντικά τον εντοπισμό σφαλμάτων καταστάσεων εφαρμογής σε σύγκριση με τη χρήση του adb shell.

SharedPreferences Plugin λειτουργεί παρόμοια: εμφανίζει όλα τα κλειδιά και τις τιμές που αποθηκεύονται στο SharedPreferences σε Android. Η επεξεργασία γίνεται άμεσα – οι αλλαγές είναι αμέσως ορατές στην εφαρμογή. Ωστόσο, υπάρχει ένα σημαντικό περιορισμό: μετά από επανεκκίνηση της εφαρμογής, το Flipper επανασυνδέεται και όλες οι αλλαγές που έγιναν μέσω του πρόσθετου διατηρούνται, επειδή εφαρμόζονται απευθείας στο αρχείο SharedPreferences.

Για iOS, το αντίστοιχο είναι το NSUserDefaults Plugin. Λειτουργεί με το UserDefaults και εμφανίζει όλα τα αποθηκευμένα ζεύγη κλειδιού-τιμής. Το πρόσθετο υποστηρίζει επεξεργασία συμβολοσειρών, αριθμών, ημερομηνιών και πινάκων. Οι αλλαγές εφαρμόζονται άμεσα, επειδή το Flipper αποκτά πρόσβαση στο UserDefaults μέσω της διεπαφής χρόνου εκτέλεσης.

Layout Inspector και καταγραφή

Layout Inspector από το Flipper παρέχει οπτική αναπαράσταση της ιεραρχίας View σε Android. Ο προγραμματιστής βλέπει το δέντρο των στοιχείων, τα χαρακτηριστικά τους (πλάτος, ύψος, περιθώρια, φόντο, κείμενο) και μπορεί διαδραστικά να επιλέξει οποιοδήποτε στοιχείο στην οθόνη της συσκευής. Αποτελεί εναλλακτική λύση για το ενσωματωμένο Layout Inspector στο Android Studio, αλλά με μια σημαντική διαφορά – το Flipper εμφανίζει την ιεραρχία σε πραγματικό χρόνο χωρίς να σταματά την εφαρμογή.

Για καταγραφή χρησιμοποιείται το Logs Plugin. Όλα τα αρχεία καταγραφής από το Logcat εισέρχονται στη διεπαφή επιτραπέζιου με φιλτράρισμα ανά επίπεδο (Debug, Info, Warn, Error) και ετικέτα. Σε αντίθεση με το Android Studio Logcat, η διεπαφή του Flipper δεν υπερφορτώνει την οθόνη – τα αρχεία καταγραφής ομαδοποιούνται ανά ετικέτα και επισημαίνονται ανά επίπεδο. Υποστηρίζεται η αναζήτηση και η εξαγωγή αρχείων καταγραφής σε JSON.

Μια ακόμη χρήσιμη λειτουργία είναι το Console Plugin, το οποίο εμφανίζει το console.log από κώδικα JavaScript σε React Native ή στοιχεία WebView. Αυτό απλοποιεί τον εντοπισμό σφαλμάτων σε υβριδικές εφαρμογές: ο προγραμματιστής βλέπει τόσο τα εγγενή αρχεία καταγραφής όσο και τα JS σε μία διεπαφή. Το πρόσθετο υποστηρίζει φιλτράρισμα ανά πηγή (Native ή JS) και επίπεδο καταγραφής.

Ρύθμιση πρόσθετων Flutter

Για εφαρμογές Flutter, το Flipper συνδέεται μέσω του πακέτου flipper από το pub.dev. Το πρόσθετο flutter_flipper παρέχει ενσωμάτωση με το επίπεδο δικτύου Dio, την αποθήκευση SharedPreferences και την πλοήγηση Flutter. Η εγκατάσταση απαιτεί την προσθήκη εξάρτησης στο pubspec.yaml και την αρχικοποίηση του FlipperClient στη συνάρτηση main της εφαρμογής. Τα πρόσθετα Flutter υστερούν επί του παρόντος σε λειτουργικότητα σε σχέση με τα εγγενή πρόσθετα, αλλά καλύπτουν τα κύρια σενάρια εντοπισμού σφαλμάτων.

Απόδοση κατά τον εντοπισμό σφαλμάτων

Το Flipper καταναλώνει πόρους της συσκευής και του επιτραπέζιου ανάλογα με τον αριθμό των ενεργών πρόσθετων. Κατά τη σύνδεση όλων των πρόσθετων ταυτόχρονα στον προσομοιωτή Android, παρατηρείται πτώση απόδοσης 5–10% σύμφωνα με μετρήσεις της Meta (2024). Συνιστάται η σύνδεση μόνο των απαραίτητων πρόσθετων και η απενεργοποίηση των μη χρησιμοποιούμενων μέσω της διεπαφής της εφαρμογής επιτραπέζιου.