2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-07-15

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をクリックします。

Screen Shot 2019-07-15 at 19.57.19.png

あとはchromeのデバックツールが開くので画像やAPIのヘッダーやレスポンスなどを表示することができます。
デバッグコンソールにログ出力しているとログが増えて、本来みたいログが見えないといったことがでてくるのででこういったツールを使うとより開発が楽になりそうです。

Screen Shot 2019-07-15 at 19.58.03.png

早くflutter1.7対応したPRマージしてくれないかな。。

以上です。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?