Chrome DevTools を使用して要求と応答を検査する

既定では、Dev Proxy はコマンド プロンプトにそのメッセージを表示します。 多くの要求を発行するアプリケーションで開発プロキシを使用する場合、関心のあるメッセージを見つけることは困難です。 さらに、開発プロキシによってインターセプトされた要求と応答を調べることが必要な場合があります。

関心のあるメッセージを見つけやすくするには、DevToolsPlugin プラグインを使用して、Chrome DevTools に Dev Proxy メッセージを表示します。

DevToolsPlugin では、Dev Proxy メッセージと、Chrome DevTools でインターセプトされた要求と応答に関する情報が公開されます。

開発プロキシで Chrome DevTools を使用するには:

1. 開発プロキシのインストール ディレクトリに格納されている devproxyrc.json ファイルを開きます。 devproxy config open コマンドを使用することもできます。

2. DevToolsPlugin 配列に次のフラグメントを追加して、plugins プラグインを有効にします。

   {
     "name": "DevToolsPlugin",
     "enabled": true,
     "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
     "configSection": "devTools"
   }
   

3. devTools セクションを追加し、任意のブラウザーを指定します。

   "devTools": {
     "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.1/devtoolsplugin.schema.json",
     "preferredBrowser": "Edge"
   }
   

   ヒント

   サポートされる値: Edge、EdgeDev、Chrome

4. 完全な devproxyrc.json ファイルは次のようになります。

   {
     "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.1/rc.schema.json",
     "plugins": [
       {
         "name": "DevToolsPlugin",
         "enabled": true,
         "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll",
         "configSection": "devTools"
       }
     ],
     "devTools": {
       "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v0.29.1/devtoolsplugin.schema.json",
       "preferredBrowser": "Edge"
     }
   }
   

5. devproxyrc.json ファイルを保存し、開発プロキシを起動します。