Inspect requests and responses using Chrome DevTools

At a glance
Goal: View requests in Chrome DevTools
Time: 5 minutes
Plugins: DevToolsPlugin
Prerequisites: Set up Dev Proxy

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 and add the devTools configuration section. Supported preferredBrowser values are: Edge, EdgeDev, Chrome.

   The complete devproxyrc.json file looks like:

   File: devproxyrc.json

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

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

Inspect requests when Dev Proxy runs in a container

When you run Dev Proxy in a container, a dev container, or GitHub Codespaces, the plugin can't launch a browser on your machine. Instead, configure the plugin to listen on a fixed port and to log the Dev Tools URL, and open the URL in the browser on your machine.

1. In the devTools configuration section, set port to a fixed port and launchBrowser to false:

   File: devproxyrc.json

   {
     "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v4.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/v4.0.0/devtoolsplugin.schema.json",
       "port": 19229,
       "launchBrowser": false
     }
   }
   

2. Publish or forward the port to the same port on your machine. The Dev Tools URL contains the port number, so the port on your machine must match the port in the configuration.

   • If you use the Dev Proxy Docker image, publish the port when you start the container:

     docker run --rm -it -p 8000:8000 -p 8897:8897 -p 19229:19229 -v ${PWD}:/config ghcr.io/dotnet/dev-proxy:latest
     

     The Docker image starts Dev Proxy with --ip-address 0.0.0.0, so the plugin listens on all interfaces. If you run Dev Proxy in your own container and publish the port, start Dev Proxy with --ip-address 0.0.0.0 too.

   • If you use Dev Proxy with Aspire, publish the port on the Dev Proxy container resource:

     var devProxy = builder.AddDevProxyContainer("devproxy")
         .WithConfigFile("./devproxy.json")
         .WithCertFolder(".devproxy/cert")
         .WithConfigFolder(".devproxy/config")
         // publish the DevToolsPlugin port to the same port on the host
         .WithHttpEndpoint(port: 19229, targetPort: 19229, name: "devtools");
     

   • If you use a dev container or GitHub Codespaces in Visual Studio Code, forward the port to your machine.

3. Start Dev Proxy. Dev Proxy logs the Dev Tools URL, for example:

   DevToolsPlugin available at devtools://devtools/bundled/inspector.html?ws=127.0.0.1:19229/<token>. Open this URL in Microsoft Edge or Google Chrome to inspect requests.
   

4. Copy the URL and open it in Microsoft Edge or Google Chrome on your machine.

See also

• DevToolsPlugin
• Change logging level
• Inspect API requests issued by cloud services