Flipper: 桌面调试平台指南

最新推荐文章于 2024-09-05 07:59:11 发布

羿漪沁Halbert

最新推荐文章于 2024-09-05 07:59:11 发布

阅读量403

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00724/article/details/141083641

版权

Flipper: 桌面调试平台指南

FlipperPlayground (and dump) of stuff I make or modify for the Flipper Zero项目地址:https://gitcode.com/gh_mirrors/fl/Flipper

一、项目介绍

Flipper 是一个专为移动开发者打造的桌面级调试平台, 支持iOS, Android及React Native应用. 它提供了一个直观且功能丰富的界面, 可以方便地进行日志查看、布局检查以及网络请求分析等操作.

此外, Flipper设计为可扩展插件系统, 用户可以根据需求开发自定义插件来可视化和调试移动端应用程序的数据. 这种机制确保了数据在设备和桌面端之间的高效传输, 并能够调用函数或监听应用事件.

二、项目快速启动

必备条件

首先你需要安装以下软件:

Node.js (推荐最新LTS版)
npm (Node.js包管理器)

然后下载并安装Electron, Xcode(仅限macOS), Android Studio.

下载源码

从Github上克隆该项目到你的本地目录下：

git clone https://github.com/UberGuidoZ/Flipper.git

接下来我们通过npm初始化环境, 然后进入Desktop文件夹：

cd Flipper
yarn # 或者使用 `npm install`

构建并运行Flipper服务器:

npx flipper-server

现在, 浏览器中应该已经显示了Flipper图形界面. 你可以开始连接你的移动设备.

集成Flipper至iOS项目

对于iOS应用，集成Flipper需要添加以下步骤：

在Xcode中打开你的iOS工程。
在终端执行下面命令导入Flipper框架:

pod init
open Podfile
pod 'Flipper', :path => '../Flipper/ios'
pod 'FlipperKit'
pod 'SKWebImage/SwiftUI'
pod 'FBLazyVector'
pod 'FBReactNativeSpec'
pod 'Flipper-RSocket'
pod 'RSocketSwift'
pod 'Flipper-Client'
pod 'Flipper-UserDefaultsPlugin'
pod 'Flipper-InspectorPackagerClient'
pod 'Flipper-InspectorSections'
pod 'Flipper-DiffTextView'
pod 'Flipper-FBCrashGroup'
pod 'Flipper-ComponentKit'
pod 'Flipper-JSCallInvoker'

以上Pods都是Flipper生态系统的关键组件，保证了插件能够正常工作。

安装这些依赖项:
```
pod install
```

打开工程，在AppDelegate.m 文件中添加以下代码:

#import <FlipperKit/FKAppDelegate+FlipperKit.h>
@class RKObjectMapping;
FK_REGISTERED_MODULES {
  // Register any plugins you want here.
  // For example: FlipperUserDefaultsPlugin::get()
  // Refer to the official Flipper documentation for available plugins.
};

最后, 编译并运行你的应用程序.

集成Flipper至Android项目

在Android项目中集成Flipper，只需将Flipper库引入你的build.gradle（Module）文件内：

dependencies {
    implementation 'com.facebook.flipper:flipper:$FLIPPER_VERSION'       // required
    implementation 'com.facebook.flipper:flipper-plugin-fbprefs:$FLIPPER_VERSION' // optional
}

然后确保$FLIPPER_VERSION替换为你想要使用的版本号。

最后在你的应用程序类中加入如下代码：

protected static final String IP_ADDRESS = "127.0.0.1";

@Override
public void onCreate() {
  super.onCreate();

  if (BuildConfig.DEBUG) { 
    MultiDex.install(this);
    
    final Context context = this;

    try {
        Class.forName("com.facebook.flipper.ReactNativeFlipper")
            .getMethod("initializeFlipper", Context.class)
            .invoke(null, context);
    } catch (ClassNotFoundException e) {
        e.printStackTrace();
    } catch (NoSuchMethodException e) {
        e.printStackTrace();
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    } catch (InvocationTargetException e) {
        e.printStackTrace();
    }
  }
}

如果你的应用程序是基于React Native, 将其添加到你的主应用程序类（通常是在MainApplication.java文件里）

@ReactMethod
public void startFlipper() {
  if (BuildConfig.DEBUG) {
    try {
      Log.d(TAG, "Starting Flipper...");
      
      List<Class<? extends FlipperPlugin>> plugins = new ArrayList<>();
      //在这里注册你想使用的Flipper插件
      
      //你也可以通过这种方式注册默认插件：
      //plugins.add(DefaultFlipperPlugins.buildFlipperPlugins(getReactApplicationContext()));
      
      ReactNativeFlipper.initializeFlipper(
          getReactApplicationContext(),
          DefaultFlipperPlugins.getPlugins(getReactApplicationContext(), plugins),
          IP_ADDRESS,
          FLIPPER_PORT
      );
      
      Log.d(TAG, "Flipper started");
    } catch (IOException e) {
      Log.e(TAG, "Failed to initialize Flipper", e);
    }
  }
}

集成Flipper至React Native项目

对于React Native项目, Flipper提供了专门SDK来进行集成:

添加依赖:

使用yarn add react-native-flipper 或者 npm install --save react-native-flipper

配置环境变量:

在您的应用程序入口文件里配置如下:

import { enableFlipperOnHostDevice } from '@react-native-community/cli-platform-android';

if (__DEV__) {
  enableFlipperOnHostDevice(global.process);
}

import Flipper from 'react-native-flipper';

启动插件:

const db = new SQLite('mydb');
db.open().then(() => {
  Flipper.attach(db);
});

// ...或者

const MyComponent = () => {
  const [state, setState] = useState({ count: 0 });
  return (
    <Button title="Increment" onPress={() => { setState({count: state.count + 1}); }} />
  );
};

Flipper.createInstance(MyComponent);