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

モデル駆動型アプリで JavaScript を使用するカスタム ロジックは、JavaScript Web リソースに含まれています。 JavaScript Web リソースは、開発者がイベント ハンドラーとして登録する関数を定義するライブラリを提供します。

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

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

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

注意

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

デバッグする JavaScript Web リソースの名前がわかっている場合、Microsoft Edge または Google Chrome ソースでは、Ctrl+P ファイルを開く コマンドを使用して、ファイルを名前で検索し、デバッグを開始することができます。 エラーの原因となっているイベント ハンドラーがあるが、ファイルの名前がわからない場合は、エラーの原因となっている 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: d154420e-5999-4250-b140-081f04a8e264
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)

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

注意

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

注意

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 デバイスをリモートでデバッグする

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

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 または フィールドサービス を探します。

詳細情報: Inspecting iOS とiPadOS | Apple Developer Documentation

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

Windows で JavaScript をデバッグするには、まず前提条件のアプリケーションをインストールする必要があります。

• 最小バージョンが 111 の WebView2 Runtime がコンピューターにインストールされている必要があります。 Webview2 Runtime をダウンロードする
• Microsoft Edge のリモート ツールを Microsoft Store: Microsoft Edge のリモート ツール - Microsoft Storeアプリ からインストールする必要があります

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

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

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

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

   1. Windows の設定 > プライバシーとセキュリティ > 開発者向け を開きます。
   2. デバイス ポータル を有効にします。
   3. 選択 はい をクリックして、プロンプトが表示されたらWindows開発者モード パッケージをインストールします。
   4. デバイス ポータルが有効になったら、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
• Field Service Mobile: ms-apps-fs://?addWebView2AdditionalBrowserArgument=--enable-features=msEdgeDevToolsWdpRemoteDebugging

3. Windows からのデバッグ

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

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

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

   

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

関連記事

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

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。