Inspect requests and responses using Chrome DevTools

By default, Dev Proxy displays its messages in the command prompt. If you use Dev Proxy with an application that issues many requests, it's difficult to find the messages you're interested in. What's more, you might want to inspect the requests and responses intercepted by Dev Proxy.

To make it easier to find the messages you're interested in, use the DevToolsPlugin plugin to display Dev Proxy messages in Chrome DevTools.

The DevToolsPlugin exposes Dev Proxy messages, and information about intercepted requests and responses in Chrome DevTools.

To use Chrome DevTools with Dev Proxy:

1. Open the devproxyrc.json file stored in your Dev Proxy installation directory. You can also use the devproxy config open command.

2. Enable the DevToolsPlugin plugin, by adding the following fragment to the plugins array:

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

3. Add the devTools section and specify your preferred browser:

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

   Tip

   Supported values are: Edge, EdgeDev, Chrome

4. The complete devproxyrc.json file looks like:

   {
     "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v1.0.0/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/v1.0.0/devtoolsplugin.schema.json",
       "preferredBrowser": "Edge"
     }
   }
   

5. Save the devproxyrc.json file and start Dev Proxy.