knowledgecenter-breadcrum

Knowledge Center

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
  1. 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.!!

Comment

This is a Required Field

Loading

Recent Updates

Thumbnail image
Blogs
13 Feb, 2025

Mastering Project Planning: How to Prevent Delays and Adapt to Any Challenge

Mastering Project Planning: How to Prevent Delays and Adapt to Any Challenge. Introduction Project delays are every project manager’s nightmare.…

READ MORE
Blogs
13 Feb, 2025

Filter List Using FetchXML in Power Pages

Introduction Power Pages provide a flexible way to display data using lists, but sometimes, you may need more advanced filtering than…

READ MORE
SMS_Thumbnail.jpg
Blogs
11 Feb, 2025

SMS Integration with Twilio Number in D365 Customer Service- Part 2

SMS Integration using Twilio Part 2 Introduction In Part 1, we covered below mentioned topics: Get Account SID and Auth…

READ MORE