A debug panel on a PowerApps screen can be a great way to troubleshoot errors that are being experienced within an app in a quick and efficient way. Here’s how:
1) Create a new Scrollable Screen.
To create the panel, we need to insert a Canvas onto the screen. An easy way to do this is by grabbing a canvas component from a scrollable screen. Simply create a new Scrollable Screen and copy and paste the Canvas component into the screen where the debug panel is needed.
2) Rename the Canvas
A good practice is to rename screen components to keep the tree view organized. Let’s rename the canvas to CanvasDebug.
3) Change the Canvas Fill Parameter
The canvas is currently opaque and most likely covering a section of the app, so let's change CanvasDebug's opacity. To make the component translucent, in the Fill field change the function from RGBA(0, 0, 0, 1) to RGBA(0, 0, 0, 0.5).
4) Add a Debug Button
This button will control when the Debug Panel is visible. Click on the Insert tab on the top of the screen, then click Button. To keep with good practices, rename this button ButtonDebug, and also change the text on the button to Debug.
5) Change the OnSelect Parameter of ButtonDebug
The OnSelect property of ButtonDebug sets what the button controls when selected. Change the OnSelect field to Set(debug,!debug).
6) Change the Visibility parameter of CanvasDebug
Changing the Visible field to debug ensures that it will only be visible when the Debug Button is selected.
7) This is what the debug panel will look like when DebugButton is selected and unselected:
Adding a debug panel to a PowerApps screen is a great way to look at the values of hidden variables as well as to help solve any issues you may be facing with getting your app up and running.