ゼロからはじめるDart Dev Tools入門(VS codeを使って

最近Flutterを触りはじめました、タガミショウゴです。

Dartってどうなん？

Googleがつくったから好き、が一番多いってどないやねんというツッコミはなしです。

とにもかくにも、Dartは好き嫌いが別れる言語です。周りのエンジニアにも「Flutterはやってみたいけど、Dartはクソ」みたいな意見があります。

実際に使ってみた感想としては、

です。

Flutter&Dart と仲良くするコツはDart Dev Toolsを使いこなすこと、も大切な一つだと感じました。

フロントエンドエンジニアがGoogle Chrome Dev Toolsとにらめっこするのと同じイメージ。

VScode以外のエディタを使われている方はごめんなさい。

適当なFlutterアプリケーションを用意します。今回はQuizアプリをもとに。

⌘ + Shift + P から、 'Dart DevTools' と入力すると以下のように予測変換されるはず。

初めはVScode右下に「インストールしますか？」と確認ダイアログが出るので、そのままインストールします。

そのまま進めば、Webブラウザで

http://127.0.0.1:9100

でDart Dev Toolが開く。何やら黒い画面。

手元で最初試したときロード中の画面から切り替わらず(なんやこれ？)となりました。

が、画面リロードしたら直りました。もしダメなら一度VScodeから再度 Open DevToolsしてみてください。

DevToolsを開いたら、VScode > 実行 > デバッグの実行でシミュレーターを起動しましょう。

すると、DevToolsが表示されます。

Dart DevToolはそのアプリケーションのデータ構造をツリー状に表示してくれます。

例えば、TextWidget一つとってもこのように

アプリケーションのデバッグ中にエラーで詰まった際に、データ構造、Widgets構造をチェックするときに重宝します。

コードを書きながら、DevToolsを更新したい場合は、画面左上の「Refresh Tree」で更新されます。ここだけはホットリロードが効きません。

Slow Animation これをONにして、デバッグを実行すると、アニメーションがゆっくりと動きます。細かい挙動を確認するのに使えます。

Debug Paint シミュレーター上に描画ポイントを表示してくれます。またWidget名も出るようになりました。

Repaint Rainbow そのWidgetが何回描画されたか、を色で表示してくれます。