Flipper: nó là gì, tính năng và ứng dụng

Flipper là gì?

Flipper là nền tảng gỡ lỗi ứng dụng di động mã nguồn mở được tạo bởi Facebook (Meta) vào năm 2018. Dự án ban đầu có tên là Sonar và được dùng cho nội bộ công ty, nhưng vào năm 2019, Meta đã phát hành mã nguồn theo giấy phép MIT. Nền tảng này bao gồm hai thành phần: ứng dụng desktop dựa trên Electron và SDK tích hợp vào các dự án Android và iOS.

Sự khác biệt chính giữa Flipper và các công cụ gỡ lỗi khác là kiến trúc mô-đun của nó. Thay vì một trình gỡ lỗi nguyên khối, nhà phát triển chỉ kết nối các plugin thực sự cần thiết trong dự án. Điều này giảm tải cho ứng dụng và đơn giản hóa giao diện: trình gỡ lỗi hiển thị chính xác những gì nhà phát triển đã chọn. Android Studio cung cấp các trình phân tích tích hợp sẵn, nhưng chúng chỉ hoạt động qua ADB và không cung cấp mức độ tùy chỉnh như Flipper.

Theo Meta, Flipper được sử dụng trong hơn 2000 dự án trong công ty và hỗ trợ tích hợp với Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite và các thư viện phổ biến khác. Nền tảng này tương thích với Android API 16+ và iOS 11+.

Kiến trúc Flipper: cách giao tiếp giữa desktop và thiết bị

Kiến trúc Flipper được xây dựng theo mô hình máy khách-máy chủ. Ứng dụng desktop đóng vai trò máy chủ và các thiết bị di động đóng vai trò máy khách. Kết nối được thiết lập qua USB hoặc TCP/IP, sau đó quá trình trao đổi tin nhắn hai chiều bắt đầu bằng Giao thức Flipper dựa trên WebSocket.

Về phía Android, giao tiếp được cung cấp bởi thư viện android-client sử dụng ADB để tạo đường hầm lưu lượng. Máy khách iOS kết nối qua idb (iOS Device Bridge) — sự phát triển riêng của Meta để tương tác với thiết bị iOS mà không cần Xcode. Bên trong ứng dụng, mỗi plugin đăng ký với FlipperClient và nhận kênh giao tiếp riêng với đối tác desktop.

Quy trình truyền dữ liệu hoạt động như sau: plugin trên thiết bị gửi sự kiện qua FlipperClient, máy khách tuần tự hóa nó thành JSON và truyền qua WebSocket đến desktop. Ứng dụng desktop giải tuần tự hóa tin nhắn và gửi nó đến plugin tương ứng trong giao diện. Theo blog kỹ thuật của Meta (2024), độ trễ truyền tin nhắn dưới 15 mili giây qua kết nối USB.

Cách cài đặt và cấu hình Flipper

Việc cài đặt Flipper bao gồm ba bước: cài đặt ứng dụng desktop, thêm SDK vào dự án và khởi chạy trình gỡ lỗi. Ứng dụng desktop được tải từ trang web chính thức fbflipper.com — có sẵn các bản dựng cho Windows, macOS và Linux ở định dạng dmg, exe và AppImage. Sau khi cài đặt, ứng dụng tự động phát hiện các thiết bị được kết nối qua ADB.

Đối với dự án Android, Flipper được kết nối qua các phụ thuộc trong build.gradle. Bạn cần chỉ định phiên bản Flipper khớp với phiên bản máy khách desktop và thêm plugin cho các thư viện đang sử dụng. Dưới đây là ví dụ cấu hình cho dự án Kotlin:

// build.gradle (ứng dụng)
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"
    )
}

Sau khi đồng bộ Gradle, bạn cần khởi tạo FlipperClient trong lớp Application. Việc khởi tạo được thực hiện trong bản dựng gỡ lỗi — thư viện không nên được kết nối trong phiên bản phát hành để tránh lộ thông tin gỡ lỗi cho người dùng.

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

Đối với iOS, Flipper được thêm qua CocoaPods. Trong Podfile, các framework Flipper và FlipperKit được chỉ định, cùng với Flipper-Folly và Flipper-PeerTalk để tổ chức kênh giao tiếp. Sau pod install và chạy ứng dụng trên trình mô phỏng hoặc thiết bị, máy khách desktop sẽ tự động phát hiện phiên mới.

Kiểm tra kết nối

Sau khi khởi chạy ứng dụng, hãy mở Flipper desktop — danh sách các thiết bị được kết nối sẽ xuất hiện ở bảng điều khiển bên trái. Nếu thiết bị không hiển thị, hãy kiểm tra: ADB đã được cài đặt chưa, gỡ lỗi USB trên Android đã được bật chưa hoặc cầu nối idb cho iOS có đang chạy không. Mỗi thiết bị được hiển thị với tên model và phiên bản hệ điều hành.

Plugin Flipper cho Android và iOS

Plugin Flipper là các tiện ích mở rộng mô-đun thêm bảng điều khiển vào giao diện desktop cho các tác vụ cụ thể. Meta duy trì các plugin chính thức cho các thư viện phổ biến nhất: Network Plugin cho OkHttp và URLSession, Database Plugin cho SQLite và Realm, Layout Inspector cho hệ thống phân cấp View, SharedPreferences Plugin và Crash Reporter.

Ngoài các plugin chính thức, còn có hệ sinh thái plugin bên thứ ba do cộng đồng phát triển. Ví dụ: MMKV Plugin để gỡ lỗi bộ nhớ Tencent MMKV, Redux Debugger cho React Native, LeakCanary Plugin để phát hiện rò rỉ bộ nhớ. Các plugin được phân phối qua Maven Central và CocoaPods và được kết nối như các phụ thuộc thông thường.

Một lợi thế quan trọng của Flipper là khả năng viết plugin tùy chỉnh. Một plugin bao gồm hai phần: phần máy khách (bằng Kotlin hoặc Swift) đăng ký trong ứng dụng di động và phần desktop (bằng TypeScript hoặc JavaScript) thêm bảng giao diện người dùng vào giao diện. Meta cung cấp API để tạo plugin tùy chỉnh với hỗ trợ WebSocket và tin nhắn JSON.

Plugin chính cho Android

Gỡ lỗi mạng qua Flipper

Network Plugin là một trong những plugin Flipper phổ biến nhất. Nó chặn tất cả các yêu cầu HTTP/HTTPS đi qua OkHttp trên Android hoặc URLSession trên iOS và hiển thị chúng trong giao diện desktop theo thời gian thực. Đối với mỗi yêu cầu, có sẵn: URL, phương thức, mã trạng thái, tiêu đề yêu cầu và phản hồi, nội dung yêu cầu và phản hồi, thời gian thực thi và kích thước.

Để kết nối Network Plugin trên Android, chỉ cần thêm phụ thuộc flipper-network-plugin và truyền OkHttpClient vào hàm tạo NetworkFlipperPlugin. Flipper tự động bọc OkHttpClient trong một trình chặn. Trên iOS, plugin tích hợp URLSession yêu cầu cấu hình qua FlipperNetworkInterceptor.

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

Một tính năng chính của Network Plugin là hỗ trợ tìm kiếm và lọc yêu cầu. Nhà phát triển có thể lọc yêu cầu theo URL, phương thức, mã trạng thái hoặc loại nội dung. Bất kỳ yêu cầu nào cũng có thể được buộc thử lại từ giao diện — điều này hữu ích để kiểm tra điểm cuối mà không cần viết yêu cầu curl riêng. Theo khảo sát nhà phát triển Meta (2024), Network Plugin được sử dụng trong 78% dự án có cài đặt Flipper.

Gỡ lỗi cơ sở dữ liệu và SharedPreferences

Database Plugin cung cấp quyền truy cập vào cơ sở dữ liệu SQLite và Realm trực tiếp từ máy khách desktop. Nhà phát triển nhìn thấy tất cả các bảng, lược đồ và nội dung của chúng trong chế độ xem dạng bảng. Có thể thực thi các truy vấn SQL tùy ý và thêm, chỉnh sửa, xóa bản ghi mà không cần viết mã. Điều này tăng tốc đáng kể việc gỡ lỗi trạng thái ứng dụng so với việc sử dụng adb shell.

SharedPreferences Plugin hoạt động tương tự: nó hiển thị tất cả các khóa và giá trị được lưu trữ trong SharedPreferences trên Android. Việc chỉnh sửa diễn ra ngay lập tức — các thay đổi hiển thị ngay trong ứng dụng. Tuy nhiên, có một hạn chế quan trọng: sau khi khởi động lại ứng dụng, Flipper kết nối lại và tất cả các thay đổi được thực hiện qua plugin được giữ nguyên vì chúng được áp dụng trực tiếp vào tệp SharedPreferences.

Đối với iOS, tương đương là NSUserDefaults Plugin. Nó hoạt động với UserDefaults và hiển thị tất cả các cặp khóa-giá trị đã lưu. Plugin hỗ trợ chỉnh sửa chuỗi, số, ngày tháng và mảng. Các thay đổi được áp dụng ngay lập tức vì Flipper truy cập UserDefaults qua giao diện thời gian chạy.

Layout Inspector và ghi nhật ký

Layout Inspector của Flipper cung cấp biểu diễn trực quan về hệ thống phân cấp View trên Android. Nhà phát triển nhìn thấy cây thành phần, các thuộc tính của chúng (chiều rộng, chiều cao, đệm, nền, văn bản) và có thể tương tác chọn bất kỳ phần tử nào trên màn hình thiết bị. Đây là một giải pháp thay thế cho Layout Inspector tích hợp trong Android Studio, nhưng với một điểm khác biệt quan trọng — Flipper hiển thị hệ thống phân cấp theo thời gian thực mà không dừng ứng dụng.

Để ghi nhật ký, Logs Plugin được sử dụng. Tất cả nhật ký từ Logcat xuất hiện trong giao diện desktop với bộ lọc theo cấp độ (Debug, Info, Warn, Error) và thẻ. Không giống như Android Studio Logcat, giao diện Flipper không làm lộn xộn màn hình — nhật ký được nhóm theo thẻ và tô sáng theo cấp độ. Hỗ trợ tìm kiếm và xuất nhật ký sang JSON.

Một tính năng hữu ích khác là Console Plugin, hiển thị console.log từ mã JavaScript trong các thành phần React Native hoặc WebView. Điều này đơn giản hóa việc gỡ lỗi ứng dụng kết hợp: nhà phát triển thấy cả nhật ký gốc và nhật ký JS trong một giao diện. Plugin hỗ trợ lọc theo nguồn (Native hoặc JS) và cấp độ ghi nhật ký.

Cấu hình plugin Flutter

Đối với ứng dụng Flutter, Flipper được kết nối qua gói flipper từ pub.dev. Plugin flutter_flipper cung cấp tích hợp với lớp mạng Dio, bộ nhớ SharedPreferences và điều hướng Flutter. Việc cài đặt yêu cầu thêm phụ thuộc vào pubspec.yaml và khởi tạo FlipperClient trong hàm main của ứng dụng. Plugin Flutter vẫn kém hơn plugin gốc về chức năng, nhưng chúng bao phủ các kịch bản gỡ lỗi chính.

Hiệu suất trong quá trình gỡ lỗi

Flipper tiêu thụ tài nguyên thiết bị và desktop tỷ lệ thuận với số lượng plugin đang hoạt động. Khi tất cả các plugin được kết nối đồng thời trên trình giả lập Android, hiệu suất giảm 5–10% được quan sát theo các phép đo của Meta (2024). Khuyến nghị chỉ kết nối các plugin cần thiết và tắt các plugin không sử dụng qua giao diện ứng dụng desktop.