PCF debugging in CDS environment

Like (0) Share

Report

Posted on 4 May 2020 17:48:36 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

All responses (6)

Answers (2)

Diana Birkelbach 3,072 Most Valuable Professional on 05 May 2020 at 10:20:40

Like (2)

Report

Re: PCF debugging in CDS environment

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
ScottDurow 1,039 on 04 May 2020 at 19:39:55

Like (1)

Report

Re: PCF debugging in CDS environment

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
Verified answer

david_rivard 42 on 04 May 2020 at 19:35:46

Like (1)

Report

Re: PCF debugging in CDS environment

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.
Verified answer

ScottDurow 1,039 on 04 May 2020 at 19:35:03

Like (1)

Report
Re: PCF debugging in CDS environment

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
awais 30 on 04 May 2020 at 19:03:42

Like (0)

Report

Re: PCF debugging in CDS environment

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.
Ben Thompson 1,400 on 04 May 2020 at 18:52:07

Like (0)

Report

Re: PCF debugging in CDS environment

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.