文章

Flipper

发表于
作者 Hacket Zeng
4 分钟阅读
Flipper

Flipper

https://fbflipper.com/

什么是 Flipper？

一个可扩展的跨平台的调试工具，用来调试 iOS、Android 和 RN 应用。

Flipper 是作为一个平台构建的。除了使用已经包含的工具之外，你还可以自己创建插件来可视化和调试来自移动应用程序的数据。Flipper 负责在移动应用程序上来回发送数据、调用函数和侦听事件。

xyvex

Flipper install

Windows

OpenSSL(windows)

下载 OpenSSL 并加入到 PATH

参考： Win64OpenSSL_Light-3_0.exe 下载链接

  • 加入到 PATH OpenSSL安装目录\bin 加入到 PATH

  • 验证 终端：openssl version

Node (新版)

参考： Desktop App Flipper

  • 开启监听
1
2

npx flipper-server --port 8090
# 如果出现 ECONNREFUSED，表示端口被占用了
  • 浏览器访问
1

http://localhost:8090/
  • 配置 Android SDK
  • OpenSSL (Windows)

WatchMan

https://facebook.github.io/watchman/
下载并安装完 WatchMan 后将 bin 目录加入到 PATH 中

Android 中引入（通过 Gradle）

1
2
3
4
5
6
7
8
9

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'
}

浏览器版本

新版本改成 Chrome 应用了，用浏览器打开

Mac

Windows

  • ADB
  • OpenSSL

启动服务器

OpenSSL 版本导致的报错

image.png

在启动 npx flipper-server 时也报错：

image.png

image.png

OpenSSL 版本：

1

OpenSSL 3.4.1 11 Feb 2025 (Library: OpenSSL 3.4.1 11 Feb 2025)

解决：降级 OpenSSL 版本到 3.2.4 解决，其他版本见 Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions

常用的 Flipper 插件

Flipper 本身只提供架构平台。使它有用的是建立在它之上的插件：日志、布局检查器和网络检查器都是插件。你可以针对你的业务逻辑和应用程序中的用例构建插件。我们提供带有内置通用插件的 Flipper。

  • Logs 查看 log
  • Crash Reporter 查看 Crash
  • Layout 查看布局
  • Databases 查看和修改 Sqlite 数据库数据
  • Images(Fresco) 查看 Fresco 加载图片
  • LeakCanary
  • SP 查看和修改 SP
  • Network 查看网络请求
  • UI Debugger 查看布局，比 Layout 功能更强

Logs

展示设备的 log 无需额外的代码引入
cqwsr

Crash Reporter

查看 Crash 信息

1
2
3

import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;

client.addPlugin(CrashReporterPlugin.getInstance());

Layout

查看布局，现在由 UI Debugger 替换掉

代码：

1
2
3
4
5
6

import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;

final DescriptorMapping descriptorMapping = DescriptorMapping.withDefaults();

client.addPlugin(new InspectorFlipperPlugin(mApplicationContext, descriptorMapping));

效果：
mh2ep

Databases

查看 Sqlite 数据库
代码：

1
2
3

import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;

client.addPlugin(new DatabasesFlipperPlugin(context));

效果：
dz3ff

Shared Preferences Viewer Plugin

查看 SP
nt90e
如果项目中用了 mmkv，那么这个插件就用不了，初始化时会报错：

java.lang.UnsupportedOperationException: Intentionally Not implement in MMKV 具体见源码 MMKV.java

mmkv-viewer

  1. Flipper 中安装插件 mmkv-viewer
  2. 引入 debugImplementation 'com.github.ddyos:flipper-plugin-mmkv-viewer:1.0.0'
  3. 代码引入
1
2
3
4
5
6
7
8
9
10
11

private fun initMMKVPlugin(client: FlipperClient, context: Context) {
    client.addPlugin(
        MMKVFlipperPlugin(
            listOf(
                MMKVDescriptor(getDefaultId(context)),
                //                MMKVDescriptor("another_mmkv", MMKV.MULTI_PROCESS_MODE, cryptKey)
            )
        )
    )
    //        client.addPlugin(MMKVFlipperPlugin("other_mmkv"))
}

Network

查看网络请求，可用来替换 Charles 看抓包数据

UI Debugger

用来替换旧版本的 Layout

代码：

1

client.addPlugin(UIDebuggerFlipperPlugin(UIDContext.create(context.applicationContext as Application)))

Images

目前只支持查看 Fresco 库加载 Image

LeakCanary

效果： tgz1v

遇到的问题

No device found

vm2g9

  • 原因：Android SDK 路径不对
  • 解决：设置正确的 SDK 路径

Windows 上运行 Flipper 可能会报错

Failed to start flipper-server Error: It looks like you don’t have OpenSSL installed. Please install it to continue.

解决：安装 OpenSSL，并将 bin 目录加入到 Path

不能在除 debug 外的其他 buildType 运行

初始化就会崩溃

Tools, DevTools
辅助开发工具
本文由作者按照 CC BY 4.0 进行授权