次の方法で共有

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

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

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

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

メモ

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

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

詳細情報:

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

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

モデル駆動型アプリの JavaScript デバッグ情報を示すスクリプト エラー ダイアログ ボックスのスクリーンショット。

詳細の表示のリンクを選択すると、イベント名、関数名、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する必要があります。

メモ

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

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

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

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

1. デバイスを構成する

メモ

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

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

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

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

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

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

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

    Android デバイスのリモート デバッグ オプションを示す Microsoft Edge DevTools デバイス画面のスクリーンショット。

  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 をデバッグするには、まず前提条件となるアプリケーションをインストールします。

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 をローカルでデバッグする場合は、[ ループバック接続のみに制限する] を有効にし、 認証 を無効にして続行できます (それ以外の場合は、ユーザー パスワードを設定する必要があります)。

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

    デバイス ポータルと開発者モードのオプションが有効になっている [Windows 設定のプライバシーと開発者向けセキュリティ] ページのスクリーンショット。

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. Windows 用 Power Apps または Field Service を起動します。

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

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

    リモート Windows デバイス接続オプションを示す Microsoft Edge DevTools の検査ページのスクリーンショット。

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

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

  • Last updated on