Flutter プログラミング

FlutterのDevToolsを使ってみた




Flutterで開発始めようかなぁ
もっと便利なプラグインないのかなぁ

と思っていたら、DevToolsという開発者ツールがあるというじゃないですか。
便利そうなので導入しようとしたら若干つまずいたのでメモ。

事前準備

Flutterの環境作成はこちら。

Windows + VSCodeでFlutter環境作成

会社でSwiftUIがなんちゃらと言ってるんですけど、私のところにmacはない。 じゃあ自宅にmac買う? とググってみると、好きでもないのに誰が買うかぁー!!というお値段。 ほんとmacって高いです ...

続きを見る

Visual Studio Codeの使用を前提に説明します。

DevToolsとは

DevToolsはDartとFlutterの開発者ツールです。
公式サイトによると

  • FlutterアプリのUIレイアウトと状態を調べる
  • FlutterアプリのUIジャンクパフォーマンスの問題を診断する
  • FlutterまたはDartコマンドラインアプリのソースレベルのデバッグ
  • FlutterまたはDartコマンドラインアプリでメモリの問題をデバッグ
  • 実行中のFlutterまたはDartコマンドラインアプリに関する一般的なログと診断情報を表示する

ができるとのこと。

DevTools起動手順

デバッグモードにする

main.dart表示中にF5を押してデバッグモードを開始します。
エミュレーターを起動していない場合はエミュレーターの選択画面が表示されます。
使用する端末を選んでください。

  • 画面上にデバッグ用のツールバー表示
  • フッターの色がオレンジ

となったらOKです。

DevToolsを起動する

F1を押してdart dev などと入力するとDevToolsが出てきます。

初回 or DebToolsが更新された場合はこんなメッセージが出てくるので、Activateをクリックします。

ブラウザでDevToolsが起動します。

DevToolsの機能

Flutter インスペクター

Flutter Inspectorはウィジェットの構造を視覚的に確認できるツールです。
さらに確認したところ、ツリーで要素を選ぶとEditor側で該当の行にカーソルを移動してくれました。

ColumnをクリックするとEditor側もColumnの開始行に

ScaffoldをクリックするとScaffoldの開始行にそれぞれ移動します。

画面の右側ではさらに要素の詳細な構成が確認できるようになっています。

ウィジェットモードの選択

Select Widget Modeを有効にすると、エミュレーター上で要素が強調表示されるようになります。

メニュー一番右のアイコンをクリックするとDevToolsのalpha版が開きます。
alpha版だと、flex widgetを使っている場合にいろいろできるみたいです。
※サンプルソースはflex widgetがないので未確認

他のウィジェットでも使えるようになるかも、ということなので開発待ちですね。

ツリーを更新

ソースを更新した場合はRefresh Treeを押すとFlutter Inspectorも更新されます。

デバッグペイント

Debug PaintをONにすると、margin、padding、レイアウトの配置などが視覚的に見れます。
例えば右下のボタンはCenterを指定していますが、黄色の矢印で+が中央寄せになっていることがわかります。

デバッグモードバナー

Debug BannerはデフォルトでONになっていると思います。

こいつ邪魔だなぁってことで、debugShowCheckedModeBannerを追加してOFFにしてる人もいると思うのですが

実はDevToolsでDebug BannerをOFFにするだけで非表示になります。

その他機能

その他機能についてはこちら

Timeline

公式によると

  • フレームレンダリングチャート
  • フレームイベントチャート
  • CPUプロファイラー

を見れる機能とのこと。
さっそくTimelineをクリックしてみると…。
--profileを付けて起動しなおせとのこと。

やってみたら、エミュレーターは非対応だと。。。

仕方ないので、Android実機をつないでみます。
※Androidで開発アプリを使う方法はこちらを参照
※Android Studio>SDK ToolのGoogle USB Driverが必要です
※iPhoneはmacが必要な気がする

端末を接続する

画面右下に端末名が表示されることを確認。

--profileを付けて実行してみると…失敗。
エミュレーターが起動している場合は端末名を指定するかallを付けろとのこと。

端末IDは先ほどのメッセージの中に表示されているので、-d オプションを付けて再実行。
今度は通りました。

大事なのはこの行

最後にURLが書いてあるのでこれをコピー。
DevToolsを更新するとTimelineの画面にこんな画面が出てくるので、URLを入力してConnectボタンをクリック。

無事見れるようになりました!
これが何を表しているかはこちらを参照。

メモリビュー

こちらも実機必須の機能。

  • メモリ概要チャート
  • イベントタイムライン
  • スナップショットクラス
  • クラスインスタンス

が見れます。
詳細はこちら

Memoryをクリックするとこんな画面が出てきます。
ボタンをタップしたときにメモリ使用量が上がっているのがわかりますね。

パフォーマンスビュー

CPUの処理を分析してパフォーマンスを計測するとのこと。
こちらも実機必須です。
詳細はこちら

performanceをクリックするとこんな表示。
これは詳しく調べないと、意味がよくわかりません。。。

デバッガー

DevToolsのDebuggerをクリックすると

VSCodeでデバッグできるからそっちを使いなさいってことらしい。
Android Studio or VSCodeを使わない開発をする場合は有効になるのかも。
わざわざ他のツールで開発するメリットってあんまりない気がしますけど。

ロギングビュー

アプリケーションレベルのロギングイベントを出力するとのこと。
詳細はこちら

Loggingをクリックするとこんな画面が出てきます。
試してないけど、WEB API叩いたりしたときにresponse表示できたりするのかな。
そのうち確認します。

DevToolsはなかなか便利…かも?

インスペクターで構造見れるのはすごい便利かも。
Xmlでレイアウト組まないと全体把握できなくない?って思ってたけどこれで解決ですね。

メモリやCPU周りは知識ないと厳しいけど、アプリが重いときに解析するのが楽になりそう。

Androidが出始めたころは

画面キャプチャー撮るのにもUSBつないで…。
PCでキャプチャ撮ったらなぜが画面が反転してたり…。
色がピンクになってたり…。

という今思うと意味が分からない苦労をしてたものですが、10年ちょっとでかなり洗練された感があります。
DevToolsもまだまだこれから開発が進むようなので楽しみですね。

-Flutter, プログラミング
-, , ,

Copyright© そんなこと猫でもできる , 2020 All Rights Reserved Powered by AFFINGER5.