狐好きぷろぐらまー

狐好きプログラマー見習いのブログです。

【Flutter】デバッグ中にSQliteのテーブルの中身を見る【flutter_stetho】

こんにちは。 pregum_foxです。

今回はFlutterでStethoを使って、sqliteのテーブルの中身を見たいと思います。

目次です。

動作環境

項目 バージョン
Dart 2.4.0
Flutter 1.7.8+hotfix.4

エディタはVS Codeを使用しています。

Stethoとは

Stetho is a sophisticated debug bridge for Android applications. When enabled, developers have access to the Chrome Developer Tools feature natively part of the Chrome desktop browser. Developers can also choose to enable the optional dumpapp tool which offers a powerful command-line interface to application internals.

https://github.com/facebook/stetho から引用

以下はgoogleの日本語訳です

Stethoは、Androidアプリケーション用の洗練されたデバッグブリッジです。有効にすると、開発者はChrome開発者ツール機能にChromeデスクトップブラウザーのネイティブ部分にアクセスできます。開発者はdumpapp、アプリケーション内部への強力なコマンドラインインターフェイスを提供するオプションツールを有効にすることもできます。

上記に書いてある通りStethoを使用することで、Chrome DevToolsを介して、ネットワーク通信している内容やDBが見ることができるようになります。

FlutterでStethoを使用できるパッケージを探していると、flutter_stethoがありました。
現時点(2019年09月11日)のflutter_stethoの最新バージョンは0.4.1ですが、上記のFlutterのバージョンでは0.3.0を使用する必要があります。
詳細はこちらInstall the pluginの項目をご覧ください。
というわけで、今回は0.3.0で導入しています。

flutter_stethoプラグイン導入手順

導入手順はこちらに沿ってやればできました。
その時の手順を以下に記載します。

  1. 導入するFlutterのプロジェクトを開きます。(ない場合はflutter new projectコマンドを叩いて新規プロジェクトを作成し、そのプロジェクトを開いてください。)
  2. pubspec.yamlflutter_stetho: ^0.3.0を追加します。
    f:id:pregum_fox:20190912003201p:plain
    flutter_stetho追加
  3. mian.dartの頭にimport 'package:flutter_stetho/flutter_stetho.dart';を追加
  4. エントリポイント(main())の最初にStetho.initialize();を追加します。
    f:id:pregum_fox:20190912003634p:plain
    flutter_stethoパッケージ追加とstethoの初期化

以上でflutter_stethoの導入は完了しました。
次は、実際にStethoを起動してみます。

Stethoの起動方法

Stethoを起動するにはChrome DevToolsを使用します。
Chromeを起動しアドレスバーにchrome://inspectと入力しEnterを押下すると、Chrome DevToolsが起動します。

f:id:pregum_fox:20190912003853p:plain
Chrome DevTools画面

この状態で、先程flutter_stethoを導入したプロジェクトを実行します。
すると、下記のように実行中のアプリが表示されますので、inspectをクリックします。

f:id:pregum_fox:20190912004143p:plain
アプリ表示画面
そうすると、Stetho用の画面が表示されます。
f:id:pregum_fox:20190912004232p:plain
Chrome DevTools
これで、Stethoが起動することを確認できました。
次に本題であるDBの中身を見てみます。

DBの中身の確認方法

次にDBの中身を確認してみます。
ここではSQliteを使用します。
flutterでsqliteを使用する為にsqfliteを使用しました。
stetho用のDBを操作するサンプルコードを書きましたが、ここ載せると、長くなったので以下のgistにmain.dartとpubspec.yamlを配置しました。

hatena blog用 (flutter_stethoでDBの中身を見る) · GitHub

上記のpubspec.yamlとmain.dartを新規プロジェクトの物と置き換えたらすぐ動かせると思います。
動作させた時のStethoの動きをgifで貼っておきます。

f:id:pregum_fox:20190912005309g:plain
steho_demo

DBで中身を見るときの注意点

flutter_stethoでDBの中身を見る時に気を付けておく点が一つあります。
それは、DBのファイルパスの前にdatabases/をつける事です。
もしdatabases/をつけないでデバッグするとDBの中身を見ることができません
上記のgistのmain.dartではdatabases/をつけていますが、databases/を削除後hot restart後データを追加してもstethoには反映されていないことが分かります。

参考URL : https://github.com/tekartik/sqflite/issues/65

f:id:pregum_fox:20190912010905p:plain
databasesを消した場合

雑感

まだDBしか試していませんが、stethoはとても強力なデバッグ用ツールだなと思いました。
次はflutter_stethoのREADME.mdを参考にネットワーク通信のデータを見てみたいと思いました。
またstethoについて調べている最中にiOSでも使えるfacebook/flipper(以前はSonarという名前だったらしい)を見つけ、flutter用のパッケージがあるか探してみると見つかったのでこちらについても少し調べてみようかと思います。

ここまで、読んで頂きありがとうございました。

参考サイト