welcome to XRM blog

Keep in touch with latest CRM/ERP articles

To remain competitive your organisation must be efficient across the business process spectrum. To do so you need to take sound decisions based on a balance between the cost and risk. To do so you will be heavily dependent on your content management in itself needs...

image
Blog

To debug a PowerApps PCF Control in Dynamics 365

By Abhay Choudhary on 6/29/2021

We use DevTools (Developer Tools) to debug and inspect PCF Control using breakpoint debugging and with the live console.

With the CRM form open on which you have applied the PCF Control, press the F12 key to open and explore DevTools.

I have applied PCF Control on Contact form, in which a webapi call is being send to fetch records(through fetchXml) of contact entity whose firstname starts with ‘H’ and the fullname of first record fetched is set into a field of text type.

Following different tools are available in tools tab group:

     ·       Elements: Used for editing or inspecting HTML and CSS. And after editing changes are being displayed live in the browser.

  • ·       Console: This tab displays warnings and logs.

  •  

    Here it is showing the warnings.

    ·       Source: This tab will contain the source code. In case of PCF Control, the source tab will have index.ts file.

  •  

          The source tab allows you to set breakpoints and evaluate expressions in JavaScript.

  • Here the breakpoint is on line no. 48

  • ·       Network: This section records all the calls that are being sent from the web application and their time, payload and responses.

  • This section has the following columns as shown below:

  •  

    1.    Status: Contains the HTTP Response code that indicates whether a specific HTTP request has been successfully completed.

    Here Status = 200

    The status can have the following code values:

         200 OK: The request has succeeded.

  •  

                   400 Bad Request: The server could not understand the request due to invalid syntax.

                   500 Server Error: The server failed to fulfil a request.

     

  • 2.    Type: This specifies the resource type(xhr, fetch, js, css, img, font, doc, other).

    Here Type = fetch

    3.    Initiator: It tells you what caused a resource to be requested. It has a link and if you click on it, it will take you to the source code that caused the request.

    4.    Time: How long the request took.

    5.    Waterfall: It is a graphical representation of the different stages of the request.

  • Now to debug, refresh your form page. That will automatically take you to the Developer Tools to debug your PCF.

  •  

    Press f10 to take the control onto next line.

  • And you can see the fullname is set to the text field of the form.

  •  

    Here field is Fname whose value is Hal Matheson