Debug PCFs (and web resources) during development using Proxyman for macOS (and Windows)

When I entered the world of PCF controls, I was looking for a way to quickly and easily debug PCFs within Dynamics 365. While searching, I stumbled upon Diana Birkelbach’s blog. She describes how to debug PCFs with Fiddler AutoResponder. Unfortunately, this tool is only available for Windows, and the version available for MacOS (Fiddler Everywhere) I found to be not user-friendly and only available as a trial version.

After searching, I found the tool Proxyman, which looks extremely user-friendly and is also free to use up to 1 rule, which is sufficient for me for now.

Configure Proxyman

Install the SSL certificate from Proxyman to be able to inspect SSL traffic. You can do this at Settings > General.

After the installation is complete, you need to install the Proxy Helper Tool, which can be found in the Advanced tab.

Now that Proxyman can inspect SSL traffic, we can begin by adding rules. First, go to Tools > SSL Proxying list and add the Dynamics environment where we want to debug. Click on + and select Add App/Domain.

Add the URL of the environment where we want to debug, for example, example.crm4.dynamics.com.

Now that this is configured, we can set the Allow list via Tools > Allow list. We do this so that Proxyman does not process all the traffic from Dynamics but only the requests from the PCF control. This is done using a RegEx. Modify the following RegEx below and use it for the Matching Rule.

https:\/\/example\.crm4\.dynamics\.com(\/.*?)(\/css)?(\/|cc_)PCFNAMESPACE\.PCFCONSTRUCTOR\.(.*)

You can test your rule to make sure it works correctly.

Now that the allow list is set, let’s move on to the final step. Go to Scripting > Script list and add a new rule.

Provide a recognizable name and fill in the following under the URL:

(.*?)(\/css)?(\/|cc_)PCFNAMESPACE.PCFCONSTRUCTOR.(.*)

For the script, you can use the following code, make sure to adjust the RegEx and file path:

async function onResponse(context, url, request, response) {

  response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"; // So you don't have to refresh the cache everytime while debugging

  const regex = /(.*?)(\/css)?(\/|cc_)PCFNAMESPACE.PCFCONSTRUCTOR.(.*)/;
  const match = url.match(regex);

  if (match && match[4]) { 
    response.bodyFilePath = "/path/to/your/PCF-Control/out/controls/" + match[4];
 
  }


  return response;
}

You can also test your scripting rule before saving.

Once your script is saved and activated, you can enable Proxyman and start debugging!

Happy debugging!