【Android】デバッグツールライブラリFlipperを使ってみました


こんにちは、mukaiyachiです。
最近やることが沢山あって疲れ気味なので、新しいライブラリを使い始めました。

使い始めたライブラリは「Flipper」です。
アプリ開発に便利なツールを使うことが出来るようになるライブラリです。

例えば、アプリ内データベースのデータやSharedPreferencesに保存している値の確認が出来ます。
これまではそういった確認は、同じ様な機能を備えたStethoというライブラリを使用していました。

▼Stetho

Chrome Developer Toolsを使用して、Chrome上でデバッグしているアプリのネットワーク、SQliteデータベース内のデータ、SharedPreferencesの値など確認出来る。
Facebookが開発している。

Download
Stetho is a sophisticated debug bridge for Android applications. When enabled, developers have access to the Chrome Developer Tools feature natively part of the...

FlipperもStethoと同じくFacebookがが開発しているライブラリです。
大きな違いは以下のようなものです。

▼Flipper

■専用のアプリを使用。(現在はMac用しかありません)
・Stethoは実行する度にChrome Developer Toolsで接続する必要があり、これが結構面倒だった。
■AndroidだけでなくiOSにも対応。
■プラグインを追加して機能を拡張出来る。

Flipper · Extensible mobile app debugging
Extensible mobile app debugging

StethoがあるのになぜFlipperを作ったのか、Flipperのサイト内にあるStethoガイダンスというページに以下のように書かれていました。
「StethoはAndroid専用、またChrome Developer ToolsはWeb開発用なので、出来ることに制限があるし、もっとモバイル開発向けのツールを作りたかったから。」

ただ今後もStethoの提供は続けていくそうなので、Flipperと使い分けていくと良さそうです。

▼導入方法

こちらのドキュメントを見ながら行いました。
Getting Started

1、デスクトップアプリのインストール

https://www.facebook.com/fbflipper/public/mac
※アプリは現在macOS用しかありません。

2、AndroidManifest.xmlにパーミッション、Activityの追加

3、build.gradleの変更

app/build.gradleに追加。

またJava 8機能を有効にしないとビルド時エラーが発生するので、オプションを追加します。

※あとプロジェクト直下のbuild.gradleに以下が無い場合は追加します。

4、Application継承クラスの変更

※もしAndroidManifest.xmlのApplicationタグのname属性にApplicationクラスを指定していない場合は追加が必要です。

onCreate()メソッドに以下を追加します。

5、プラグインの追加

今回はデータベースの中身をFlipper上で確認してみます。
Databases Plugin Setup

 

あとはアプリ内データーベースにデータを追加すれば確認できます。

Flipperではこんな画面で確認できます。
データベースやテーブルは上部のドロップダウンで切り替えます。
Refreshボタンを押せばアプリから更新したデータが反映されます。

データの中身はもちろん、データベースの構造も確認することができます。

Stethoを使ったことのある方だとわかるかと思いますが、やはり実行するたびにChrome Developer Toolsで接続を行わなくて良いので楽です。

ただちょっと惜しいと思ったのは、デスクトップアプリは起動中のままで、Androidアプリの再実行してデータベースのデータを変更した際の動きです。
この場合、一度Logsなどの別メニューを表示して、再度Databaseメニューを見ないと変更が反映されないので今後改善されたらと思いました。

他にも以下のような機能があるとの事なので活用していきたいです。

■SharedPreferences(iOSはUserDefaults)の値を確認、編集
■画像のキャッシュ状況確認
(FrescoというFacebookが開発している画像用ライブラリを使用している場合)
■Viewの階層を確認
■ネットワーク上の通信内容確認
■LeakCanaryというメモリリーク検出ライブラリで検出したメモリリークを表示
■Flipperでデバッグしたデータのエクスポート、インポート
■Flipperアプリでスクリーンショット、動画を撮ることが出来る
などなど。

他にも便利なツールがあればお気軽に教えてください。


コメント