Flutter DevToolsとは何か？

Flutter DevTools は、Flutter および Dart アプリケーション専用に構築されたパフォーマンスおよびデバッグツールのコレクションです。ウィジェットの検査、パフォーマンスのプロファイリング、メモリの分析、ネットワークのモニタリング、デバッグ機能など、これらすべての機能が、ブラウザまたは IDE からアクセス可能なウェブベースのインターフェースに統合されています。

Flutter DevToolsにアクセスするにはどうすればよいですか？

DevToolsは複数の方法でアクセスできます。Flutterアプリを実行しているときにVS CodeまたはAndroid Studioから直接アクセスする方法（DevToolsアイコンやコマンドを探してください）、コマンドラインから flutter pub global activate devtools を実行した後、 flutter pub global run devtools を実行する方法、またはアプリをデバッグモードで実行したときに自動的にアクセスできる方法があります。

プロダクションアプリでFlutter DevToolsを使用することはできますか？

DevTools は主に開発およびデバッグのために設計されています。ほとんどの機能は、アプリがデバッグモードまたはプロファイリングモードで実行されている必要があります。ただし、Performance ビューはプロファイリングモードで動作し、リリースビルドに近いより現実的なパフォーマンスメトリクスを提供します。デバッグモードのアプリを本番環境にリリースしてはいけません。

DevToolsのデバッグモードとプロファイリングモードの違いは何ですか？

デバッグモードは、ホットリロードや完全なデバッグ機能を含むすべてのDevToolsの機能を有効にしますが、追加のチェックによりパフォーマンスが遅くなります。プロファイリングモードは一部のデバッグ機能を無効にしますが、より正確なパフォーマンスメトリクスを提供し、高速に動作するため、パフォーマンスのプロファイリングおよび最適化作業に最適です。

Flutter DevToolsはウェブおよびデスクトップアプリで動作しますか？

はい！Flutter DevToolsは、iOS、Android、Web、Windows、macOS、Linuxを含むすべてのFlutterプラットフォームで動作します。一部の機能はプラットフォームごとに異なる挙動を持つ場合がありますが、ウィジェットの検査、パフォーマンスのプロファイリング、およびデバッグというコア機能はすべてのターゲットで一貫して動作します。

Flutter DevTools: アプリのデバッグと最適化

Flutterのデバッグおよびプロファイリングツールでより良いアプリを構築する

Flutter DevTools は、Flutter 開発者にとって不可欠なツールで、アプリケーションを効率的に構築するために、強力なデバッグおよびパフォーマンス分析ツールのスイートを提供しています。

dart-dev-tools

Flutter DevTools とは？

Flutter DevTools は、Flutter および Dart アプリケーションのために特別に設計された、パフォーマンスプロファイリングおよびデバッグツールの包括的なスイートです。このツールは、開発者がアプリケーションの動作、パフォーマンス特性、および潜在的な問題について、直感的なウェブベースインターフェースを通じて深く洞察できるようにします。

DevTools を Flutter 開発のミッションコントロールセンターと考えてください。難しいバグの追跡、パフォーマンスの最適化、メモリ使用状況の分析、またはウィジェットツリーの検査など、DevTools は、卓越したアプリケーションを構築するために必要な可視性と制御を提供します。

ツールセットには、複数の専門的なビューが含まれています：

ウィジェットインスペクター - ウィジェットツリーを視覚化して探索
パフォーマンスビュー - フレームレンダリングをプロファイリングし、ジャンクを特定
メモリビュー - メモリ割り当てを追跡し、メモリリークを特定
ネットワークモニター - HTTP リクエストとレスポンスを検査
デバッガー - ブレイクポイントを設定し、コードをステップごとに実行
ロギングビュー - アプリケーションログと診断メッセージを表示
アプリサイズツール - アプリのサイズに影響を与える要素を分析

Flutter DevTools の開始

インストールとセットアップ

Flutter DevTools は Flutter SDK にバンドルされているため、Flutter をインストールしている場合、すでに DevTools が使用可能です。ただし、スタンドアロンのツールとしてインストールすることもできます。Flutter に初めて触れるか、開発環境をゼロから構築する必要がある場合は、Flutter のインストールおよび構成に関するガイドが、すべてが適切に構成されていることを確認するのに役立ちます。

現代的な開発環境を使用する場合、適切なセットアップは非常に重要です。VS Code を主なエディタとして使用している場合は、DevTools はエディタから直接起動できます。VS Code の必須ショートカットおよびコマンドを学ぶことで、作業効率が大幅に向上します。チーム間で一貫した開発環境を構築したい場合は、Dev Containers の使用が、再現可能なセットアップのための優れたソリューションです。

DevTools が利用可能であるかを確認するには：

flutter doctor

DevTools をグローバルに有効にするには：

flutter pub global activate devtools

コマンドラインから DevTools を起動するには：

flutter pub global run devtools

DevTools の起動

Flutter DevTools にアクセスする方法はいくつかあります：

VS Code や Android Studio から: Flutter アプリをデバッグモードで実行している場合、IDE は通常、DevTools のボタンまたはメニューオプションを提供します。VS Code では、デバッグツールバーの “Open DevTools” オプションを確認してください。

コマンドラインから: Flutter アプリを実行している場合、以下のようなメッセージが表示されます：

Flutter DevTools, running on http://127.0.0.1:9100

この URL をブラウザで開いてください。

スタンドアロン起動:

flutter pub global run devtools

その後、ターミナルで表示される VM サービス URL を使用して、実行中の Flutter アプリケーションに接続してください。

ウィジェットインスペクター: UI 構造の理解

ウィジェットインスペクターは、おそらく最も頻繁に使用される DevTools の機能です。これは、アプリケーションの構造とレイアウトを視覚的に理解するのに役立ちます。

ウィジェットインスペクターの主な機能

視覚的なウィジェットツリー: アプリケーションのウィジェット階層をナビゲートし、ウィジェットがどのようにネストおよび構成されているかを正確に把握できます。これは、Flutter の UI 構築に組み立て方式を使用しているときに非常に価値があります。

レイアウトエクスプローラー: Flutter のレイアウトアルゴリズムがウィジェットを配置およびサイズ変更する方法を視覚化できます。ツリー内の任意のウィジェットの制約、サイズ、および配置情報が表示されます。

ウィジェット詳細パネル: 任意のウィジェットを選択して、以下の詳細情報を表示できます：

ウィジェットプロパティとその値
ソースコード内の作成位置
レンダリングオブジェクトの詳細
ディアグノスティックプロパティ

ウィジェット選択モード: 十字のアイコンをクリックし、実行中のアプリケーションの任意の要素をクリックして、インスペクターのウィジェットに直接ジャンプします。これは、「このウィジェットは何か？」という質問を調査するのに最適です。

デバッグペイント: 以下の視覚的なデバッグオーバーレイを有効にできます：

ウィジェット境界
パディングとマージン
ベースライン
リペイント境界

複雑なレイアウトを構築する際、ウィジェットインスペクターは不可欠になります。視覚的な表現は、アプリケーションが複雑になるにつれて、Flutter が UI を構築する方法を正確に理解するための必須知識です。

ウィジェットインスペクターの実用的なヒント

「ガイドラインを表示」オプションを使用して、配置および間隔の問題を確認
「リペイントを強調表示」を有効にして、不要に再構築されているウィジェットを特定
「オーバーサイズ画像を反転」をチェックして、表示サイズより大きい画像を発見
「ベースラインを表示」を使用して、テキストを正確に配置する

パフォーマンスビュー: フレームレンダリングの最適化

Flutter は、ほとんどのデバイスで 60 fps（秒あたりのフレーム数）を、高リフレッシュレートのデバイスでは 120 fps を目標としています。パフォーマンスビューは、これらの目標を達成するためにパフォーマンスボトルネックを特定するのに役立ちます。

パフォーマンステレミングの理解

パフォーマンスビューは、以下のタイムラインを表示します：

フレームレンダリングチャート: UI スレッドと GPU スレッドのタイミングの視覚的表現
フレーム時間: 各フレームの実際のミリ秒測定値
ジャンキーなフレーム: フレーム予算（赤で強調表示）を超えたフレーム

UI スレッドと GPU スレッド:

UI スレッド（Dart コード）: Flutter コードが実行され、ウィジェットが構築され、レイアウトが行われる場所
GPU スレッド（レンダリング）: 実際の描画操作が行われる場所

両方のスレッドがフレーム予算内で完了しないと、スムーズなパフォーマンスは得られません。

パフォーマンスビューの効果的な使用

ジャンクの特定: 赤いバーは、ターゲットを失ったフレームを示します。ジャンキーなフレームをクリックして、詳細なタイミング情報を見て、どの操作が遅延を引き起こしたかを特定してください。

プロファイルモードが必須: パフォーマンスをプロファイルする際には、デバッグモードではなくプロファイルモードを使用してください。デバッグモードには追加のチェックが含まれており、本番環境のパフォーマンスを正確に反映していません。

flutter run --profile

タイムラインイベント: タイムラインは、以下のイベントを表示します：

ウィジェットの構築操作
レイアウト計算
ペイント操作
GPU シェーダーのコンパイル

パフォーマンス最適化の理解は、滑らかなユーザー体験を提供するために不可欠です。アプリケーション状態を効率的に管理することで、不要な再構築がジャングルの主な原因であるため、パフォーマンスに大きな影響を与えます。Flutter アプリケーションに適した状態管理アプローチの選択は必須です—Provider、BLoC、Riverpod などのパターンには、ウィジェットの再構築頻度に直接影響を与える異なるパフォーマンス特性があります。

パフォーマンス最適化戦略

ウィジェットの再構築を最小限に: const コンストラクタを使用する場所をできるだけ多くしてください
RepaintBoundary を活用: 高コストのウィジェットを分離して、不要な再ペイントを防ぎます
build メソッド内で高コストの操作を避ける: 計算を build の外に移動してください
長いリストに対して ListView.builder を使用: 一度にすべてではなく、必要に応じてアイテムを構築してください
実際のデバイスでプロファイリング: エミュレータは実際のパフォーマンスを正確に反映していません

メモリビュー: メモリ使用状況の追跡

メモリリークや過剰なメモリ使用は、アプリケーションのクラッシュやパフォーマンス低下の原因になります。メモリビューは、アプリケーションのメモリフットプリントを理解し、潜在的な問題を特定するのに役立ちます。

主要なメモリメトリクス

メモリ概要:

アプリケーションで使用される総メモリ
時間経過に伴うメモリ割り当てのトレンド
RSS（Resident Set Size） - 実際の物理メモリ使用量

メモリ割り当てタイムライン: 時間経過に伴うメモリ使用量の視覚グラフ。以下の点を確認してください：

一定の増加（メモリリークの可能性）
大きなスパイク（高コストの操作や大きなデータ構造）
さざなみ状のパターン（通常の割り当てとガベージコレクション）

メモリスナップショット分析

メモリスナップショットを撮って、以下の内容を確認できます：

ヒープで割り当てられたオブジェクト
クラスごとのオブジェクト数
クラスごとのメモリ使用量
オブジェクトを生きている状態に保っている参照

スナップショットの比較: スナップショットを撮って、アクションを実行し、もう一つのスナップショットを撮って、それらを比較して、作成されたオブジェクトと解放されていないオブジェクトを確認してください。

一般的なメモリ問題

画像メモリ: 特に高解像度の画像は、メモリを大量に消費します。適切なサイズの画像を使用し、キャッシュ戦略を考慮してください。

解放されていないリスナー: StreamSubscriptions、AnimationControllers などのリスナーが適切に解放されていないと、メモリリークが発生します。

メモリ内の大きなリスト: ページネーションや遅延読み込みではなく、大きなデータセット全体をメモリに読み込むこと。

ネットワークモニター: HTTP 交通のデバッグ

ネットワークモニターは、アプリケーションが行うすべての HTTP リクエストとレスポンスに視覚的なアクセスを提供し、API インテグレーションの問題をデバッグするのに不可欠です。

ネットワークビューの機能

リクエストリスト: 以下のネットワークリクエストを確認できます：

HTTP メソッド（GET、POST など）
URL
ステータスコード
リクエストおよびレスポンス時間
データサイズ

リクエスト詳細: 任意のリクエストをクリックして確認できます：

ヘッダ（リクエストおよびレスポンス）
リクエストボディ
レスポンスボディ
タイミング情報

WebSocket サポート: WebSocket 接続およびメッセージをリアルタイムでモニタリングできます。

API 問題のデバッグ

ネットワークモニターは以下のことを支援します：

リクエストが正しい URL およびパラメータで行われていることを確認する
認証ヘッダを検査して、トークンが送信されていることを確認する
レスポンスデータを検査して、API が実際に返す内容を確認する
ユーザー体験に影響を与える遅い API コールを特定する
Flutter Web アプリケーションの CORS 問題をデバッグする

バックエンドサービスとアプリケーションを構築する際、アプリケーションが API とどのように通信しているかを理解することは非常に重要です。RESTful サービスで Go における API の実装を行うか、Flutter バックエンドの AWS Amplify との統合を行うかに関係なく、ネットワークモニターはネットワーク通信をデバッグおよび最適化するための視覚的な情報を提供します。

デバッガー: ステップごとのコード実行

統合されたデバッガーは、実行を一時停止し、変数を検査し、コードを行ごとにステップごとに実行できるようにします。

デバッガーの機能

ブレイクポイント: IDE の gutter でクリックするか、デバッガーインターフェースを使用してブレイクポイントを設定できます。ブレイクポイントに到達すると実行が一時停止します。

変数の検査: 一時停止しているとき、以下の内容を検査できます：

ローカル変数とその値
オブジェクトプロパティ
呼び出しスタック
式の評価

ステッピングコントロール:

ステップオーバー: 現在の行を実行し、次の行に移動
ステップイン: 関数呼び出しに進入して内部でデバッグ
ステップアウト: 現在の関数を完了し、コールャーに戻る
継続: 次のブレイクポイントまで実行を再開

条件付きブレイクポイント: 特定の条件が満たされたときにのみトリガーされるブレイクポイントを設定し、特定のシナリオで問題が発生するときにデバッグに役立ちます。

デバッグのベストプラクティス

意味のある変数名を使用して、検査を容易に
ブレイクポイントと組み合わせて記述的な print ステートメントを追加する
呼び出しスタックを活用して、実行フローを理解
多数の反復処理が発生するときに条件付きブレイクポイントを使用する
ウィジェットの再構築中にウィジェットの状態を検査して、状態変更を理解
デバッグ中に Dart/Flutter チェックリストを手元に置いて、構文と一般的なパターンを素早く参照

ロギングビュー: アプリケーション診断

ロギングビューは、アプリケーションから集約されたすべてのログ出力を表示します。含まれる内容は以下の通りです：

print() ステートメント
debugPrint() 出力
developer.log() メッセージ
フレームワーク診断メッセージ
エラーメッセージとスタックトレース

効果的なロギング戦略

構造化されたロギング: フィルタリングおよび検索を容易にするために、一貫したログメッセージ形式を使用してください：

developer.log(
  'User action performed',
  name: 'UserService',
  error: error,
  stackTrace: stackTrace,
);

ロギングレベル: 異なる重大度レベルを区別してください：

デバッグ情報
情報メッセージ
警告
エラー

フィルタリングと検索: ロギングビューのフィルタリング機能を使用して、特定のメッセージタイプやコンポーネントに焦点を当てることが可能です。

アプリサイズツール: ビルドサイズの分析

アプリケーションのサイズに何が寄与しているかを理解することは、合理的なダウンロードサイズを維持し、アプリストアの制限を回避するために重要です。

サイズ分析機能

アプリサイズツールは、コンパイルされたアプリケーションを以下に分解します：

Dart コード: アプリケーションコードと依存関係
アセット: 画像、フォント、その他のリソース
ネイティブコード: プラットフォーム固有のコードとライブラリ

アプリサイズの削減

不要な依存関係を pubspec.yaml から削除する
画像を最適化: 適切なフォーマットと解像度を使用
--split-debug-info フラグを使用してコードの圧縮を有効にする
直ちに必要とされない機能を遅延読み込みする
パッケージの貢献度を分析し、軽量な代替手段を検討
コンテナ化されたビルドを検討: Flutter Web アプリの Docker 化は、一貫した出力サイズを持つ最適な本番ビルドを作成するのに役立ちます

開発環境との統合

VS Code との統合

VS Code は Flutter DevTools との統合を提供します。開発環境を設定する際、VS Code は Flutter 開発のための統合された DevTools アクセスを提供するスムーズな体験を提供します。

VS Code 用の Flutter 拡張機能は以下を提供します：

1クリックで DevTools を起動
統合されたデバッグ
ホットリロードサポート
エディタ内でのウィジェットの検査

VS Code の設定をさらに進める開発者にとって、キーボードショートカットおよびワークスペース設定をマスターすることで、生産性を大幅に向上させることができます。最も人気のある開発ツールおよびフレームワークを理解することで、どの技術を学ぶべきかについての決定を支援することもできます。

Android Studio との統合

Android Studio もネイティブの DevTools 統合を提供します：

ツールバーの DevTools ボタン
Flutter インスペクターパネルと統合
スムーズなデバッグワークフロー

Flutter DevTools の使用におけるベストプラクティス

開発ワークフローとの統合

早期かつ頻繁に: 問題が発生するのを待たずに、開発中に DevTools を頻繁に使用してください：

UI を構築する際にウィジェット構造を確認
パフォーマンスを段階的にプロファイリング
フィーチャー開発中にメモリ使用状況をモニタリング

実際のデバイスでのテスト: エミュレータやシミュレータは、現実のパフォーマンスを正確に反映していません。特に、ユーザーが持っている低性能デバイスで、常にプロファイリングを行ってください。

パフォーマンス測定のためのプロファイルモード: パフォーマンスを測定する際には、プロファイルモードを使用してください。デバッグモードは、アプリケーションを大幅に遅くする追加のチェックを含んでいます。

flutter run --profile

基準メトリクスの記録: 重要な画面やユーザーフローのパフォーマンスメトリクスを記録してください。これにより、変更がパフォーマンスを低下させていることを確認できます。

チーム協力

DevTools URL の共有: チームメンバーとデバッグする際、DevTools URL を共有して協力的なデバッグセッションを行うことができます（アプリケーションがアクセス可能なネットワーク上で実行されていることを確認してください）。

スクリーンショット証拠: DevTools は、ウィジェットツリー、パフォーマンスタイムライン、メモリグラフのスクリーンショットを簡単に取得できるため、バグ報告やドキュメント作成に役立ちます。

パフォーマンス予算の設定: チームとして、受け入れ可能なパフォーマンスメトリクスを設定してください：

最大フレームレンダリング時間
最大メモリ使用量
受け入れ可能なアプリサイズ
API レスポンス時間のしきい値

高度な DevTools 機能

タイムラインのディープリンク

特定のパフォーマンステイムラインを共有するには、タイムラインデータを保存および読み込むことができます。これは以下に役立ちます：

異なるコードバージョン間のパフォーマンス比較
チームメンバーにパフォーマンス問題を共有
パフォーマンス改善の記録

カスタム診断プロパティ

ウィジェットにカスタム診断プロパティを追加して、より良いデバッグを実現できます：

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
  super.debugFillProperties(properties);
  properties.add(StringProperty('userId', userId));
  properties.add(IntProperty('itemCount', items.length));
}

これらのプロパティは、ウィジェットインスペクターに表示され、デバッグをより情報豊かにします。

DevTools 拡張機能

Flutter チームは、DevTools に新しい機能およびツールを継続的に追加しています。最新の機能にアクセスするには、Flutter SDK を更新してください：

flutter upgrade

一般的な問題と解決策

問題: DevTools が接続できない

解決策:

アプリケーションがデバッグまたはプロファイルモードで実行されていることを確認
DevTools のポートがブロックされているファイアウォールの問題を確認
明示的な VM サービス URL で DevTools を起動してみる

問題: パフォーマンスデータが間違っているように見える

解決策:

プロファイルモードではなくデバッグモードで実行していることを確認
エミュレータではなく実際のデバイスでテスト
DevTools とアプリケーションを再起動

問題: ウィジェットインスペクターがすべてのウィジェットを表示しない

解決策:

「デバッグモードのバナーを表示」を有効にして、デバッグモードであることを確認
選択ウィジェットモードをオフにしてから再度オンに切り替える
ホットリロードが状態の問題を引き起こしている場合は、アプリケーションを再起動

結論

Flutter DevTools は、Flutter 開発エコシステムにおいて不可欠な存在です。ウィジェットインスペクターからパフォーマンスビュー、メモリプロファイリングからネットワークモニタリングまで、そのさまざまな機能をマスターすることで、効率的に高パフォーマンスでバグのないアプリケーションを構築できます。

DevTools から最大の利益を得るためには、問題が発生したときにだけ使用するのではなく、開発ワークフローの一部として定期的に使用することが重要です。定期的な使用により、アプリケーションの挙動を深く理解し、問題が発生する前に潜在的な問題を発見できます。

複雑なレイアウトの問題をデバッグする、60fps のアニメーションを最適化する、メモリリークを追跡する、または API インテグレーションの問題を調査するなど、Flutter DevTools は、成功するために必要な可視性と洞察を提供します。

今日から DevTools を日常的な Flutter 開発に取り入れ、それなしではどうやって開発していたのかを疑うほどになります。

各 DevTools 機能の使用タイミング

ウィジェットインスペクター:

新しい UI レイアウトの構築
既存のウィジェット構造の理解
レイアウト問題のデバッグ
ウィジェット再構築のパフォーマンスの最適化

パフォーマันスビュー:

フレームレンダリングのプロファイリング
ジャンクやフレームの欠損の特定
アニメーションの最適化
60fps のパフォーマンスを確保

メモリビュー:

アプリケーションクラッシュの調査
メモリリークの特定
メモリ使用量の最適化
メモリ割り当てのパターンの理解

ネットワークモニター:

API インテグレーションのデバッグ
リクエスト/レスポンスデータの確認
遅いネットワークコールの特定
認証問題のトラブルシューティング

デバッガー:

論理エラーの調査
実行フローの理解
変数状態の検査
例外の追跡

ロギングビュー:

アプリケーションの挙動のモニタリング
ユーザー操作の追跡
本番ビルドでの問題のデバッグ（適切なロギングがある場合）
フレームワークメッセージの理解

詳しく知る場所

Flutter DevTools は、新しい機能および改善が継続的に追加されているため、以下の情報を常に最新に保ってください：

公式 Flutter ドキュメント
Flutter DevTools リリースノート
Flutter コミュニティフォーラムおよびディスカッション
Flutter 開発に関するカンファレンス講演およびチュートリアル

Flutter 開発の旅を続ける中で、DevTools は包括的なツールキットの一部であることを忘れないでください。Dart 言語の基本を理解し、IDE をマスターし、適切な状態管理パターンを実装し、デプロイのベストプラクティスに従うことで、堅牢な開発ワークフローが構築されます。

外部リファレンスおよびリソース

本記事は以下の情報源を使用して執筆されました：

Flutter DevTools 公式ドキュメント - Flutter DevTools の公式ドキュメント
Flutter DevTools GitHub リポジトリ - Flutter DevTools のソースコードおよび問題追跡
Dart DevTools ガイド - Dart 言語の公式 DevTools ガイド
Flutter パフォーマンス最適化ガイド - 公式 Flutter パフォーマンス最適化ガイド
ウィジェットインスペクターのドキュメント - ウィジェットインスペクターに関する詳細なガイド
パフォーマンスビューのドキュメント - 公式パフォーマンスプロファイリングガイド
メモリビューのドキュメント - メモリプロファイリングおよびリーク検出ガイド
Flutter コミュニティ（Reddit） - アクティブな Flutter 開発者コミュニティのディスカッション
Flutter YouTube チャンネル - 公式 Flutter ビデオチュートリアルおよびアップデート

Flutter DevTools とは？

Flutter DevTools の開始

インストールとセットアップ

DevTools の起動

ウィジェットインスペクター: UI 構造の理解

ウィジェットインスペクターの主な機能

ウィジェットインスペクターの実用的なヒント

パフォーマンスビュー: フレームレンダリングの最適化

パフォーマンステレミングの理解

パフォーマンスビューの効果的な使用

パフォーマンス最適化戦略

メモリビュー: メモリ使用状況の追跡

主要なメモリメトリクス

メモリスナップショット分析

一般的なメモリ問題

ネットワークモニター: HTTP 交通のデバッグ

ネットワークビューの機能

API 問題のデバッグ

デバッガー: ステップごとのコード実行

デバッガーの機能

デバッグのベストプラクティス

ロギングビュー: アプリケーション診断

効果的なロギング戦略

アプリサイズツール: ビルドサイズの分析

サイズ分析機能

アプリサイズの削減

開発環境との統合

VS Code との統合

Android Studio との統合

Flutter DevTools の使用におけるベストプラクティス

開発ワークフローとの統合

チーム協力

高度な DevTools 機能

タイムラインのディープリンク

カスタム診断プロパティ

DevTools 拡張機能

一般的な問題と解決策

問題: DevTools が接続できない

問題: パフォーマンスデータが間違っているように見える

問題: ウィジェットインスペクターがすべてのウィジェットを表示しない

結論

各 DevTools 機能の使用タイミング

詳しく知る場所

外部リファレンスおよびリソース

有用なリンク