PCF Debugging

Let’s suppose you have the debug version of your PCF uploaded in your environment. How do you debug?

Of course we don’t want to use minimized code. To get the debug version of the code we have a few ways

  1. Use the debug Harness by using “npm start watch
  2. Using Fiddler AutoResponder, as shown in my other Blog
  3. Build the code using
    npm run build” and then upload it to the environment using
    pac pcf push -pp <publisher_prefix>”
    (this command has to be executed in the “.pcfproj” folder)
  4. Make the “Solution” project (“.cdsproj”) using
    pac solution init” add the reference to the PCF project using
    pac solution add-reference“, use
    msbuild” and then upload the resulting “solution.zip” in your environment.


The way (2) is of course the best way.
The way (3) need to be executed at least once, in order to get the PCF in the environment (and maybe at the end of the day, otherwise you’ll get confused when you open the App without starting Fiddler and miss all the last changes)
The (4) might be a way to transport the debug version on a production environment for troubleshooting. Remember to switch back to the production version after that, since that makes a big difference as shown in my other blog.

How does the debugging works

Open the form or the view containing the PCF, press F12 , then choose “CTRL + P” and type the name of your PCF (in my case ColorfulOptionset)
In case you are debugging a CanvasApp and F12 doesn’t work, use “CTRL+Shift + I”)

Now you can choose the Typescript file that you want, set breakpoints or debug as you are used to. Beeing able to debug directly in the TypeScript file is really confortable.

In case you need to switch to another “ts” or “tsx” file, and you don’t see it on the left side bar, choose “reveal in the side bar” from the context menu (right click)

This will show the project structure in the sidebar:

Now you should feel like home.

Happy debugging!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Powered by WordPress.com.

Up ↑

%d bloggers like this: