开发了个 Flipper 调试工具的 Flutter 版本 SDK,让 Flutter 应用调试起来更容易
2019-02-25 09:38
405 查看
最近一直在持续的学习 Flutter,但一直没有发现有好用的网络调试工具,也不想太想使用 Charles 这个工具,后来发现了Facebook Flipper 这个工具,所以花了几天时间做了个 Flutter 版的 Flipper SDK。期间碰到了一些问题但 Flipper 项目的人迅速的帮忙。
这个库可以让你能够在 Flipper 上查看你的 Flutter 应用的网络请求及 Preferences 数据,相比之前我之前使用 print 来输出请求数据来说,实在是方便了好多,如果你也在用 Flutter 开发你的应用,不妨来试一下吧。
特性
-
Network inspector
-
Shared preferences (and UserDefaults) inspector
集成到你的项目
必备条件
开始之前确保你已安装:
- 已安装 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/flipper
- 暂不支持 iOS 真机
探讨
如果您对此项目有任何建议或疑问,可以通过 Telegram 或我的微信进行讨论。
相关链接
(window.slotbydup = window.slotbydup || []).push({ id: "u5894387", container: "_0hv0l6ey3zro", async: true });相关文章推荐
- IOS应用开发版本控制工具之Versions使用教程
- Android应用开发之APK版本更新的SDK及API
- 安卓开发工具、编译工具、sdk、模拟器、版本控制等等
- 【Android 应用开发】Ubuntu 下 Android Studio 开发工具使用详解 (旧版本 | 仅作参考)
- IOS应用开发版本控制工具之Versions使用
- 基于WEB应用开发的java程序员必备工具(脚本调试工具、java剖析工具)
- IOS应用开发版本控制工具之Versions使用
- Unix/Linux C++应用开发-gdb工具调试命令
- IOS应用开发版本控制工具之Versions使用
- IOS应用开发版本控制工具之Versions使用
- 国内首个HTML5移动应用开发工具AppCan-SDK
- Android Java / Kotlin 程序员开发调试工具。Debug Bottle 的所有功能均建立在 App 的 debug 版本中,不会对 release 版本产生任何影响。Debug Bo
- IOS应用开发版本控制工具之Versions使用
- HTML5跨平台一站式应用开发、调试和部署工具UDE
- Android 常用开发工具类之 AppVersionUtil (获取应用版本信息工具)
- 基于WEB应用开发的java程序员必备工具(脚本调试工具、java剖析工具) (转)
- IOS应用开发版本控制工具之Versions使用
- 微信公众帐号开发调试工具1.2版本发布
- IE10、IE11以上版本的浏览器的开发调试工具如何查看cookie?
- IOS应用开发版本控制工具之Versions使用