Flipper：它是什么、功能及应用

什么是 Flipper？

Flipper 是一个用于调试移动应用的开放平台，由 Facebook（Meta）于 2018 年创建。最初该项目名为 Sonar，用于公司内部需求，但 Meta 于 2019 年在 MIT 许可下发布了源代码。该平台由两个组件组成：基于 Electron 的桌面应用程序和集成到 Android 和 iOS 项目中的 SDK。

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 建立，之后开始通过基于 WebSocket 的 Flipper 协议进行双向消息交换。

在 Android 端，通信由 android-client 库提供，该库使用 ADB 进行流量隧道传输。iOS 客户端通过 idb（iOS Device Bridge）连接——这是 Meta 自有的开发工具，用于在没有 Xcode 的情况下与 iOS 设备进行交互。在应用程序内部，每个插件在 FlipperClient 中注册，并获得与桌面对应端独立的通信通道。

数据传输过程如下：设备上的插件通过 FlipperClient 发送事件，客户端将其序列化为 JSON 并通过 WebSocket 传输到桌面。桌面应用程序反序列化消息并将其发送到界面中相应的插件。根据 Meta 技术博客（2024），USB 连接时的消息传输延迟小于 15 毫秒。

如何安装和配置 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 同步之后，需要在 Application 类中初始化 FlipperClient。初始化在 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 是否已安装，Android 上是否启用了 USB 调试，iOS 的 idb 桥是否已启动。每个设备都显示型号名称和操作系统版本。

适用于 Android 和 iOS 的 Flipper 插件

Flipper 插件 是模块化扩展，为特定任务在桌面界面中添加面板。Meta 为最流行的库提供官方插件：用于 OkHttp 和 URLSession 的 Network Plugin，用于 SQLite 和 Realm 的 Database Plugin，用于 View 层次结构的 Layout Inspector，SharedPreferences Plugin 和 Crash Reporter。

除了官方插件之外，还有一个由社区开发的第三方插件生态系统。例如，用于调试 Tencent MMKV 存储的 MMKV Plugin，用于 React Native 的 Redux Debugger，用于检测内存泄漏的 LeakCanary Plugin。插件通过 Maven Central 和 CocoaPods 分发，并作为普通依赖项连接。

Flipper 的一个重要优势是可以编写自己的插件。一个插件由两部分组成：客户端部分（Kotlin 或 Swift），在移动应用程序中注册，以及桌面部分（TypeScript 或 JavaScript），在界面中添加 UI 面板。Meta 提供了用于创建自定义插件的 API，支持WebSocket 和 JSON 消息。

Android 的主要插件

通过 Flipper 进行网络调试

Network Plugin – 最受欢迎的 Flipper 插件之一。它拦截所有通过 Android 上 OkHttp 或 iOS 上 URLSession 的 HTTP/HTTPS 请求，并在桌面界面中实时显示。每个请求都可查看：URL、方法、状态码、请求和响应标头、请求和响应正文、执行时间和大小。

要在 Android 上连接 Network Plugin，只需添加 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 类似地工作：显示 Android 上 SharedPreferences 中存储的所有键和值。编辑立即生效——更改在应用程序中立即可见。但有一个重要限制：应用程序重新启动后，Flipper 重新连接，通过插件进行的所有更改都会保留，因为它们直接应用于 SharedPreferences 文件。

对于 iOS，对应的是 NSUserDefaults Plugin。它与 UserDefaults 一起工作，并显示所有保存的键值对。该插件支持编辑字符串、数字、日期和数组。更改立即生效，因为 Flipper 通过运行时接口访问 UserDefaults。

Layout Inspector 和日志记录

Layout Inspector 来自 Flipper，提供 Android 上 View 层次结构的可视化表示。开发者可以看到组件树、它们的属性（宽度、高度、边距、背景、文本），并且可以交互式地选择设备屏幕上的任何元素。这是 Android Studio 内置 Layout Inspector 的替代方案，但有一个重要区别——Flipper 实时显示层次结构而无需停止应用程序。

日志记录使用 Logs Plugin。所有来自 Logcat 的日志按级别（Debug、Info、Warn、Error）和标签进行过滤后进入桌面界面。与 Android Studio Logcat 不同，Flipper 界面不会使屏幕过载——日志按标签分组并按级别高亮显示。支持搜索和将日志导出为 JSON。

另一个有用的功能是 Console Plugin，它显示来自 React Native 或 WebView 组件的 JavaScript 代码中的 console.log。这简化了混合应用程序的调试：开发者在同一个界面中同时看到原生日志和 JS 日志。该插件支持按来源（Native 或 JS）和日志级别进行过滤。

配置 Flutter 插件

对于 Flutter 应用程序，Flipper 通过 pub.dev 上的 flipper 包连接。flutter_flipper 插件提供与 Dio 网络层、SharedPreferences 存储和 Flutter 导航的集成。安装需要在 pubspec.yaml 中添加依赖项并在应用程序的 main 函数中初始化 FlipperClient。Flutter 插件目前在功能上不如原生插件，但涵盖了主要的调试场景。

调试时的性能

Flipper 消耗设备和桌面的资源，与活动插件的数量成正比。根据 Meta 的测量（2024），在 Android 模拟器上同时连接所有插件时，性能会下降 5–10%。建议只连接必要的插件，并通过桌面应用程序的界面禁用不使用的插件。