Dart ウェブアプリのデバッグ

Dart IDE、Dart DevTools、Chrome DevTools などのブラウザツールを使用して、Dart ウェブアプリをデバッグできます。

• アプリのロジックをデバッグするには、IDE、Dart DevTools、またはブラウザツールを使用します。 Dart DevTools は、Dart コードの検査と自動リロードにおいて、ブラウザツールよりも優れたサポートを提供します。
• アプリの外観 (HTML/CSS) とパフォーマンスをデバッグするには、IDE または Chrome DevTools などのブラウザツールを使用します。

アプリを提供するには、webdev serve (コマンドラインまたは IDE を介して) を使用して、Dart 開発コンパイラを起動します。 Dart DevTools を有効にするには、--debug または --debug-extension オプションを追加します (コマンドラインまたは IDE を介して)。

$ webdev serve --debug

webdev の --debug フラグを使用してアプリを実行している場合は、Alt+D (macOS では Option+D) を押して Dart DevTools を開くことができます。

Chrome DevTools を開くには、Control+Shift+I (macOS では Command+Option+I) を押します。 Chrome DevTools を使用してアプリをデバッグする場合は、ソースマップを使用して、コンパイラが生成する JavaScript の代わりに Dart ソースファイルを表示できます。 Chrome DevTools の使用方法の詳細については、Chrome DevTools のドキュメントを参照してください。

Dart DevTools または Chrome DevTools を使用して Dart ウェブアプリをデバッグするには、次のソフトウェアが必要です。

• Google Chrome。
• バージョン 2.0.0 以降の Dart SDK。
• 次の開発環境のいずれか
  • コマンドライン: webdev (Dart DevTools と Chrome DevTools の両方に必要) や devtools (Dart DevTools に必要) などの Dart コマンドラインツールパッケージ。
    または
  • Web 開発をサポートする Dart IDE またはエディター。
• デバッグする Dart ウェブアプリ。

このセクションでは、Dart DevTools を使用してウェブアプリをデバッグする基本的な手順を説明します。 デバッグの準備ができているアプリが既にある場合は、テストアプリの作成 (手順 1) をスキップできますが、アプリに合わせて手順を調整する必要があります。

1. *オプション:* webdev リポジトリのクローンを作成して、そのサンプルアプリを使用して Dart DevTools を試すことができます。

2. *オプション:* Dart Debug Extension をインストールすると、既に実行中の Chrome インスタンスでアプリを実行し、Dart DevTools を開くことができます。

3. アプリのトップディレクトリで、dart pub get を実行して依存関係を取得します。

   $ cd example
   $ dart pub get

4. IDE またはコマンドラインで webdev を使用して、アプリをデバッグモードでコンパイルして提供します。

   コマンドラインで webdev を使用している場合、使用するコマンドは、既に実行中の Chrome インスタンスでアプリとデバッガーを実行する必要があるかどうかによって異なります。

   • Dart Debug Extension がインストールされていて、既存の Chrome インスタンスを使用してデバッグする場合

     $ webdev serve --debug-extension

   • そうでない場合は、次のコマンドを使用して、Chrome の新しいインスタンスを起動し、アプリを実行します。

     $ webdev serve --debug

5. アプリがまだ実行されていない場合は、Chrome ブラウザウィンドウで開きます。
   たとえば、引数なしで webdev serve --debug-extension を使用する場合は、http://127.0.0.1:8080 を開きます。

6. Dart DevTools を開いて、現在のウィンドウで実行されているアプリをデバッグします。

   • Dart Debug Extension がインストールされていて、webdev に --debug-extension フラグを使用した場合は、ブラウザウィンドウの右上にある Dart ロゴ をクリックします。

   • webdev に --debug フラグを使用した場合は、Alt+D (macOS では Option+D) を押します。

   Dart DevTools ウィンドウが表示され、アプリのメインファイルのソースコードが表示されます。

7. コード行の左をクリックして、タイマーまたはイベントハンドラー内にブレークポイントを設定します。
   たとえば、イベントハンドラーまたはタイマークールバック内の最初の行の行番号をクリックします。

8. 関数呼び出しを引き起こすイベントをトリガーします。 実行はブレークポイントで停止します。

9. **変数**ペインで、変数の値を調べます。

10. スクリプトの実行を再開し、イベントを再度トリガーするか、**一時停止**を押します。 実行が再び一時停止します。

11. **ステップイン**、**ステップオーバー**、**ステップアウト**ボタンを使用して、コードを 1 行ずつステップ実行してみてください。

12. ソースコードを変更し、アプリを実行している Chrome ウィンドウをリロードします。 アプリはすぐに再ビルドされ、リロードされます。 問題 1925 が修正されるまで、アプリをリロードするとブレークポイントが失われます。

13. **ログ**ボタンをクリックして、stdout、stderr、およびシステムログを表示します。

IDE または Dart 対応エディターの代わりにコマンドラインを使用している場合は、webdev ツールが必要です。 Dart DevTools は SDK によって提供されます。

$ dart pub global activate webdev

PATH 環境変数が正しく設定されている場合は、コマンドラインでこれらのツールを使用できるようになりました。

$ webdev --help
A tool to develop Dart web projects.
...

PATH の設定については、dart pub global のドキュメントを参照してください。

Dart SDK を更新するたびに、ツールを再度アクティブ化して更新します。

$ dart pub global activate webdev     # update webdev

このセクションでは、Chrome、Firefox、Safari で本番コンパイルされたコードをデバッグするためのヒントを提供します。 Chrome などのソースマップをサポートするブラウザでのみ JavaScript コードをデバッグできます。

使用するブラウザに関係なく、少なくともキャッチされない例外で、場合によってはすべての例外で一時停止を有効にする必要があります。 try-catch でユーザーコードをラップする dart:async などのフレームワークの場合は、すべての例外で一時停止することをお勧めします。

Chrome でデバッグするには

1. Chrome DevTools のドキュメントの説明に従って、デベロッパーツールウィンドウを開きます。
2. ビデオ Chrome でのソースマップの説明に従って、ソースマップをオンにします。
3. ブレークポイントの設定方法の説明に従って、すべての例外またはキャッチされない例外のみでデバッグを有効にします。
4. アプリをリロードします。

Edge でデバッグするには

1. Edge の最新バージョンに更新してください。
2. 開発者ツール (F12) を読み込みます。
3. アプリをリロードします。デバッガータブに、ソースマップされたファイルが表示されます。
4. 例外の動作は、Ctrl+Shift+E で制御できます。デフォルトは処理されない例外で中断です。

Firefox でデバッグするには

1. Firefox 開発者ツールドキュメントの説明に従って、Web 開発者ツールウィンドウを開きます。

2. 次の図に示すように、例外発生時に一時停止を有効にします。

   

3. アプリをリロードします。デバッガータブに、ソースマップされたファイルが表示されます。

Safari でデバッグするには

1. Safari Web インスペクタチュートリアルの説明に従って、開発メニューを有効にします。
2. すべての例外、または未捕捉の例外のみで、ブレークを有効にします。Safari デベロッパーヘルプのJavaScript ブレークポイントを追加するを参照してください。
3. アプリをリロードします。

詳細については、以下を参照してください。

• ご利用の IDE のドキュメント
• Dart DevTools ドキュメント
• webdev ツールドキュメント
• webdev パッケージドキュメント

特に明記されていない限り、このサイトのドキュメントは Dart 3.5.3 を反映しています。ページの最終更新日: 2024-05-29。 ソースを表示 または 問題を報告する。