最近一直在持续的学习 Flutter,但一直没有发现有好用的网络调试工具,也不想太想使用 Charles 这个工具,后来发现了 Facebook Flipper 这个工具,所以花了几天时间做了个 Flutter 版的 Flipper SDK。期间碰到了一些问题但 Flipper 项目的人迅速的帮忙。
这个库可以让你能够在 Flipper 上查看你的 Flutter 应用的网络请求及 Preferences 数据,相比之前我之前使用 print 来输出请求数据来说,实在是方便了好多,如果你也在用 Flutter 开发你的应用,不妨来试一下吧。
Network inspector
Shared preferences (and UserDefaults) inspector
开始之前确保你已安装:
添加以下内容到包的 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 或我的微信进行讨论。
1
Hilong 2019-02-25 08:52:51 +08:00 via Android
赞一个,flutter 生态就是这样靠你们一步步变好的。
|
2
iamsee 2019-02-25 08:56:07 +08:00
赞,希望 flutter 生态越来越好
|
3
wen704 2019-02-25 09:14:04 +08:00
老哥流啤
|
4
zjupigeon 2019-02-25 09:58:44 +08:00
看好 flutter,或者这类,让跨平台的开发更简单
|
5
itbeihe 2019-02-25 10:00:26 +08:00
老哥厉害
|
6
OrangeM21 2019-02-25 10:01:39 +08:00
老哥稳
|
7
PDX 2019-02-25 10:01:41 +08:00 via iPhone
6
|
8
Ann5527 2019-02-25 10:02:23 +08:00
🐂! Mark 一下备用
|
9
20015jjw 2019-02-25 10:02:55 +08:00 via Android
fb flipper 用户表示感谢
|
10
lijy91 OP |
12
Mrxxy 2019-02-25 10:38:02 +08:00
收藏支持
|
13
kooze 2019-02-25 11:09:36 +08:00
最近在做 flutter 应用,支持了!
|
14
allenjuly7 2019-02-25 11:10:14 +08:00
star +1
|
15
wen704 2019-02-25 11:13:31 +08:00
@lijy91 现在就差 Flutter 的热更新了,我和你的路线一样,不过 RN 上有热更新, Flutter 上没有,不然现在立马把项目转 Flutter 上去.
|
17
wen704 2019-02-25 11:31:24 +08:00
@lijy91 可以,先自己玩玩 demo 熟练起来,到时候热更新来了就换上去吧,不过看 iOS ,github 上都说很悬,可能只有安卓有,其实谷歌自己标准里也是不给热更新的...
|
18
magic3584 2019-02-25 11:56:58 +08:00
楼主两个 GitHub 号。。。
|
20
chenglu 2019-02-26 07:59:33 +08:00 via iPhone
大赞楼主~
|