ローカルオーバーライドを使用して JavaScript Web リソースをデバッグする

モデル駆動型アプリでイベントハンドラーとして使用する JavaScript Web リソースを開発およびデバッグする場合は、通常、いくつかの変更を行い、それらがどのように動作するかをテストする必要があります。変更のたびに Web リソースをアップロードして発行すると、このプロセスが遅くなります。

最新のブラウザー開発者ツールには、Web リソースのローカルコピーを保存する機能が用意されています。モデル駆動型アプリが Web リソースを要求すると、ブラウザーはサーバー上のファイルではなくローカルコピーを読み込みます。 Web リソースを繰り返しアップロードして発行することなく、ローカルコピーの編集、ページの更新、変更のテストを行うことができます。プロキシソフトウェア、ブラウザー拡張機能、または証明書をインストールする必要はありません。

最新のブラウザーでこれらの機能がどのように提供されるかについて詳しく見る。

Microsoft Edge のローカルオーバーライド
Google Chrome のローカルオーバーライド
Firefox ネットワークのオーバーライド
Safari WebKit Web Inspector のローカルオーバーライド

Important

ローカルオーバーライドでは、お使いのブラウザーで読み込まれるリソースのみが変更されます。 Microsoft Dataverseの JavaScript Web リソースは更新されません。また、他のユーザーにも変更内容が表示されません。トラブルシューティングが完了したら、保持する変更をソースファイルにコピーし、通常のプロセスを使用して Web リソースを更新して発行してください。この記事では、そのプロセスについては説明していません。

Prerequisites

準備:

フォームのイベントハンドラーを提供するために使用される JavaScript Web リソースを持つモデル駆動型アプリが必要です。

この記事では、「最初のクライアントスクリプトの記述」で説明されている JavaScript Web リソースを使用します。このチュートリアルでは、JavaScript Web リソース example_form-script.js を作成し、アカウント フォームに追加し、フォーム On Load イベントと On Save イベント、および Name 列の On Change イベントの関数を登録します。

Note

JavaScriptWebResourceExampleSolution_1_0_managed.zipをダウンロードできます。このマネージドソリューションをインストールすると、初めてのクライアントスクリプトの作成というチュートリアル記事で解説された内容を完全に実装した、モデル駆動型アプリケーションを確認できます。
この記事ではMicrosoft Edgeを使用しますが、Google Chrome、Firefox、Safari の開発者ツールも同様の機能を備えています。
Microsoft Edge DevTools がローカルのオーバーライドを保存できるよう、ご利用のコンピューターに空のフォルダを作成します。ソースファイル、資格情報、証明書、またはその他の機密情報を含むフォルダーは使用しないでください。 DevTools は、このフォルダー内に必要なフォルダー構造を作成します。この記事では C:\temp\overrides を使用しますが、C:\Users\<your user name>\overrides を使用することをお勧めします。

この記事では、初めてのクライアントスクリプトを記述するにあるスクリプトを使用しています:

// Define a unique namespace for the sample library.
window.Example ??= {};

(() => {
    const notificationId = "_myUniqueId";
    const currentUserName = Xrm.Utility.getGlobalContext().userSettings.userName;
    const message = `${currentUserName}: Your JavaScript code in action!`;

    // Code to run in the form OnLoad event
    window.Example.formOnLoad = (executionContext) => {
        const formContext = executionContext.getFormContext();

        // Display the form level notification as an INFO
        formContext.ui.setFormNotification(message, "INFO", notificationId);

        // Wait for 5 seconds before clearing the notification
        window.setTimeout(
            () => formContext.ui.clearFormNotification(notificationId),
            5000
        );
    };

    // Code to run in the column OnChange event
    window.Example.attributeOnChange = (executionContext) => {
        const formContext = executionContext.getFormContext();

        // Automatically set some column values if the account name contains "Contoso"
        const accountName = formContext.getAttribute("name").getValue();
        if (accountName?.toLowerCase().includes("contoso")) {
            formContext.getAttribute("websiteurl").setValue("https://www.contoso.com");
            formContext.getAttribute("telephone1").setValue("425-555-0100");
            formContext.getAttribute("description").setValue("Website URL, Phone and Description set using custom script.");
        }
    };

    // Code to run in the form OnSave event
    window.Example.formOnSave = () => {
        // Display an alert dialog
        Xrm.Navigation.openAlertDialog({ text: "Record saved." });
    };
})();

この JavaScript Web リソースには、次のイベントに登録される 3 つの関数が用意されています。

Function	Event
`Example.formOnLoad`	Form OnLoad
`Example.attributeOnChange`	Field OnChange
`Example.formOnSave`	Form OnSave

この手順は、フォームイベントハンドラーとして登録されている JavaScript Web リソースでも機能します。 Web リソースの名前を使用し、手順がサンプルを参照している場合はそのイベントをトリガーします。

発行されたスクリプトが機能することを確認する

オーバーライドを作成する前に、発行された Web リソースの現在の動作を確認してください。

Microsoft Edgeでモデル駆動型アプリを開きます。
既存のアカウントレコードを開くか、新しいアカウントレコードを作成します。
次のメッセージのようなフォーム通知が 5 秒間表示されることを確認します。

<Your Name>: Your JavaScript code in action!

この手順では、フォームが Web リソースを読み込み、 Example.formOnLoad イベントハンドラーを呼び出すことを確認します。

ローカルオーバーライドを設定する

Microsoft Edge ブラウザープロファイルで初めてローカルオーバーライドを使用する場合にのみ、オーバーライドフォルダーを選択する必要があります。

アカウントフォームを開いた状態で、 F12 キーまたは Ctrl+Shift+I キーを押して DevTools を開きます。
[ソース] ツールを選択してください。
[ナビゲーター] ウィンドウで、[オーバーライド] タブを選択します。タブが表示されない場合は、[その他のタブ] を選択し、[オーバーライド] を選択します。
オーバーライド用のフォルダを選択するを選択します。
オーバーライド用に作成した空のフォルダーを選択し、[フォルダーの選択] を選択します。
DevTools がフォルダーへのフルアクセスを要求したら、許可を選択します。
[ローカルオーバーライドを有効にする] が選択されていることを確認します。

サービスワーカーのネットワークバイパスを有効にする

Important

ネットワークのバイパスを有効にすると、サービスワーカーがキャッシュされた応答を配信できないようにすることで、DevTools のローカルオーバーライドが確実に適用されるようになります。この手順を実行しない場合、ローカルオーバーライドはモデル駆動型アプリでは機能しません。

DevTools で、[ アプリケーション ] タブを選択します。

タブが表示されない場合は、 + (その他のタブ) を選択し、[ アプリケーション] を選択します。
左側のナビゲーションウィンドウで、[Service Workers] を選択します。
ネットワークのバイパスを選択すると、要求がサービスワーカーを経由せずにネットワーク経由で処理されるようになります。
ページを更新して変更を適用してください。

Web リソースのオーバーライドを作成する

ネットワーク ツールを使用して、アカウントフォームによって読み込まれる JavaScript ファイルを確認します:

ネットワーク ツールを選択します。
ネットワークアクティビティが記録されていない場合は、ネットワークログを記録 を選択してください。
フォームで Web リソースが再び読み込まれるように、ページを更新します。
フィルター ボックスに、Web リソースの名前 (例: example_form-script.js) などを入力し始めます。
ネットワーク要求の一覧で、 example_form-script.jsを右クリックし、[ コンテンツのオーバーライド] を選択します。
[ソース] ツールを選択し、[オーバーライド] タブを選択します。
DevTools によって作成されたフォルダを展開し、example_form-script.js を選択します。

DevTools は、オーバーライドフォルダーに Web リソースをコピーします。ファイルアイコンの紫色の点は、DevTools がリソースをオーバーライドしたことを示します。

Tip

Sources ツールの [ページ] タブからオーバーライドを作成することもできます。 Web リソースを見つけて右クリックし、[ コンテンツのオーバーライド] を選択します。

Microsoft Edgeがローカルコピーを読み込むかどうかを確認する

オーバーライドが機能していることを確認できるように、認識しやすい変更を行います。

DevTools エディターで、次の行を見つけます。

const message = `${currentUserName}: Your JavaScript code in action!`;

この行に置き換えます:
```
const message = `${currentUserName}: Local override in action!`;
```
Note

DevTools エディターにコードを貼り付けようとすると、このダイアログが表示されます。続行するには、allow pasting と入力し、許可を選択します。変更を直接入力した場合、このダイアログは表示されません。
通知期間を 5000 から 15000 に変更します。
+ Sを押してローカルファイルを保存します。
アカウントフォームを更新
通知にローカルオーバーライドが有効です！が表示され、15 秒間表示されたままであることを確認します。

変更されたメッセージと継続時間によって、Microsoft Edge が発行された Web リソースではなくローカルオーバーライドを読み込んだことが確認されます。

イベントハンドラーをデバッグする

オーバーライドが機能することを確認したら、DevTools デバッガーを使用してスクリプトを調査してください。

フォーム OnLoad イベントをデバッグする

ソース ツールで、オーバーライドされたexample_form-script.js ファイルを開きます。
ブレークポイントを設定するには、このステートメントの行番号を選択します。
アカウントフォームを更新します。
スクリプトの実行が一時停止したら、[ スコープ ] ウィンドウを使用して executionContext と formContextを検査します。
関数をステップ実行し、 setFormNotificationの呼び出しを観察します。
[ スクリプトの実行を再開 する] を選択して続行します。

アカウント名 OnChange イベントをデバッグする

Example.attributeOnChange のこのステートメントにブレークポイントを設定します:
```
const accountName = formContext.getAttribute("name").getValue();
```
アカウントフォームで、アカウント名を変更し、その列からフォーカスを外して、On Change イベントをトリガーします。
実行が一時停止したら、 accountNameの値を調べます。
Contosoを含むアカウント名を使用し、関数をステップ実行して、スクリプトによって Web サイト、メイン電話、説明の値がどのように設定されるかを確認します。

フォーム OnSave イベントをデバッグする

Example.formOnSave 内の Xrm.Navigation.openAlertDialog ステートメントにブレークポイントを設定します。
レコードを保存します。
実行が一時停止したら、呼び出し履歴を調べて、フォームのOn Saveイベントが予期された関数を呼び出したことを確認します。
スクリプトの実行を再開し、アラートダイアログが開くことを確認します。

修正の可能性をテストしたいときはいつでも、オーバーライドを編集して保存できます。フォームを更新して、フォームの読み込み時に実行されるコードの変更をテストしてください。関連するフォームまたは列イベントをトリガーして、他のイベントハンドラーをテストします。 コンソール ツールを使用してエラーとログ出力を確認します。

オーバーライドと公開済みの Web リソースを比較する

ローカルの変更によって問題が発生しているかどうかを確認するには:

ソース ツールで、[オーバーライド] タブを選択します。
ローカルオーバーライドを有効にするをオフにします。
アカウントフォームを更新し、イベントを再度テストしてください。

Microsoft Edge で公開された Web リソースがサーバーから読み込まれるようになりました。 ローカルオーバーライドを有効にする を選択し、フォームを更新して、ローカルコピーの使用を再開します。

トラブルシューティングを完了する

ローカルのオーバーライドファイルは、Dataverse内の Web リソースや、ソリューションのソースファイルとは関連付けられていません。

オーバーライドファイルから保持する変更を、Web リソースの管理に使用するソースファイルにコピーします。
通常の開発およびデプロイプロセスを使用して、JavaScript Web リソースを更新して発行します。
[ローカルオーバーライドを有効にする] がオフの状態で、発行された Web リソースをテストします。
オーバーライド構成が不要になったら、[オーバーライド] タブで [構成のクリア] を選択します。

Caution

オーバーライドフォルダー内のファイルを Web リソースのソースファイルとして扱わないようにします。構成をクリアする前に、またはローカルオーバーライドファイルを削除する前に、残しておきたい変更は保存してください。

ローカルオーバーライドのトラブルシューティング

ローカルオーバーライドを使用するときに発生する可能性がある問題を次に示します。

Web リソースがネットワークツールに表示されない

ネットワークツールが記録中であることを確認し、フィルターをクリアして、フォームを更新します。フォームが表示される前に、Web リソースを読み込む必要があります。また、JavaScript ライブラリがフォームに追加されていること、およびフォームのカスタマイズが公開されていることも確認してください。

[コンテンツのオーバーライド] コマンドは使用できません

ソース ツールに戻り、オーバーライドフォルダーを選択し、DevTools にアクセスを許可し、[ローカルオーバーライドを有効にする] を選択したことを確認します。次に、フォームを更新して、もう一度やり直してください。

フォームでは公開済みスクリプトが引き続き使用されます

DevTools を開いたままにし、[ローカルオーバーライドを有効にする] が選択されていることを確認し、Web リソースの [ネットワーク] ツールまたは [ソース] ツールに紫色のドットがあることを確認します。オーバーライドを保存し、フォームを更新します。

ブレークポイントに到達しない

オーバーライドされたファイルにブレークポイントを設定し、それが有効になっていることを確認してください。その関数に関連付けられたイベントをトリガーします。On Load の場合はフォームを更新し、On Change の場合は構成された列を変更し、On Save の場合はレコードを保存します。また、スクリプトの読み込みを妨げている構文エラーがないか、コンソール ツールでも確認してください。

フィードバック

このページはお役に立ちましたか?

最終更新: 2026-10-08

ローカル オーバーライドを使用して JavaScript Web リソースをデバッグする