Flutter DevTools の仕組み 学習メモ
はじめに
筆者は2年ほど Flutter を趣味でいじるところから始め、現在では個人でのウェブアプリなどの開発に使用しております。何よりマルチプラットフォームであることと UI の綺麗さには感動しております。
そんな Flutter ですが、少し前に Flutter DevTools という Flutter の UI などのデバッグができる便利なものがあることを知り、VScode で最近使い始めています。使っているうちに「そう言えば DevTools ってどうやって実行されているのだろうか」と思うようになりました。今回、その疑問を解決すべく調査や考察を通して得られた知見をメモとして残します。なお、アプリ用に使われる Flutter DevTools の調査を行いました。Chrome 版の調査はまた今度にとっておきたいと思います。
記事の構成
- DevTools ドキュメントについて
- Flutter のレンダリングについて
- Flutter Engine について
- DevTools コードの解析
- DevTools について主要部分の各フォルダの概要
- 資源の使用量などの情報取得の方法
- 開発者として使う
- まとめ
DevTools ドキュメントについて
公式ドキュメントに使い方や概要について書かれていたので、まずはこちらを読んだものをまとめます。
ドキュメントでは Flutter DevTools とは Dart と Flutter での開発におけるデバッグやパフォーマンスの確認を行うツールであるとまとめておりました。
DevTools is a suite of performance and debugging tools for Dart and Flutter.
DevTools によって Flutter の UI やパフォーマンス、そしてどのウィジェットがどのような処理を行っているのか（重くなっていないかなど）を分析できます。他にもネットワークや CPU 使用率、コードやアプリのサイズの確認などを行えます。これによって例えば意図していないウィジェットが前に表示されたり、FPS が非常に遅い場合にどのウィジェット、またどのロジックが原因になっているか確認でき、非常に便利です。
Here are some of the things you can do with DevTools:
- Inspect the UI layout and state of a Flutter app.
- Diagnose UI jank performance issues in a Flutter app.
- CPU profiling for a Flutter or Dart app.
Network profiling for a Flutter app.- Source-level debugging of a Flutter or Dart app.
- Debug memory issues in a Flutter or Dart command-line app.
- View general log and diagnostics information about a running Flutter or Dart command-line app.
- Analyze code and app size.
Flutter のレンダリングについて
Flutter DevTools についての概要を確認したところ、CPU やメモリの使用率などのハードウェア資源だけでなく、UI の設計を行うレンダリングと大きく関わってくることが書かれておりました。Flutter のより深い知見を得るために Flutter SDK について別途で調査しました。こちらの記事にメモを記載しました。
そこでの調査内容に関しましてはここでは深く取り上げないのですが、大まかな結論のみを記載します。
- Flutter SDK は Framework、Engine、Embedder に分割されている
- Framework ではウィジェットツリーやウィジェット単体の構築を行う
- Engine では dart-vm との通信や描画を行う
- Embedder では OS に近い処理を行う
DevTools コードの分析
ここで DevTools に関しての概要、また Flutter を取り巻く技術について調査してきたことをまとめたので、これから DevTools のコードを実際に見てみて、得られた知見について書かせていただきます。
DevTools のフォルダ概観
Flutter DevTools の大まかなフォルダ構成はこのようになっています。
各フォルダについての説明は以下の通りです。
- bin
repo_tool という flutter pub get を実行するファイルがあるフォルダです。 - package
devtools_app やこれをテストするためのコードが含まれているフォルダです。 - third_party
外部のライブラリを使用したもので、UI や色使いなど、見た目に関するパッケージが多い印象でした。 - tool
flutter のアップデートやリフレッシュ、その他のコマンドの実行をツール化したフォルダです。 - docs
package / devtools_app に含まれる機能の一覧に関するドキュメントが保存されています。
実際に使われるのは package フォルダの devtools_app で、機能の本髄に関わるコードの含まれている src 内部はこのようになっています。
このように、フォルダの構成がしっかりしております。
DevTools について主要部分の各フォルダの概要
ここでは DevTools の本筋である機能に関するコードの大まかな構成や機能について紹介したいと思います。
- framework
- 画面に表示されないもので、UI に関わってくる関数やウィジェットなど
- screens
- デバッグ画面の UI についてのウィジェットや関数など
- service
- vm_service との通信に関する関数など
- shared
- screens などに使われるものを集めたもの（内部で複数回使用するもの）
このように、UI と処理で分割されており、それぞれを組み合わせて最終的なアプリにしております。
資源の使用量などの情報取得の方法
色々と調査してみたのですが、どのように DevTools で情報を取得しているのか書かれた記事がなかったため、コードを分析してみました。多少の解釈違いはあるかと思いますが、大まかな流れとしてご覧ください。
DevTools 単体で資源量の使用量を取得するわけではなく、Dart VM に備わっている情報取得のプログラムを経由します。dart-lang/sdk/pkg/vm_service/lib/src に vm_service.dart があり、ここで getCpuSamples や getMemoryUsage によって json 形式で取得します。その前に VmServerConnection によって dart を実行する dart-vm を起動します。この時に通信を確立した際に、通信の情報をリッスンします。ここで getCpuSamples などの関数を実行することで json 形式で dart-vm からメモリなどの情報を得ることができます。
DevTools ではここで受け取った情報を元に json ファイルをパースして、必要な情報を抽出します。これを見やすくタイムラインなどを用いてサンプルを取っていき、最終的にユーザが見やすい状態にしてユーザに表示します。
開発者として使う
これまで DevTools についての説明を行ってきたのですが、実際に開発の場面で使えるのでしょうか？アプリを開発する際に使ってみたので、感想を交えながら開発でどのように使えるか手短ながら解説しようと思います。
簡易的な計算機アプリを作成しました。仕様などは省かせていただきますが、高級なウィジェットを使っていないため、全体の動作はスッキリしていました。実際に Flutter DevTools を使うとメモリ消費量、CPU 消費率ともに少なく、特に困ることはありませんでした。
これらを通して、かなり重いアプリケーションに取り組まない限り、DevTools を有効的に使えることは少ないかもしれないと結論づけました。あくまでもFlutter 単体でどれほど全体に影響を与えるのか、どのウィジェットにリソースが最も裂かれているのか、そういったことを調べる際に DevTools を使うと一番良いのではないかと思いました。
まとめ
今回 DevTools の調査（≠ Flutter SDK の調査）を通して主に以下のことを学びました。
- Flutter DevTools ではコードのインスペクタ、資源使用量の調査などを行なっている
- DevTools が実現できるのは、低いレイヤ（Engine）と通信を行うため
- 資源の使用量は Dart-VM を通して取得している
そして、全体のコードを分析する際に、非常に構造化されていて、名前も分かりやすかったため、調査が非常にスムーズに進みました。それで今回分析したコードのメモなどをさらに分析して、いつか綺麗なコードを書くにはどうすれば良いかまた調査したいと思います。
今回は全体の調査で終わってしまいましたが、今後はこれらについて自分で再現するための実装や、VM との接続などもしていければと思っています。また、Web ではブラウザが Engine と Embedder の役割を果たすため、DevTools も少し変わってくるのではないかと考えております。今回の学習メモの解釈が新しくなるか、より詳細な情報を調べましたらまた更新いたします。
Discussion