Dart DevToolsの使い方

Flutter

ウィジェットを並べていくFlutterは、ウィジェットのネストが深くなりがち。
どのウィジェットのHeight指定がうまくいってないの…？🤔を確認したくなった時とか、ウィジェットの構造を確認したくなった時に便利なのがDart DevToolsです。

DartDevTools - Getting Started

Android StudioとVS Codeと、それぞれ説明されていますが、わたしはVSCodeをメインに使っているのでVSCodeのやり方を書いていきます。

DevToolsのインストール、立ち上げ

VSCodeからエミュレータを起動(F5)するとこんなメッセージが出てきます(DevToolsがインストールされていない初回のみ)。

Dart DevTools need to be installed
with 'pub global activate devtools' to use this feature.

DevToolsを使うにはpub global activate devtoolsでインストールしてね、と言われるので、「Activate Dart DevTools」をクリックするとflutter packages getが走ってDevToolsをActivateしてくれます。

しばらく待つとhttp://127.0.0.1:58696/?hide=debugger&port=57931のようなアドレスでブラウザが立ち上がり、ウィジェットツリーをブラウザから確認することができます。

DevToolsが立ち上がらなかった時

なんらかの原因でDevToolsが立ち上がらなかった時は、VSCodeから直接コマンドで立ち上げることができます。

$ flutter packages pub global activate devtools

ポート番号がわからなくなった時

URLはhttp://127.0.0.1で固定ですが、ポート番号は動的に振られてセッションが変わる度(アプリを再起動する度)に切り替わります。
ポート番号がわからなくなった時はVSCodeのステータスバーにある「Dart DevTools」の文字をクリックすると、ブラウザでDevToolsが立ち上がります。

DevToolsの使い方

直感的に使えるUIですが、よく使う機能を少しだけ。

  • Debug Paint
    オンにするとウィジェットの枠線を引いたり、mainAxisAlignmentの向きを表示したりしてくれます。
    モック作りではおそらく一番使うところ。

  • Select Widget Mode
    オンにすると、ブラウザでウィジェットを選択することでエミュレータのウィジェットも選択することができるようになります。
    Chromeのデベロッパーツールで要素を選択できるのに似ているイメージ。

  • Refresh Tree
    エミュレータはホットリロードが効きますが、DevToolsはホットリロードが効かないので手動でリロードするためのボタン。
    Navigator.pushなども反映されないので画面遷移した時も同様にリフレッシュする必要があります。

注意点としては、stackされているScaffoldが全てツリー表示されるので、違うウィジェットツリーを見ながら「あれ？ない？？🤔」となりがちなこと。
ありがちなミスだと思うのでお気をつけて、快適なFlutter開発をお楽しみください！🎉