Debugging Canvas App PCF components with fiddler

Those of you who know me will also know that I am a massive Fiddler fan for removing the need to deploy each time you change your JavaScript source.

Here are some of my previous blog posts on Fiddler - http://develop1.net/public/search?q=fiddler

The PowerApps docs now even include instructions on it https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/streamline-javascript-development-fiddler-autoresponder

Developing PCF Canvas Controls

When developing PCF controls for Canvas Apps, the process is slightly different and includes an extra step.

1. Add an autoresponder in the format:

Resources0Controls0<NamesSpace>.<ControlName>.bundle.js?sv=
E.g. Resources0Controls0Develop1.PCFTester.bundle.js?sv=

It should look something like:

2. Since the scripts are served from a different domain to PowerApps, configure Fiddler to add the Access-Control-Allow-Origin header.

In fiddler, Press Ctrl-R to open the rules editor.

Locate the OnBeforeResponse function and add:

if (oSession.oRequest.headers.Exists("Host") && oSession.oRequest.headers["Host"].EndsWith("windows.net")) {
  if (oSession.oResponse.headers.Exists("Access-Control-Allow-Origin")){
    oSession.oResponse.headers["Access-Control-Allow-Origin"] ="*";
  }
  else{
    oSession.oResponse.headers.Add("Access-Control-Allow-Origin","*");
  }
}

It should look something like:

When you add in your PCF Component to the Canva App, it should now be loaded from your local file system just like it does with Model Driven Apps. To refresh the component, you will need to exit the app and re-open (rather than just refresh the window in Model Driven Apps).

Hope this helps,

@ScottDurow