Answered

Debugging PCF field control with Fiddler

(0) Share

Report

Posted on by Žarko Radevic

Hi, I started learning PCF and trying to develop a simple field control which fires a Web API request to get some related data and display it in a text box. I followed some guidelines to set up debugging via Fiddler but it is not working. Redirection to my local file doesn't happen, but I see in dev tools a domain with the name pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad. Under that one, I can see my .ts file, although not completely the same as my local (I guess because I use async/await which is ES6 feature).

1. Any idea why Fiddler redirection isn't working? I tested URL til both bundle.js and indes.ts files in Autoresponder, they are a match.

2. Can someone point me in the right direction regarding source maps and how is this pcf_tools... generated?

3. Web API request doesn't seem to be visible in network traffic, why is that? (or my code didn't come so far, but I don't see any errors generated in developer tools)

4. Can I update the content of my DOM elements which I added in Init method from a Web API callback?

Thanks in advance

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (3)

Answers (1)

Sort by

Verified answer

cchannon 4,702 Moderator on at

Like (0)

Report
Copy link

Link copied!

I think maybe you're jumping too deep into this one. You should never need to Fiddler trace WebApi requests because they are the first-party interface to the Rest API. When you call the WebApi, there are only three possible outcomes: You get a result, you get a failure, or you error out because you wrote it wrong (or I guess maaaaaybe you find a bug in the API but that is crazy rare).

Nowhere in that should you need to inspect the REST call that gets made in the background because it will only tell you what you already know: you got a result, you got a failure, or you wrote it wrong. The time you're spending trying to debug this with Fiddler is not going to get you closer to an answer, so I wouldn't waste any time trying to set it up.

Instead, just make sure you've pushed a debug build of your PCF (so the bundle is readable) and use your browser debugger to step through the execution. It is MUCH easier and MUCH more readable and you won't need to worry about the complexities of where the real REST calls happen and how to capture them correctly. By eliminating that complexity, hopefully the real issue in play will be easier to see.

Was this reply helpful? Yes No
Žarko Radevic 42 on at

Like (0)

Report
Copy link

Link copied!

Thanks for response @cchannon , it was a bug in the query string. I was trying to catch the request in developer tools of the browser, not the Fiddler. I do it often when I call API from JavaScript on forms and I can easily see the request and response then.

When it comes to Fiddler, I am just trying to use it for debugging so I don't have to redeploy my PCF control every time. I figured this one out, I had to use npm start watch so that bundle.js is updated on the fly.

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

Hi @ZARE ,

Great that it works now, and yes, using the "npm start watch" is the way to go.
Just in case it helps, here is a link in the docs, showing how to define the regex filter for Fiddler Autoresponder: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/debugging-custom-controls?WT.mc_id=BA-MVP-5004107#debugging-after-deploying-into-microsoft-dataverse-using-fiddler

That way you get not only the bundle.js, but also the css, images, ....

Did you solved all your questions? Question 4 seems to be related to another problem/point, but I'm not sure if I understand it exactly.

Hope this helps!

Was this reply helpful? Yes No