VSCode の Flutter デバッグ機能を使ってみる
はじめに
このスクラップでは下記3点の VSCode の Flutter デバッグ機能を使ってみる
- Inspector
- Outline
- Performance
Flutter 公式ドキュメントの DevTools のページが参考になる
コマンドラインから起動
flutter run
を実行する
$ flutter run
Launching lib/main.dart on Pixel 5 in debug mode...
Running Gradle task 'assembleDebug'... 6.4s
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Syncing files to device Pixel 5... 167ms
Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
💪 Running with sound null safety 💪
An Observatory debugger and profiler on Pixel 5 is available at:
http://127.0.0.1:65045/AH4QroZkvO8=/
The Flutter DevTools debugger and profiler on Pixel 5 is available at:
http://127.0.0.1:9102?uri=http://127.0.0.1:65045/AH4QroZkvO8=/
E/SurfaceSyncer( 5256): Failed to find sync for id=0
W/Parcel ( 5256): Expecting binder but got null!
上記の例では http://127.0.0.1:9102?uri=http://127.0.0.1:65045/AH4QroZkvO8=/ にアクセスすると DevTools を開くことができる
適当な Flutter アプリの作成方法
flutter create hello_debug
cd hello_debug
flutter run
VSCode で実行した場合
VSCode の DEBUG CONSOLE のエリアに下記のように表示される
Launching lib/main.dart on Pixel 5 in debug mode...
lib/main.dart:1
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Connecting to VM Service at ws://127.0.0.1:64857/W_08T-y51uA=/ws
の ws://127.0.0.1:64857/W_08T-y51uA=/ws を控えておく
下記のコマンドを実行して DevTools を起動する
$ dart devtools
Serving DevTools at http://127.0.0.1:9100.
Hit ctrl-c to terminate the server.
URL を入力してから Connect ボタンを押す
接続に成功すると Inspector の画面が表示される
できれば VSCode のインスペクターを使いたい
F5
または Cmd + Shift + P
を押してから Debug: Start Debugging
+ Enter
を入力してデバッグを開始する
それから Ctrl + Option + D
お押すか Dart: Open Devtools
を実行すると DevTools が開くはずだが下記のエラーが表示される
Error loading webview:
Error: Could not register service workers:
InvalidStateError: Failed to register a ServiceWorker:
The document is in an invalid state..
再起動したら解消した、ありがとう下記の記事
Inspector の機能1:ウィジェットのプロパティがわかる
Outline でウィジェットを選択してから Widget Details Tree タブを選択する
Inspectorの機能2:mainAxisAlignment などを変更できる
Outline で Row や Col を選択してから Layout Explorer タブを操作する
crossAxisAlignment を操作しようとするとエラー停止してしまう
Inspector の機能3:左上の矢印アイコンを押すとガイドが出るので便利
Inspector の機能4:Inspector を1クリックで起動する
アイコンボタンが並んでいるバーの一番右にある Flutter in 虫眼鏡のアイコンを押す
Inspector の機能5:Visual Debugging
Web ブラウザの方からガイドラインやベースラインの表示ができる
今のところ VSCode から使う方法はわからない
Outline の機能:Center や Column でラップする
VSCode の左側から Flutter のアイコンを選んで右クリックする
電球アイコンをクリックするともっと様々なことができる
こんな便利な機能があったとは知らなかった
この使い方は思いつかなかったです!
とても参考になりました。
コメントありがとうございます!
そのように言っていただけて嬉しいです😄
Performance view とは
色々触ってみたが現状では何が何を意味しているのかがよくわからないので、パフォーマンス改善にはこれらの学習が必要そう
パフォーマンスと最適化については公式ドキュメントに関連ページが何ページもある
プロファイリングについては下記のページ
必要になった時に思い出して勉強しよう
おわりに
以上で一旦クローズ、次は Cupertino Widgets を使ってみる