Flutter アプリのデバッグ

デバッグに役立つさまざまなツールや機能が用意されています flutterアプリケーション。利用可能なツールの一部を次に示します。

• 開発ツール、パフォーマンスとプロファイリングのスイート ブラウザ上で動作するツール。
• Android Studio/IntelliJ、 とVSコード(Flutter プラグインと Dart プラグインで有効になります) 組み込みのソースレベルデバッガをサポートします ブレークポイントを設定し、コードをステップ実行する機能 そして値を調べます。
• flutterインスペクター、ウィジェットインスペクタが利用可能 DevTools 内、または Android Studio から直接 IntelliJ (Flutter プラグインで有効)。 インスペクターを使用すると、ビジュアルを検査できます。 ウィジェット ツリーの表現、検査 個々のウィジェットとそのプロパティ値、 パフォーマンス オーバーレイなどを有効にします。
• GDB を使用してリモートでデバッグする方法を探している場合は、 Android アプリ プロセス内で実行される Flutter エンジン、 チェックアウト901c1298​​-b5a9-413d-9208-25d6f8d36732。

開発ツール

アプリのデバッグとプロファイリングには、DevTools が適しています。 最初に手を伸ばすツール。 DevTools は ブラウザに対応しており、さまざまな機能をサポートしています。

• ソースレベルのデバッガ
• 視覚的なウィジェット ツリーを表示するウィジェット インスペクター、 ウィジェットを選択する「ウィジェット選択」モード アプリ内でそのウィジェットにドリルダウンします 木
• メモリプロファイラ
• トレースとインポートをサポートするタイムライン ビュー トレース情報のエクスポート
• ロギングビュー

アプリケーションを実行する場合デバッグモードまたプロファイルモード、実行中に開くことができます ブラウザーの DevTools を使用してアプリに接続します。 DevTools は、次のようにコンパイルされたアプリではうまく機能しませんリリースモード、デバッグとプロファイリングとして 情報が剥ぎ取られてしまった。

プロファイリングに DevTools を使用する場合は、必ず次のことを行ってください。 でアプリケーションを実行しますプロファイルモード。さもないと、 プロフィールに表示される主な出力は次のとおりです。 デバッグアサートはフレームワークのさまざまな不変条件を検証します （見るデバッグモードアサーション）。

詳細については、「開発ツールドキュメンテーション。

ブレークポイントの設定

IDE/エディタでブレークポイントを直接設定できます。 （そのようなAndroid Studio/IntelliJとVSコード）、 の中にDevTools デバッガー、 またプログラム的に。

ダーツアナライザー

を使用している場合は、Flutter 対応 IDE/エディター、 Dart アナライザーはすでにコードをチェックしています そして起こり得る間違いを探します。

コマンドラインから実行する場合は、 コードをテストしてくださいflutter analyze。

Dart アナライザーは型アノテーションを多用します。 問題を追跡するためにコードを入力します。 あらゆる場所で使用することをお勧めします (避けてください)var、 型なし引数、型なしリスト リテラルなど) これが最も迅速で痛みの少ない追跡方法であるため、 ダウンの問題。

詳細については、を参照してください。Dart アナライザーの使用。

ロギング

もう 1 つの便利なデバッグ ツールはログです。 ログアップを設定しましたプログラム的にその後、DevTools で出力を表示します。ロギングビュー、またはコンソールで。

アプリケーション層のデバッグ

Flutter は、次のような階層化アーキテクチャで設計されています。 ウィジェット、レンダリング、ペイントレイヤー。さらに詳しいリンクについては 情報とビデオを参照してくださいフレームワークのアーキテクチャでGitHub ウィキ、コミュニティ記事、レイヤーケーキ。

Flutter ウィジェット インスペクターは視覚的な表現を提供します ウィジェット ツリーの詳細レベルが必要な場合は、 または、ウィジェットの詳細なテキストベースのダンプが必要な場合、 レイヤ、またはレンダー ツリーについては、を参照してください。デバッグ フラグ: アプリケーション層の中にFlutter アプリをプログラムでデバッグするページ。

デバッグモードアサーション

開発中は、Flutter の使用を強くお勧めします。デバッグモード。これは、バグアイコンを使用する場合のデフォルトです。 Android Studio、またはflutter runコマンドラインで。 一部のツールは、 コマンドラインフラグ--enable-asserts。

このモードでは、Dart アサート ステートメントが有効になります。 Flutter フレームワークは引数を評価します 実行中に発生した各アサートステートメントに対して、 結果が false の場合は例外をスローします。 これにより、開発者はインバリアントを有効または無効にすることができます 関連するパフォーマンスコストなどのチェック デバッグセッション中にのみ支払われます。

不変条件に違反すると、 コンソール、追跡に役立つコンテキスト情報を含む 問題の原因を突き止めます。

詳細については、こちらをご覧ください主張するの中にDart 言語のドキュメント。

アニメーションのデバッグ

アニメーションをデバッグする最も簡単な方法は、アニメーションの速度を下げることです。 の flutterインスペクターを提供しますスローアニメーションボタン、 またはできますプログラムでアニメーションを遅くする。

ジャンキー (スムーズでない) のデバッグの詳細については、 アプリケーションについては、を参照してください。 flutterパフォーマンスプロファイリング。

アプリの起動時間を計測する

所要時間に関する詳細な情報を収集するため Flutter アプリを起動すると、flutter run指図 とともにtrace-startupとprofileオプション。

$ flutter run --trace-startup --profile

トレース出力は、次の名前の JSON ファイルとして保存されます。start_up_info.json下buildFlutter プロジェクトのディレクトリ。 出力には、アプリの起動からこれらのトレースまでの経過時間がリストされます。 イベント (マイクロ秒単位でキャプチャ):

• Flutter エンジンのコードを入力します。
• アプリの最初のフレームをレンダリングする時間です。
• Flutter フレームワークを初期化します。
• Flutter フレームワークの初期化を完了します。

例えば：

{
  "engineEnterTimestampMicros": 96025565262,
  "timeToFirstFrameMicros": 2171978,
  "timeToFrameworkInitMicros": 514585,
  "timeAfterFrameworkInitMicros": 1657393
}

ダーツコードをトレースする

パフォーマンス トレースを実行するには、 DevToolsを使用できますタイムラインビュー。 タイムライン ビューはインポートもサポートしています トレースファイルをエクスポートします。多くのための 情報については、を参照してください。タイムラインビュードキュメント。

あなたもすることができますプログラムでトレースを実行する、 ただし、これらのトレースはインポートできません DevTool のタイムライン ビューに移動します。

必ずアプリを実行してくださいプロファイルモード実行時のパフォーマンスを確認するためにトレースする前に 特性は最終製品の特性とほぼ一致します。

パフォーマンスオーバーレイ

アプリケーションのパフォーマンスをグラフィカルに表示するには、 パフォーマンスオーバーレイをオンにします。これは、 をクリックすると、パフォーマンスオーバーレイのボタン flutterインスペクター。

オーバーレイをオンにすることもできますプログラム的に。

オーバーレイ内のグラフを解釈する方法については、 見るパフォーマンスオーバーレイの の flutterパフォーマンスプロファイリングガイド。

デバッグフラグ

ほとんどの場合、デバッグ フラグを使用する必要はありません。 最も有用なデバッグが見つかるため、直接 の機能開発ツールスイート。しかし、もしあなたが デバッグ フラグを直接使用することを好みます。 を参照してください。デバッグフラグ:パフォーマンスの中にFlutter アプリをプログラムでデバッグするページ。

よくある問題

以下は、MacOS で一部の人が遭遇する問題です。

「開いているファイルが多すぎます」例外 (MacOS)

Mac OS が一度に開くことができるファイルの数に関するデフォルトの制限 時間はかなり少ないです。この制限に達すると、 利用可能な数を増やす を使用するファイル ハンドラーulimit指図：

ulimit -S -n 2048

Travis または Cirrus をテストに使用する場合は、 同じ行を追加することで開くことができる利用可能なファイル ハンドラー それぞれ、flutter/.travis.yml、または flutter/.cirrus.yml です。

const とマークされたウィジェットは互いに等しいはずですが、そうではありません

デバッグ モードでは、次の 2 つのことがわかるかもしれません。constすべての人に必要なウィジェット 見た目が等しいかどうかは（Dart の継続的な重複排除のため）そうではありません。

たとえば、次のコードでは 1 が出力されます。

print(<Widget>{
  // this is the syntax for a Set<Widget> literal
  const SizedBox(),
  const SizedBox(),
}.length);

2 つの定数が同じであり、セットされるため、(2 ではなく) 1 が出力されるはずです。 重複した値を結合します (実際、アナライザーは次のように不平を言います) 「セットリテラル内の 2 つの要素は等しくてはならない」)。予想通り、リリースでは ビルドでは 1 が出力されます。ただし、デバッグ ビルドでは 2 が出力されます。これは、 Flutter ツールは、コンパイル時にウィジェット コンストラクターのソースの場所をコードに挿入します。 したがって、コードは実質的に次のようになります。

print(<Widget>{
  const SizedBox(/* location: Location(file: 'foo.dart', line: 12) */),
  const SizedBox(/* location: Location(file: 'foo.dart', line: 13) */),
}.length);

その結果、インスタンスが異なるため、セットによって重複排除されません。 この挿入された情報を使用して、次の場合にエラー メッセージを明確にします。 ウィジェットは、関連するウィジェットが作成された場所を報告することによって例外に関与します。 残念ながら、それ以外の点では同一の定数が作成されてしまうという目に見える副作用があります。 コンパイル時に異なります。

この動作を無効にするには、次のように渡します--no-track-widget-creationにflutter run指図。 このフラグを設定すると、上記のコードはデバッグ ビルドとリリース ビルドで「1」を出力し、エラー メッセージを出力します。 提供できるすべての情報を提供できないというメッセージを含める ウィジェット作成の追跡が有効になっているかどうかを提供できるようになります。

以下も参照してください。

• に関するドキュメントウィジェット インスペクターがウィジェット作成追跡を使用する方法。
• WidgetInspectorService.isWidgetCreationTracked。
• の_Locationクラスインwidget_inspector.dart。
• のこの機能を実装するカーネル変換。

その他のリソース

次のドキュメントが役に立つかもしれません。

• パフォーマンスのベストプラクティス
• flutterパフォーマンスプロファイリング
• OEM デバッガの使用
• Flutterのモード
• Flutter アプリをプログラムでデバッグする
• 開発ツール
• Android Studio/IntelliJ
• VSコード