V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lijy91
V2EX  ›  分享创造

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

  •  
  •   lijy91 · 2019-02-25 08:30:53 +08:00 · 3609 次点击
    这是一个创建于 2098 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    特性

    • Network inspector WechatIMG223.png

    • Shared preferences (and UserDefaults) inspector WechatIMG224.png

    集成到你的项目

    必备条件

    开始之前确保你已安装:

    安装

    添加以下内容到包的 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
    

    已知问题

    探讨

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

    image

    相关链接

    第 1 条附言  ·  2019-02-25 09:25:54 +08:00
    如果大家觉得这个项目对你有帮忙,顺手来个 Star 吧~

    https://github.com/blankapp/flutter_flipperkit
    20 条回复    2019-02-26 07:59:33 +08:00
    Hilong
        1
    Hilong  
       2019-02-25 08:52:51 +08:00 via Android
    赞一个,flutter 生态就是这样靠你们一步步变好的。
    iamsee
        2
    iamsee  
       2019-02-25 08:56:07 +08:00
    赞,希望 flutter 生态越来越好
    wen704
        3
    wen704  
       2019-02-25 09:14:04 +08:00
    老哥流啤
    zjupigeon
        4
    zjupigeon  
       2019-02-25 09:58:44 +08:00
    看好 flutter,或者这类,让跨平台的开发更简单
    itbeihe
        5
    itbeihe  
       2019-02-25 10:00:26 +08:00
    老哥厉害
    OrangeM21
        6
    OrangeM21  
       2019-02-25 10:01:39 +08:00
    老哥稳
    PDX
        7
    PDX  
       2019-02-25 10:01:41 +08:00 via iPhone
    6
    Ann5527
        8
    Ann5527  
       2019-02-25 10:02:23 +08:00
    🐂! Mark 一下备用
    20015jjw
        9
    20015jjw  
       2019-02-25 10:02:55 +08:00 via Android
    fb flipper 用户表示感谢
    lijy91
        10
    lijy91  
    OP
       2019-02-25 10:03:34 +08:00
    @Hilong
    @iamsee
    @zjupigeon Flutter 未来大有可为,我一路从 Android -> RN -> Flutter,Flutter 给我的感觉很好,不管是开发体验还是在性能体验上都非常不错。
    lijy91
        11
    lijy91  
    OP
       2019-02-25 10:05:31 +08:00
    @20015jjw 我也是最近才发现的 Flipper 确实不错,还发现了一个中文乱码的 Bug 给官方提了 PR。
    Mrxxy
        12
    Mrxxy  
       2019-02-25 10:38:02 +08:00
    收藏支持
    kooze
        13
    kooze  
       2019-02-25 11:09:36 +08:00
    最近在做 flutter 应用,支持了!
    allenjuly7
        14
    allenjuly7  
       2019-02-25 11:10:14 +08:00
    star +1
    wen704
        15
    wen704  
       2019-02-25 11:13:31 +08:00
    @lijy91 现在就差 Flutter 的热更新了,我和你的路线一样,不过 RN 上有热更新, Flutter 上没有,不然现在立马把项目转 Flutter 上去.
    lijy91
        16
    lijy91  
    OP
       2019-02-25 11:23:53 +08:00
    @wen704 他们官方今年的计划就有热更新,应该不远了。
    wen704
        17
    wen704  
       2019-02-25 11:31:24 +08:00
    @lijy91 可以,先自己玩玩 demo 熟练起来,到时候热更新来了就换上去吧,不过看 iOS ,github 上都说很悬,可能只有安卓有,其实谷歌自己标准里也是不给热更新的...
    magic3584
        18
    magic3584  
       2019-02-25 11:56:58 +08:00
    楼主两个 GitHub 号。。。
    lijy91
        19
    lijy91  
    OP
       2019-02-25 12:07:10 +08:00 via iPhone
    @magic3584 一个账号,多个组织
    chenglu
        20
    chenglu  
       2019-02-26 07:59:33 +08:00 via iPhone
    大赞楼主~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   952 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:28 · PVG 04:28 · LAX 12:28 · JFK 15:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.