Answered

PCF debugging in CDS environment

(0) Share

Report

Posted on by awais

Hey,

I am looking for debugging option for my PCF control inside CDS environment. Actually due to my complex logic I am wondering if possible to debug my code with CDS environment (not inside harness)?

Or can we make webapi call while in harness dev environment?

Regards,

Awais

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (6)

Answers (2)

Ben Thompson 1,400 on at

Like (0)

Report

Any reason why you can't just add debugger statements within your code and open Developer Tools? With the developer tools open the javascript will pause when the debugger statement is hit.

Was this reply helpful? Yes No
awais 30 on at

Like (0)

Report

Thanks @ben-thompson
when we deploy code on CDS as bundle file( single javascript file) and if we have debugger line in it but still we can't understand javascript due to minified code.

Was this reply helpful? Yes No
Verified answer

ScottDurow 1,039 on at

Like (1)

Report
The most common approach is to use Fiddler to serve up a development build of your PCF component and then load up the Model Drive/Canvas App page as normal - but the PCF bundle.js will be served from your local machine rather than the deployed version.

See:
https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/streamline-javascript-development-fiddler-autoresponder
http://develop1.net/public/post/2020/04/30/debugging-canvas-app-pcf-components-with-fiddler

Was this reply helpful? Yes No
Verified answer

david_rivard 42 on at

Like (1)

Report

Hi there is a good video that helped me achieve what you want:
https://www.youtube.com/watch?v=Ov-m5FBUj9g

Maybe there are better ways but this is how I do it:

1- modify : ..node_modules\pcf-scripts\webpackConfig.js
add at line 36 :
devtool: "source-map",  //Add this line to produce a source map (bundle.js.map) in the output folder

2- modiy : tsconfig.json
add line in bold
{
    "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
    "compilerOptions": {
        "typeRoots": ["node_modules/@types"],
        "sourceMap": true
    }
}

3- Build your PCF
**You should now have a file called bundle.js.map in your 'out' folder , keep that path in mind you will need it later

4- Deploy your PCF to the target environment

5- Using Fiddler, setup an AutoResponder rule
Add an Autoresponder rule
Map : bundle.js.map
To : {PCFFolder}\out\controls\{PCFNAME}\bundle.js.map

You should now be able to debug your actual typescript file as is.

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (1)

Report

Using the standard web-pack config output by pac pcf init - building in development mode using tsc start watch - you should automatically get the source maps included in your bundle.js

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

Like (2)

Report

I agree with @ScottDurow
Using the default webPack Settings, and uploading using "pac pcf push" you get a debug version (including the source-maps).
To find the code, I use in Chome "CTRL + P" and search for my component name, since this is included in the name path. That way I get the index.ts

After that you get the structure of your component in the Pages-Tab, and can make breakpoints as you wish:

Regarding requests inside Harness, I "mock" the requests. Without using tools for mocking, I decide (for now) based on window title or based on window.PCFUtilities if it's a request made inside the Harness or not, and return default/test values. (That's of course not recommended by the sdk, but in the worst case I have to delete this later on and I'm supported).
Hope it helps.
Best regards,
Diana

Was this reply helpful? Yes No