Stethoを使ってFlutterアプリのデバッグをする

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マージしてくれないかな。。

以上です。