flutter-devtools

Flutter DevTools とビジュアルデバッグ

Flutter で UI、パフォーマンス、メモリリークを効率的にデバッグするには、DevTools スイートを使いこなし、フレームワークレベルのデバッグプロパティを活用する必要があります。

目次

• DevTools への接続
• ビジュアルデバッグフラグ
• カスタムウィジェットの診断 (debugFillProperties)
• パフォーマンスとメモリのプロファイリング

---

DevTools への接続

実行中の Flutter アプリケーションに対して DevTools を起動し、接続します。

1. CLI 経由: ターミナルで flutter devtools を実行して、DevTools Web アプリケーションサーバーを起動します。
2. IDE 経由:
   • VS Code では、コマンドパレット (Cmd+Shift+P) を開き、Dart: Open DevTools を選択します。
   • Android Studio では、実行/デバッグツールバーの Flutter DevTools アイコンをクリックします。
3. 実行モード:
   • Inspector、Network、Logging タブにはデバッグモードを使用します。
   • パフォーマンスとメモリのプロファイリングにはプロファイルモード (flutter run --profile) を使用します。VM のオーバーヘッドがあるため、デバッグモードでパフォーマンスをプロファイリングしないでください。

---

ビジュアルデバッグフラグ

これらの実行時プロパティを切り替えると、エミュレーター/デバイス上でレイアウトとレンダリングのパフォーマンスを視覚的に診断できます。

これらのフラグにアクセスするには、レンダリングライブラリをインポートします。

import 'package:flutter/rendering.dart';
import 'package:flutter/foundation.dart';

主なデバッグフラグ

フラグ	目的	用途
debugPaintSizeEnabled = true	レイアウトボックス、マージン、パディング、アラインメントを可視化します。	パディングの位置ずれやサイズの問題を特定するため。
debugRepaintRainbowEnabled = true	再描画されるレイヤーに、回転する枠線カラーのセットをオーバーレイします。	スクロール時に静的ウィジェットの色が変わる場合は、それを RepaintBoundary でラップします。
debugPaintLayerBordersEnabled = true	個々のコンポジタレイヤーの境界をオレンジ色で描画します。	コンポジットレイヤーの分割をデバッグするのに便利です。
debugProfileBuildsEnabled = true	DevTools の Performance タイムラインでウィジェットビルドのトレースを有効にします。	ジャンク発生時にどのウィジェットが再ビルドされているかを正確に追跡します。
debugProfilePaintsEnabled = true	DevTools の Performance タイムラインでペイント操作のトレースを有効にします。	カスタムキャンバス上の負荷の高いペイント操作をキャプチャします。

セットアップ例

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  // Toggle layout boundaries in debug mode
  debugPaintSizeEnabled = true;
  runApp(const MyApp());
}

---

カスタムウィジェットの診断 (debugFillProperties)

カスタムウィジェット、デザインシステムコンポーネント、または複雑なパラメータを持つステートフルウィジェットを構築する場合は、debugFillProperties をオーバーライドして、内部状態変数を Flutter Inspector の Details Tree に公開します。

診断プロパティのパターン

• Widget クラスまたは State クラスで debugFillProperties(DiagnosticPropertiesBuilder properties) をオーバーライドします。
• 必ず最初に super.debugFillProperties(properties) を呼び出します。
• 出力をクリーンで構造化された状態に保つために、型付きプロパティ (IntProperty、DoubleProperty、StringProperty、FlagProperty、EnumProperty) を追加します。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final bool isLoading;
  final int badgeCount;

  const CustomButton({
    super.key,
    required this.label,
    this.isLoading = false,
    this.badgeCount = 0,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: isLoading ? null : () {},
      child: Text(label),
    );
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    
    // Add custom properties visible in Flutter Inspector
    properties.add(StringProperty('label', label));
    properties.add(FlagProperty('isLoading', value: isLoading, ifTrue: 'loading', ifFalse: 'ready'));
    properties.add(IntProperty('badgeCount', badgeCount, defaultValue: 0));
  }
}

---

パフォーマンスとメモリのプロファイリング

Performance タブ

• フレームチャート: UI スレッドと Raster スレッドの実行時間を表示します。横方向に伸びている関数を探して、実行のボトルネックを見つけます。
• フレームタイムの予算:
  • 60Hz ディスプレイ: フレームレンダリング時間 < 16.6ms。
  • 90Hz ディスプレイ: フレームレンダリング時間 < 11.1ms。
  • 120Hz ディスプレイ: フレームレンダリング時間 < 8.3ms。

Memory タブ

• ヒープスナップショット: ユーザーフローの前後 (画面を開く/閉じるなど) でスナップショットを取得し、メモリがベースラインに戻るかどうかを確認します。
• リーク検出: 画面を閉じた後にヒープに残っている、破棄されていないクラス、コントローラー、画像アセットを探します。