cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
awais
Frequent Visitor

PCF debugging in CDS environment

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 

 

2 ACCEPTED SOLUTIONS

Accepted Solutions

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:

View solution in original post

drivard
Advocate II
Advocate II

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.
 
 
 

View solution in original post

6 REPLIES 6
ben-thompson
Solution Sage
Solution Sage

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.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

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.

 

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:

View solution in original post

drivard
Advocate II
Advocate II

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.
 
 
 

View solution in original post

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

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

image.png

 

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

 

image.png

 

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

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.

Users online (1,589)