Flutterアプリを開発していてAPIのJsonレスポンスを見やすく改行して出力する方法を探していたのでメモとして残します。
普段はhttpclientにdioを使っていますが、dioでレスポンスなどをログ出力しなくてもかなり見やすく開発することができます。
今回使ってみたのはこちらのflutter_stethoというプラグインです。
Androidのみ対応しているので注意してください。
導入
pubspec.yaml に以下を追記します
dependencies:
flutter_stetho: ^0.2.2
※ 2019/07/15時点ではプラグインの実装がflutter 1.7に対応していないため
既に1.7にバージョンアップした人は修正済みのブランチを指定する必要があります。
flutter_stetho:
git:
url: https://github.com/vanelizarov/flutter_stetho.git
ref: flutter-1.7.8-compatibility
使い方
runApp()
する前にStetho.initialize()
を書くだけでStethoのデバック準備は完了です。
void main() {
Stetho.initialize();
runApp(FlutterStethoExample(
client: http.Client(),
));
}
chromeのURLバーからchrome://inspect
を開いてアプリ名のinspect
をクリックします。
あとはchromeのデバックツールが開くので画像やAPIのヘッダーやレスポンスなどを表示することができます。
デバッグコンソールにログ出力しているとログが増えて、本来みたいログが見えないといったことがでてくるのででこういったツールを使うとより開発が楽になりそうです。
早くflutter1.7対応したPRマージしてくれないかな。。
以上です。