Facebook开源的面向移动开发人员的桌面调试平台

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个由Facebook开源面向移动开发人员的桌面调试平台——Flipper。

Flipper（前身为 Sonar）是一个用于调试 iOS、Android 和 React Native 应用程序的平台。Flipper 本身只提供架构平台，开发者可以针对业务逻辑和应用程序中的用例构建插件，包括日志、布局检查器和网络检查器等插件。

Flipper桌面应用程序通过和移动原生SDK建立连接，可用于向设备发送数据和从设备发送数据。Flipper 对发送的数据类型没有任何限制，这使得可以在许多不同的用例中更好地了解应用程序内部的内容。例如，可以查看本地缓存的状态、发生的事件或触发应用程序上的操作等。

如何使用

Flipper 可帮助您调试在仿真器、模拟器、连接的物理开发设备或浏览器中运行的 Android、iOS 甚至 Web 应用程序。Flipper 由两部分组成：

桌面应用程序
适用于 Android 和 iOS 的本机移动 SDK、适用于 JavaScript 的客户端，甚至您可以自己实现或在网络上找到的第三方客户端

启动 Flipper 并启动模拟器/模拟器或连接设备后，您将开始查看设备日志（以及与您的设备配合使用的任何其他设备级插件）。要查看特定于应用程序的数据，您需要将 Flipper SDK 集成到您的应用程序中。

1、安装客户端

Mac：

https://www.facebook.com/fbflipper/public/mac

Linux：

https://www.facebook.com/fbflipper/public/linux

Windows：

https://www.facebook.com/fbflipper/public/windows

2、添加到Android程序中

2.1 添加依赖

dependencies {
debugImplementation 'com.facebook.flipper:flipper:0.119.0'
debugImplementation 'com.facebook.soloader:soloader:0.10.1'
releaseImplementation 'com.facebook.flipper:flipper-noop:0.119.0'
}

2.2 在 MyApplication 中初始化

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;

public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, false);
if (BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(this)) {
final FlipperClient client = AndroidFlipperClient.getInstance(this);
client.addPlugin(new InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()));
client.start();

2.3 在AndroidManifest中添加

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

3、在客户端中启用插件

客户端默认只添加了布局检查插件，其他插件可按需添加

添加网络插件

依赖

dependencies {
  debugImplementation 'com.facebook.flipper:flipper-network-plugin:0.119.0'
}

实例化插件

import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;

NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
new NetworkingModule.CustomClientBuilder() {
    @Override
    public void apply(OkHttpClient.Builder builder) {
        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
    }
});
client.addPlugin(networkFlipperPlugin);

OkHttp整合

由于拦截器可以修改请求和响应，因此在所有其他拦截器之后添加 Flipper 拦截器以获得网络流量的准确视图

import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;

new OkHttpClient.Builder()
    .addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin))
    .build();