開發了個 Flipper 調試工具的 Flutter 版本 SDK，讓 Flutter 應用調試起來更容易

最近一直在持續的學習 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/fli...
• 暫不支持 iOS 真機

探討

若是您對此項目有任何建議或疑問，能夠經過 Telegram 或個人微信進行討論。

相關連接

• https://github.com/blankapp/f...
• https://github.com/facebook/f...