18 Jul, 2024

How to use Fiddler to debug your PCF while doing development.

Posted on 18 Jul, 2024 by Ankit Gore, Posted in Power Platform PCF (PowerApps Component Framework)

Blogs

Have you ever felt like you're spending too much time debugging your PCF (PowerApps Component Framework) during development, only to find yourself stuck in a loop of trial and error?
The process of debugging PCF components can be complex and time-consuming, often leading to frustration and wasted effort for developers.
In this blog, we'll show you how to use Fiddler to make PCF development easier and faster. By using Fiddler, you'll spend less time fixing errors and more time building awesome features for your projects. Let's make developing PCF components super easy!

If you're not familiar with Fiddler, it's like setting up a rule for the files you're working on. Instead of fetching those files from the server every time, Fiddler grabs them from a folder on your own computer. This saves time and lets you test and develop more efficiently.

Prerequisites: 

1. Fiddler Classic tool is installed on your system. If you don't have it, below is a link from which you can download it.

1. Download Fiddler

2. PCF control.

Let’s Connect fiddler with PCF:

1. Make sure that your PCF component has the latest bundle file. If not, you can run the 'npm run build' command to build the bundle.js file
   
   Below is my PCF control
   
2. Now let's open Fiddler, go to the AutoResponse tab, and click on 'Add Rule'
   
3. Let's start creating rules.
    

Rule 1:
Copy the namespace and name of your PCF control from the manifest file

Rule Editor Line 1:

Formula:REGEX:(.*?)(\/css)?(\/|cc_)namespace .constructorName.(?'path')

Example: REGEX:(.*?)(\/css)?(\/|cc_)NISL.TestPCF.(?'path')

Rule Editor Line 2:

Path: path of bundle.js file$2\${path}

Example: C:\Users\AnkitGore\Desktop\Blog\ConnectFiddlertoPCF\out\controls\TestPCF\TestPCF$2\${path}

click on "save".

Rule 2:

Rule Editor Line 1:

Formula: REGEX:(.*?)(\/css)?(\/|cc_)namespace.constructorName.(?'path')

Example: REGEX:(.*?)(\/css)?(\/|cc_)NISL.TestPCF.(?'path')

Rule Editor Line 2:

Copy and pest the below line.

*header:Cache-Control=no-cache, no-store, must-revalidate

click on "save".


Note: After starting capturing, if you are unable to see any web files in the Fiddler window, you should click on "Filter" and check the "User Filter" box.



Now, let's consider that you have already deployed the PCF in your environment. Next, update the control version and import the updated solution into the environment.

Once the solution is imported, just refresh CRM. In Fiddler, you should be able to see your PCF bundle file.


Now, go to the command prompt and run the command:

npm start watch

This command will help you reflect live changes in the bundle file.

Now, make some changes in the code and save them. After saving, the changes will be reflected in the bundle.js file on your system. Fiddler will ignore the server bundle file and take the bundle file from your local folder.

Next, refresh CRM using Ctrl + Fn + F5. As you can see my changes are reflecting. 

Now, let's check again. I'm adding another button.

Here, you can see that the live changes I made in my local code are being reflected.

Hope this blog is useful. Thank you.!!