Closed15

VSCode の Flutter デバッグ機能を使ってみる

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

コマンドラインから起動

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 を開くことができる

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

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 の画面が表示される

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

できれば 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..

再起動したら解消した、ありがとう下記の記事

https://techgrowup.net/2021/11/19/vscode-error-loading-webview/

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

Inspectorの機能2:mainAxisAlignment などを変更できる

Outline で Row や Col を選択してから Layout Explorer タブを操作する

crossAxisAlignment を操作しようとするとエラー停止してしまう

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

Inspector の機能4:Inspector を1クリックで起動する

アイコンボタンが並んでいるバーの一番右にある Flutter in 虫眼鏡のアイコンを押す

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

Inspector の機能5:Visual Debugging

Web ブラウザの方からガイドラインやベースラインの表示ができる

今のところ VSCode から使う方法はわからない

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

Outline の機能:Center や Column でラップする

VSCode の左側から Flutter のアイコンを選んで右クリックする

電球アイコンをクリックするともっと様々なことができる

こんな便利な機能があったとは知らなかった

薄田達哉 / tatsuyasusukida薄田達哉 / tatsuyasusukida

Performance view とは

色々触ってみたが現状では何が何を意味しているのかがよくわからないので、パフォーマンス改善にはこれらの学習が必要そう

パフォーマンスと最適化については公式ドキュメントに関連ページが何ページもある

プロファイリングについては下記のページ

https://docs.flutter.dev/perf/ui-performance

必要になった時に思い出して勉強しよう

このスクラップは2023/01/10にクローズされました