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.

Tip

Dev Proxy supports using Chrome DevTools with Microsoft Edge, Microsoft Edge Dev and Google Chrome.

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

Screenshot of Microsoft Edge with dev tools showing Dev Proxy messages.

Screenshot of Microsoft Edge with dev tools showing requests and responses intercepted by Dev Proxy.

To use Chrome DevTools with Dev Proxy:

  1. Open the devproxyrc.json file stored in your Dev Proxy installation directory.

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

    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
      "configSection": "devTools"
    }
    
  3. Add the devTools section and specify your preferred browser:

    "devTools": {
      "preferredBrowser": "Edge"
    }
    

    Tip

    Supported values are: Edge, EdgeDev, Chrome

  4. The complete devproxyrc.json file looks like:

    {
      "plugins": [
        {
          "name": "DevToolsPlugin",
          "enabled": true,
          "pluginPath": "~appFolder/plugins/dev-proxy-plugins.dll",
          "configSection": "devTools"
        }
      ],
      "devTools": {
        "preferredBrowser": "Edge"
      }
    }
    
  5. Save the devproxyrc.json file and start Dev Proxy.