开发了个 Flipper 调试工具的 Flutter 版本 SDK，让 Flutter 应用调试起来更容易

迈不过友情╰ 2022-03-08 14:28 420阅读 0赞

最近一直在持续的学习 Flutter，但一直没有发现有好用的网络调试工具，也不想太想使用 Charles 这个工具，后来发现了Facebook [Flipper][] 这个工具，所以花了几天时间做了个 Flutter 版的 [Flipper SDK][]。期间碰到了一些问题但 Flipper 项目的人迅速的帮忙。

这个库可以让你能够在 Flipper 上查看你的 Flutter 应用的网络请求及 Preferences 数据，相比之前我之前使用 print 来输出请求数据来说，实在是方便了好多，如果你也在用 Flutter 开发你的应用，不妨来试一下吧。

## 特性 ##

*  Network inspector

![WechatIMG223.png][]

*  Shared preferences (and UserDefaults) inspector

![WechatIMG224.png][]

## 集成到你的项目 ##

### 必备条件 ###

开始之前确保你已安装：

*  已安装 [Flipper Desktop][]

### 安装 ###

添加以下内容到包的 pubspec.yaml 文件中：

dependencies:
      flutter_flipperkit: ^0.0.2

根据示例更改项目的 ios/Podfile 文件：

> Flipper 目前需要的 platform 为 8.0

+source 'https://github.com/facebook/flipper.git'
    +source 'https://github.com/CocoaPods/Specs'
    # Uncomment this line to define a global platform for your project
    -# platform :ios, '9.0'
    +platform :ios, '9.0'

根据示例更改项目的 android/app/build.gradle 文件：

> Flipper 目前需要的 sdkVersion 为 28

android {
    -    compileSdkVersion 27
    +    compileSdkVersion 28
    
        defaultConfig {
    -        targetSdkVersion 27
    +        targetSdkVersion 28
        }
    }

您可以通过命令行安装软件包：

$ flutter packages get

### 快速集成 ###

添加下列代码到 lib/main.dart 文件：

import 'package:flutter_flipperkit/flutter_flipperkit.dart';
    
    void main() {
      FlipperClient flipperClient = FlipperClient.getDefault();
    
      // 添加网络插件
      flipperClient.addPlugin(new FlipperNetworkPlugin());
      // 添加 Preferences 插件
      flipperClient.addPlugin(new FlipperSharedPreferencesPlugin());
      flipperClient.start();
    
      runApp(MyApp());
    }

Dio 集成示例：

import 'dart:io';
    import 'package:dio/dio.dart';
    import 'package:flutter_flipperkit/flutter_flipperkit.dart';
    import 'package:uuid/uuid.dart';
    
    class DioClient {
      Dio _http;
      FlipperNetworkPlugin _flipperNetworkPlugin;
    
      DioClient() {
        _flipperNetworkPlugin = FlipperClient
          .getDefault().getPlugin(FlipperNetworkPlugin.ID);
        
        Options options = new Options(
          connectTimeout: 5000,
          receiveTimeout: 3000,
          headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
          },
          responseType: ResponseType.JSON,
        );
        this._http = new Dio(options);
        // 在拦截器中添加和 Flipper 通讯的代码
        this._http.interceptor.request.onSend = (Options options) async {
          // 发送请求数据到 Flipper
          this._reportRequest(options);
          return options;
        };
        this._http.interceptor.response.onSuccess = (Response response) {
          // 发送响应数据到 Flipper
          this._reportResponse(response);
          return response;
        };
      }
    
      Dio get http {
        return _http;
      }
    
      void _reportRequest(Options options) {
        String requestId = new Uuid().v4();
        options.extra.putIfAbsent("requestId", () => requestId);
        RequestInfo requestInfo = new RequestInfo(
          requestId: requestId,
          timeStamp: new DateTime.now().millisecondsSinceEpoch,
          uri: '${options.baseUrl}${options.path}',
          headers: options.headers,
          method: options.method,
          body: options.data,
        );
    
        _flipperNetworkPlugin.reportRequest(requestInfo);
      }
    
      void _reportResponse(Response response) {
        Map<String, dynamic> headers = new Map();
          for (var key in []
            ..addAll(HttpHeaders.entityHeaders)
            ..addAll(HttpHeaders.requestHeaders)
            ..addAll(HttpHeaders.responseHeaders)
          ) {
            var value = response.headers.value(key);
    
            if (value != null && value.isNotEmpty) {
              headers.putIfAbsent(key, () => value);
            }
          }
          String requestId = response.request.extra['requestId'];
          ResponseInfo responseInfo = new ResponseInfo(
            requestId: requestId,
            timeStamp: new DateTime.now().millisecondsSinceEpoch,
            statusCode: response.statusCode,
            headers: headers,
            body: response.data,
          );
    
          _flipperNetworkPlugin.reportResponse(responseInfo);
      }
    }

Dio 使用示例

new DioClient().http.get('https://www.v2ex.com/api/topics/hot.json');

### 运行程序 ###

这时，集成已经完成，启用应用后可在 Flipper Desktop 上实时看到你的网络请求了

$ flutter run

## 已知问题 ##

*  Flipper Desktop 中文乱码，但已解决并提交 [PR][] 给官方，暂时可以使用我修改的版本 [https://github.com/lijy91/fli...][https_github.com_lijy91_fli...]
 *  暂不支持 iOS 真机

## 探讨 ##

如果您对此项目有任何建议或疑问，可以通过 [Telegram][] 或我的微信进行讨论。

![image][]

## 相关链接 ##

*  [https://github.com/blankapp/f...][Flipper SDK]
 *  [https://github.com/facebook/f...][https_github.com_facebook_f...]

[Flipper]: https://fbflipper.com
[Flipper SDK]: https://github.com/blankapp/flutter_flipperkit
[WechatIMG223.png]: /images/20220308/5ae1066911b4486493b5c88d06cda51c.png
[WechatIMG224.png]: /images/20220308/c4679105126f406c85953a883bd86cda.png
[Flipper Desktop]: https://fbflipper.com/docs/getting-started.html
[PR]: https://github.com/facebook/flipper/pull/377
[https_github.com_lijy91_fli...]: https://github.com/lijy91/flipper
[Telegram]: https://t.me/lijy91
[image]: /images/20220308/e9e80ed6deaf43319a98c1c53c23d526.png
[https_github.com_facebook_f...]: https://github.com/facebook/flipper