Stethoとは

Facebookが開発したネットワーク通信デバッグ用のブリッジライブラリで、
Chrome Developer Toolsを使ってネットワーク通信/Preference/SQLiteの確認ができます。
Mirrativ内では主にネットワーク通信確認で使っていました。
f:id:morizo999:20190603210528p:plain facebook.github.io

Stethoの課題

とても便利なツールではあるのですが、ネットワーク通信を確認しながらアプリを起動していると度々クラッシュが起きていました。
Chrome Developer Toolsでアタッチしていないと発生しないのですが、デバッグ時にストレスがたまるので他の代替案を探していました。
github.com

Flipperとは

こちらもFacebook開発したモバイル用のデバッグツールです。
大きな違いはElectronで書かれた専用のアプリが存在し、AndroidだけではなくiOSにも対応しています。
fbflipper.com

Flipperの導入方法

Getting Started · Flipper
ドキュメントに従えばOK
v0.21.0からno-opができたので導入が楽になりました。以下の設定をしています。

private var client: FlipperClient? = null
// アプリケーション初期化時に呼ぶ
fun setup(context: Context) {
    SoLoader.init(context, false)

    if (BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(context)) {
        client = AndroidFlipperClient.getInstance(context).apply {
            addPlugin(DatabasesFlipperPlugin(context))
            addPlugin(FrescoFlipperPlugin())
            addPlugin(InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()))
            addPlugin(LeakCanaryFlipperPlugin())
            addPlugin(NavigationFlipperPlugin.getInstance())
            addPlugin(NetworkFlipperPlugin())
            addPlugin(SharedPreferencesFlipperPlugin(context))
        }
        client?.start()
    }
}

// OkHttpClient作成時に呼ぶ
fun addInterceptor(builder: OkHttpClient.Builder) = builder.also {
    client?.let {
        builder.addInterceptor(FlipperOkhttpInterceptor(it.getPluginByClass(NetworkFlipperPlugin::class.java)))
    }
}

Flipperの所感

とても良いところ

Chrome Developer Toolsでアタッチする必要がない
(Stethoだとインストール時に毎回選択する必要があるしクラッシュすると通信情報が見えなくなる)
レスポンスのHeader/Request/Responseが一体となっていてわかりやすい
Flipperアプリ単体でadbのログがみれる