モデル駆動型アプリの JavaScript コードをデバッグする

ブラウザー開発者ツール、Android および iOS でのリモート デバッグ、Windows デスクトップ アプリを使用して、モデル駆動型アプリの JavaScript コードをデバッグします。 モデル駆動型アプリでは、JavaScript Web リソースを使用してカスタム ロジックを含めます。これらの Web リソースには、開発者がイベント ハンドラーとして登録する関数を定義するライブラリが用意されています。

Web ブラウザーでモデル駆動型アプリを表示する場合は、最新のすべてのブラウザーで提供される開発者ツールを使用できます。 これらのツールを使用すると、モデル駆動型アプリケーションに読み込まれた JavaScript ライブラリを見つけ、ブレークポイントを設定し、一般的なメソッドを使用してコードをデバッグできます。

Tip

JavaScript Web リソースのローカル コピーを繰り返しアップロードして発行せずに編集およびテストするには、「 ローカルオーバーライドを使用して JavaScript Web リソースをデバッグする」を参照してください。

Android 上のモバイル アプリまたは Windows デスクトップ アプリを使用して表示されるモデル駆動型アプリには、さらにいくつかの手順が必要です。 See:

• Android のモバイル アプリで JavaScript をデバッグする
• iOS のモバイル アプリで JavaScript をデバッグする
• Windows デスクトップ アプリで JavaScript をデバッグする

Note

ページにライブラリを追加する方法により、JavaScript Web リソースを表すライブラリが簡単に見つからない場合があります。 これらのライブラリは、ファイル一覧やソース ファイルの階層には表示されない場合があります。

デバッグする JavaScript Web リソースの名前がわかっている場合は、Microsoft Edge または Google Chrome ソースの場合は、 Ctrl+POpen file コマンドを使用して名前でファイルを検索し、デバッグを開始します。 エラーの原因となるイベント ハンドラーがあるが、ファイルの名前がわからない場合は、「エラーの 原因となっている JavaScript Web リソースを特定する」を参照してください。

詳細情報:

• Mdn Web ドキュメント: ブラウザー開発者ツールとは

  • Microsoft Edge ソース
  • Google Chrome ソース
  • Mozilla Firefox JavaScript デバッガー
  • Apple Safari デバッガー タブ

エラーの原因となっている JavaScript Web リソースを特定する

モデル駆動型アプリでイベント ハンドラーによってスクリプト エラーが発生すると、次のダイアログが表示されます:

詳細の表示のリンクを選択すると、イベント名、関数名、Web リソース名、ソリューション名、発行者名などの詳細が表示されます。

Xrm.Navigation.openalertDialog is not a function
Session Id: 53febd7c-3388-4ea5-a195-d84cf5883c30
Correlation Id: aaaa0000-bb11-2222-33cc-444444dddddd
Event Name: onsave
Function Name: Example.formOnSave
Web Resource Name: example_example-form-script
Solution Name: Active
Publisher Name: DefaultPublisherYourOrg
Time: Tue Jan 31 2023 13:36:34 GMT-0800 (Pacific Standard Time)

この場合、関数の名前が正しくありませんでした。openalertDialogopenAlertDialogする必要があります。

Note

Monitor を使用すると、エラーに関する同じ詳細を取得できます。 詳細については、「 カスタム スクリプト エラー」を参照してください。

Android のモバイル アプリで JavaScript をデバッグする

モバイル シナリオで JavaScript Web リソースを使用する場合は、Android デバイスを使用してモバイル固有のコードをデバッグし、期待どおりに動作することを確認できます。

Android 上のモバイル アプリで JavaScript をデバッグするには、次の 3 つの手順を実行します。

1. デバイスを構成する

• デバイスで開発者向けオプションと USB デバッグを有効にするには、Android ドキュメントを参照してください。 詳細については、「 Android 開発者: デバイス上の開発者オプションを構成する」を参照してください。

• Microsoft Edge または Chrome ブラウザーで、Android デバイスを見つけます。 詳細については、「 Chrome 開発者: Android デバイスのリモート デバッグ」を参照してください。

  • Microsoft Edge について: edge://inspect/#devices
  • Chrome について: chrome://inspect/#devices

Note

［USB デバイスの検出］ が有効になっていることを確認します。

2. モバイル アプリケーションを構成する

1. モバイル アプリで、Power Apps の一覧に移動し、メニュー ボタンを選択します。
2. [モデル駆動型アプリのリモート デバッグを有効にする] トグルがオンになっていることを確認します。
3. このオプションを有効にすると、確認ダイアログが表示されます。 確認を選択します。

3. 開発用コンピューターからデバッグする

1. コンピューターを Android デバイスに接続します。

2. Power Apps または Field Service Mobile アプリケーションからモデル駆動型アプリを開きます。

3. ブラウザの edge://inspect/#devices ページで、リモート ターゲット セクションで組織の URL を見つけます。

   

4. [検査] を選択します。

詳細については、「 Microsoft Edge: Android デバイスをリモートでデバッグする」を参照してください。

iOS のモバイル アプリで JavaScript をデバッグする

Mac で Safari を使用して、iOS 上の JavaScript Web リソースをデバッグします。

iOS 上のモバイル アプリで JavaScript をデバッグするには、次の 2 つの手順を実行します。

1. モバイル アプリケーションを構成する

1. モバイル アプリで、Power Apps の一覧に移動し、メニュー ボタンを選択します。
2. [モデル駆動型アプリのリモート デバッグを有効にする] トグルがオンになっていることを確認します。

2. Mac からデバッグします

1. iPhone または iPad を Mac に接続します。
2. Mac で Safari を起動します。
3. 開発 メニューで、接続されている iPhone または iPad を探し、Power Apps または Field Service を探します。

詳細については、「 iOS と iPadOS の検査」 |Apple 開発者向けドキュメント。

Windows デスクトップ アプリで JavaScript をデバッグする

Windows で JavaScript をデバッグするには、まず前提条件となるアプリケーションをインストールします。

• コンピューターに WebView2 ランタイムをインストールします。最小バージョンは 111 です。 WebView2 ランタイムをダウンロードします。
• Microsoft Store から Microsoft Edge 用リモート ツールをインストールする: Microsoft Edge 用リモート ツール - Microsoft Store アプリ。

1. Windows デバイスを構成する

1. 開発者モードを有効にします。

   1. Windows の設定>プライバシー & セキュリティ>開発者向け を開きます。
   2. 開発者モード を有効にします。

2. デバイス ポータルを有効にします。

   1. Windows の設定>プライバシー & セキュリティ>開発者向け を開きます。
   2. デバイス ポータル を有効にします。
   3. プロンプトが表示されたら はい を選択して、Windows 開発者モード パッケージをインストールします。
   4. Device Portal が有効になったら、 localhost 経由で接続するために使用する URL を書き留めます。 ほとんどのデバイスでは、 https://localhost:50080。
   5. Power Apps または Field Service Mobile をローカルでデバッグする場合は、[ ループバック接続のみに制限する] を有効にし、 認証 を無効にして続行できます (それ以外の場合は、ユーザー パスワードを設定する必要があります)。

   推奨される開発者設定のスクリーンショットの概要は次のとおりです。

   

2. ホストされた Windows アプリケーションの構成

Power Apps または Field Service Windows デスクトップ アプリをリモート デバッグ用に構成します。

実行コマンド (ショートカットは Windows + R) を使用し、次のディープ リンクを使用して、特別な引数で Windows アプリを起動します。

• Power Apps:ms-apps://?addWebView2AdditionalBrowserArgument=--enable-features=msEdgeDevToolsWdpRemoteDebugging
• フィールドサービスモバイル: ms-apps-fs://?addWebView2AdditionalBrowserArgument=--enable-features=msEdgeDevToolsWdpRemoteDebugging

3. Windows からのデバッグ

1. Windows 用 Power Apps または Field Service を起動します。

2. Microsoft Edge ブラウザーを開き、 edge://inspectに移動します。

3. リモート Windows デバイスへの接続 セクションを使用して、http://localhost:50080 に接続します。 接続には数秒かかりますが、組織の URL が表示されます。

   

4. 検査 を選択すると、DevTools が開きます。

関連記事

JavaScript Web リソース
Monitor でモデル駆動型アプリをデバッグする
Power Apps Mobile アプリに関する問題のトラブルシューティング