Fiddler の AutoResponder を使用して JavaScript Web リソース開発を合理化する

[アーティクル]
03/03/2022

JavaScript Web リソースの開発およびデバッグ中に、Telerik Fiddler を使用すると、Web リソースのコンテンツを Dynamics 365 Customer Engagement インスタンスにアップロードして毎回公開するのではなく、ローカルファイルからのコンテンツで置き換えることができます。 Fiddler で AutoResponder を設定するには、以下の手順を使用します。

Fiddler のインストールおよび構成

Fiddler をダウンロードしてインストールします。
Fiddler を開いて、メニューバーから、ツール に移動し、オプション を選択します。
HTTPS トラフィックをキャプチャして、復号化するように、ダイアログボックスで HTTPS タブを選択して、HTTPS 接続をキャプチャ および HTTPS トラフィックを復号化 チェックボックスをオンにします。
OK をクリックしてダイアログボックスを閉じます。

Hinweis

この設定を有効にするのが初めての場合は、Fiddler は証明書をインストールするように要求します。新しい設定が有効になるように、証明書をインストールして、Fiddler を再起動します。
過去に Fiddler を実行しており、NET::ERR_CERT_AUTHORITY_INVALID エラーが発生した場合は、HTTPS タブで操作ボタンをクリックし、すべての証明書をリセット を選択します。これによっても、新しい証明書をインストールするよう要求する複数のプロンプトが表示されます。

AutoResponder の構成

Dynamics 365 Customer Engagement (on-premises) インスタンスでデバッグするページを開きます。
左下隅にある キャプチャ ボタンをクリックして、Fiddler トレースキャプチャを開始します。

Hinweis

特定のホストからの HTTPS トラフィックのみキャプチャする場合は、フィルター タブの ホスト 領域にある -ホストフィルターなし- ドロップダウンで、メニューから 次のホストのみ表示 を選択して、トラフックを表示するドメインのリストをセミコロンで区切って入力します。詳細: フィルターの参照。
テストするスクリプトを読み込むのに必要な操作を実行します。同じ キャプチャ ボタンをもう一度クリックして、キャプチャを停止できます。
左側のウィンドウからトレースログセッションを選択して、AutoResponder をセットアップするファイルを検索します。
たとえば、デバッグするコードが new_testscript.js という名前の JavaScript Web リソース内にある場合、検索ボタンを使用して、セッションを検索 ダイアログボックス開き、その Web リソースの名前を検索します。

検索条件と一致する行が左側のウィンドウに強調表示されるのがわかります。
その行を選択します。右側のウィンドウで、AutoResponder タブを選択します。
AutoResponder タブで、有効化ルール および 一致しない要求のパススルー チェックボックスを選択します。
ターゲットファイルに関連するセッションがまだ選択されていることを確認してから、AutoResponder セクションの ルールの追加 ボタンをクリックします。これによって、新しいエントリがルールテーブルに追加されます。
ルールを選択すると、下部の ルールエディター の先頭行にファイルに関連するセッション URL が入力され、EXACT: のような文字列が接頭辞として付加されます。
その後、一致する文字列を編集して簡略化できます。 Web リソースでは、最後に発行されたバージョンが応答に含まれていることを確認するために、URL には URL またはクエリ文字列で生成された値が含まれます。 EXACT 値が次のように表示されることを確認するでしょう。
```
EXACT:https://<org URL>/%7B636556138760000160%7D/WebResources/new_testscript.js?    ver=-1229805553
```
生成された値を削除し、代わりにこれを使用するとこれを単純化できます:
```
/WebResources/new_testscript.js
```
最下行は空白のままになっています。この最下行にディスク上のローカルファイルへのパスを入力して、保存します。

上記の手順に従うことで、要求をネットワークに伝えるのではなく、ローカルファイルで要求と応答をリスニングするように、Fiddler が構成されます。

コードの更新およびテスト

ローカルファイルに変更を適用します。
Fiddler トレースキャプチャを再び開始して、ブラウザーに戻り、空のキャッシュでページを再読み込みします。
ブラウザー開発者ツールで、現在受信されているファイルがローカルファイルになることを確認できます。
必要とする結果を得るまで、コードを更新しながらこのプロセスを繰り返すことを続けます。

Fiddler の AutoResponder を使用して JavaScript Web リソース開発を合理化する

Fiddler のインストールおよび構成

AutoResponder の構成

コードの更新およびテスト

関連項目

フィードバック