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!