10分钟上手Flipper：移动端开发者必备调试工具安装指南

Flipper是一款专为移动开发者打造的桌面调试平台，能够帮助开发者可视化、检查和控制移动应用。本文将详细介绍如何在10分钟内完成Flipper的安装与基础配置，让你快速上手这款强大的调试工具。

Flipper简介

Flipper由两部分组成：桌面应用和移动SDK。它支持Android、iOS、Web应用等多种开发环境，能够与模拟器、真机设备无缝连接，提供日志查看、布局检查、网络监控等实用功能。

官方文档：docs/getting-started/index.mdx

系统要求

在开始安装前，请确保你的开发环境满足以下要求：

• node >= 18
• yarn >= 1.16
• iOS开发者工具（如开发iOS插件）
• Android SDK和adb
• OpenSSL（Windows用户需额外安装）

社区教程：README.md

安装Flipper桌面应用

快速安装（推荐）

对于macOS用户，可以通过Homebrew快速安装：

brew install --cask flipper

其他平台用户可以直接下载最新构建版本：

• Mac
• Linux
• Windows

从源码构建

如果你需要最新开发版本，可以从源码构建Flipper：

git clone https://gitcode.com/gh_mirrors/fli/flipper
cd flipper/desktop
yarn
yarn start

构建独立应用：

yarn build --mac  # 或 --win, --linux

构建产物将保存在dist/目录下。

桌面应用源码：desktop/

配置Android应用

添加依赖

在你的build.gradle文件中添加以下依赖：

repositories {
  mavenCentral()
}

dependencies {
  debugImplementation 'com.facebook.flipper:flipper:0.273.0'
  debugImplementation 'com.facebook.soloader:soloader:0.10.5'

  releaseImplementation 'com.facebook.flipper:flipper-noop:0.273.0'
}

初始化Flipper

在Application类中初始化Flipper：

import com.facebook.flipper.android.AndroidFlipperClient
import com.facebook.flipper.android.utils.FlipperUtils
import com.facebook.flipper.core.FlipperClient
import com.facebook.flipper.plugins.inspector.DescriptorMapping
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin

class MyApplication : Application {
  override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, false)

    if (BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(this)) {
      val client = AndroidFlipperClient.getInstance(this)
      client.addPlugin(InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()))
      client.start()
    }
  }
}

Android SDK源码：android/ 详细配置指南：docs/getting-started/android-native.mdx

配置iOS应用

CocoaPods配置

在你的Podfile中添加以下内容：

project 'MyApp.xcodeproj'
flipperkit_version = '0.250.0'

target 'MyApp' do
  platform :ios, '10.0'

  pod 'FlipperKit', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitLayoutComponentKitSupport', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
  pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version, :configuration => 'Debug'
  
  pod 'Flipper-DoubleConversion', :configuration => 'Debug'
  pod 'Flipper-Folly', :configuration => 'Debug'
  pod 'Flipper-Glog', :configuration => 'Debug'
  pod 'Flipper-PeerTalk', :configuration => 'Debug'
  pod 'CocoaLibEvent', :configuration => 'Debug'
  pod 'boost-for-react-native', :configuration => 'Debug'
  pod 'OpenSSL-Universal', :configuration => 'Debug'
  pod 'CocoaAsyncSocket', :configuration => 'Debug'
end

初始化Flipper

在AppDelegate中初始化Flipper：

import UIKit
import FlipperKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let client = FlipperClient.shared()
    let layoutDescriptorMapper = SKDescriptorMapper(defaults: ())
    FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper)
    client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!))
    client?.start()
    return true
  }
}

iOS SDK源码：iOS/ 详细配置指南：docs/getting-started/ios-native.mdx

启动与使用

完成上述配置后，启动Flipper桌面应用，然后运行你的移动应用。Flipper会自动检测并连接设备，你可以在界面中看到设备日志和已启用的插件。

浏览器版Flipper（实验性）

你还可以通过以下命令运行浏览器版Flipper：

npx flipper-server

常见问题解决

如果遇到连接问题，可以添加诊断Activity到AndroidManifest：

<activity android:name="com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity"
        android:exported="true"/>

故障排除指南：docs/getting-started/troubleshooting/troubleshooting.mdx

总结

通过本文的指南，你已经成功安装并配置了Flipper调试工具。Flipper提供了丰富的插件生态系统，可以根据需要扩展其功能。开始探索Flipper的强大功能，提升你的移动开发效率吧！

插件开发指南：docs/extending/create-plugin.mdx