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

  • [アーティクル]

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

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

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

注意

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

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

詳細情報:

エラーの原因となっている 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 デバイスを使用してモバイル固有のコードをデバッグし、期待どおりに動作することを確認できます。

注意

現在、iOS を使用してデバイスをデバッグすることはできません。

モバイル アプリで JavaScript をデバッグするには、次の 3 つの手順を完了する必要があります:

1. デバイスを構成する

注意

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

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

  1. モバイル アプリで Power Apps のリストに移動し、メニュー ボタンで選択します。

  2. 切り替え モデル駆動型アプリのリモート デバッグを有効にする がオンになっていることを確認します。

    Field Service Mobile アプリの設定

  3. このオプションを有効にすると、確認ダイアログが表示されます。 確認 を選択します。

    リモート デバッグの確認ダイアログ

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

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

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

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

    Edge DevTools デバイス画面

  4. 検査 をクリックします。

詳細: Microsoft Edge: Android デバイスをリモートでデバッグする

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

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

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 が表示されます。

    DevTools 画面で調べる

  4. 検査 をクリックすると、DevTools が開きます。

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

注意

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

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