cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
Highlighted
Super User
Super User

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:

View solution in original post

Highlighted
Advocate I
Advocate I

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.
 
 
 

View solution in original post

6 REPLIES 6
Highlighted
Solution Sage
Solution Sage

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.

---
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".
Highlighted
Frequent Visitor

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.

 

Highlighted
Super User
Super User

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:

View solution in original post

Highlighted
Advocate I
Advocate I

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.
 
 
 

View solution in original post

Highlighted
Super User
Super User

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

Highlighted
Super User
Super User

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

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

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (6,488)