こんにちは、Androidエンジニアの牧山（@_rmakiyama）です。
Radiotalkでは、特にAPI通信周りの確認にokhttp3のlogging-interceptorを使っていました。
どのエンドポイントを呼び、結果がどうだったかなどを確認する上では十分だったのですが、細かくレスポンスの中身を見たい、APIの呼ばれた順序をひと目で確認したいというニーズが高まりました。
タイミングよく、DroidKaigi 2020 - 1から学ぶAndroidアプリデバッグ - アプリの動作を追いかけよう / Yoshihiro Wada [JA]の発表を見て、デバッグツールの便利さを改めて知り、Flipperを採用したのでご紹介します。
Flipperとは
公式から引用すると
Flipper is a platform for debugging iOS, Android and React Native apps. Visualize, inspect, and control your apps from a simple desktop interface. Use Flipper as is or extend it using the plugin API.
つまり、モバイル用のデバッグツールです。Android専用ではないところが驚きでした。
ちなみにiOSでは物理デバイスのサポートはされていないようなので、RadiotalkではiOSでの導入は見送りました。
他の選択肢
他にもstethoやHyperion-Androidなどがあります。
今回は主にNetwork周りのデバッグを楽にしたいというニーズと、比較的導入が簡単なFlipperを選びました。
Flipperを導入して良かったところ
まずは導入方法の前に良かったところを。
ネットワーク通信のログをLogcatを探らず見れる
どのエンドポイントにリクエストしてレスポンスが何かをGUIで簡単に見れて素敵でした。 一覧性があるのでどの順番で呼んだかなども見やすくなりました。
API呼び出し一覧
|
APIレスポンス
|
Roomデーターベースの中身が覗ける
デバッグのときはかなり便利。クエリも書けちゃいます。
SharedPreferenceの中身が覗ける
Android Studio上からも見れますが意外と面倒ですよね…これも便利です。値の変更もできます。
Flipper導入方法
公式のSet up your Android appに沿って説明していきます。
今回は紹介したNetworkプラグインを含めた導入方法になります。
Dependencies
複数のビルドバリアントが存在する場合は各バリアントに合わせた依存を定義します。
debugImplementation "com.facebook.flipper:flipper:${versions.flipper}"
debugImplementation "com.facebook.soloader:soloader:${versions.soloader}"
debugImplementation "com.facebook.flipper:flipper-network-plugin:${versions.flipper_network}"
stagingImplementation "com.facebook.flipper:flipper:${versions.flipper}"
stagingImplementation "com.facebook.soloader:soloader:${versions.soloader}"
stagingImplementation "com.facebook.flipper:flipper-network-plugin:${versions.flipper_network}"
releaseImplementation "com.facebook.flipper:flipper-noop:${versions.flipper}"
Application Setup
releaseImplementationで'com.facebook.flipper:flipper-noop'を入れましたが、プラグインに関してはnoopを提供しない予定なようなので、リリース版とその他版でApplicationをわけるのが良さそうです。
本番のApplicationをopenクラスにしつつ
open class App : DaggerApplication() {
override fun onCreate() {
super.onCreate()
// setups...
}
他のバリアントでは、元のApplicationを継承しつつFlipperをセットアップしましょう。
class DebugApp : App() {
override fun onCreate() {
super.onCreate()
initializedFlipper()
}
private fun initializedFlipper() {
SoLoader.init(this, false)
if (BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(this)) {
val client = AndroidFlipperClient.getInstance(this).apply {
addPlugin(NetworkFlipperPlugin())
addPlugin(SharedPreferencesFlipperPlugin(this@DebugApp))
addPlugin(DatabasesFlipperPlugin(this@DebugApp))
}
client.start()
}
}
}
Diagnostics
公式のとおりこちらも追加しておきます。
<activity android:name="com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity"
android:exported="true"/>
Enabling plugins
公式サイトからデスクトップアプリケーションをダウンロードして、追加したプラグインを有効にすれば完了です！