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

2字数 451阅读 797

最近一直在持续的学习 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

相关链接

推荐阅读更多精彩内容

  • dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData...
  • dio是Flutter中文网开源的一个强大的Dart Http请求库,支持Restful API、FormData...
  • 我的话一出口,三太太宋云裳的眼睛就睁圆了。她似乎不认识我了,冲着我左看右看上看下看个没完,如同菜市上买菜的老太太挑...
  • 燕儿姐是二姑家的孩子,有一个龙凤胎的哥哥,燕儿比我大六岁,记得我上幼儿园的时候她上六年级。相比于家里比我大四岁的姐...
  • 其实吧,自己都觉得自己说的是个屁。 忍下来,只是觉得当时爆发不太好;后来美好,只是自己想的开,身边有的小伙伴够可爱。