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 -

The PowerApps docs now even include instructions on it

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:

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("")) {
  if (oSession.oResponse.headers.Exists("Access-Control-Allow-Origin")){
    oSession.oResponse.headers["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,


Comments (1) -

  • Also if you want to filter down the requests you can add a host filter of * to reduce calls just to those of the component resources.  Fiddler tends to give me a headache because I do a lot with certs on my machine so i try to restrict down my captures.

    Thanks for this Scott it's really going to speed up my development.
Comments are closed