Debugging your Power app for the code first developer

[Chris_Noring]

In this article, we will look at Microsoft Power Platform and specifically Canvas apps. We will at Power Platform in a specific way namely debugging.

So what do we mean by debugging? When you code, you need to figure out that the code does what it should. For example, you are fetching data from somewhere and you want to transform it in such a way that you're able to get the data you need from it and can display it.  

As a developer, you have a few different approaches you use for "debugging" namely:

- log/assertion, here you want a way to print out the values of variables to the console or maybe to a file or service. The idea is to ensure the values are where you expec them be. You can also in some language *assert* on the result and even stop execution of code if the value isn't what you want.

- breakpoints. Another approach is to halt execution of your program and inspect the current state where the program is currently at. You add a breakpoint in your program where you want it to halt and you're able to inspect one or more variables what their values are.

- test, another approach is to write tests that succeeds when the code does what it's supposed to do.

Regardless of approach, this is a fundamental tool in your toolkit to succeed with writing code that does what it's supposed to do. So how does this work in low code and Power Platform and Canvas apps in particular?

References

- Monitoring docs

- Concat and Concatenation function docs

IDE errors 

One great way Power platform uses to tell us we're doing something wrong is by indicating it with read squiggles like so:

As you can see, there's a red line indicating that I'm doing something wrong and a tool tip text that tries to help. In this case, I'm spelling it wrong, the property is called `results` and `result` is what I've typed, hence the error. In fact, if I hover over the code line, I learn even more. namely:

> Name isn't valid, result isn't recognized.

A lot of the time, errors directly in the IDE is enough to help me. But sometimes I need more help. A good example is something I encountered recently, I was calling a connector and wanted to know what the JSON response looked like to be sure the values I needed were set and where I expected them to be.

This brings us to our next way of doing debugging, namely using Monitoring.

Monitoring

Monitoring is something built-in to Power platform, the idea is that you:

1. Start up your app.
2. Start the monitoring. Navigate to "Advanced Tools" and select "Monitor".

1. Interact with your app by adding data and/or selecting a button for example.
2. Review the monitoring to see what events took place and what data it generated.

A sample app using monitoring

In this case, we have an app that talks to a connector that calls the SWAPI API. We're interested to learn more what data it responds with so we can display it in a UI control. The connector swapi is invoked when we call a button. Here's the code looks like:

For the buttons OnSelect property, it has the following code:

ClearCollect(collection, swapi.People({ page: 2}).results);​

The People() function is called on the connector and the result is placed in `collection` using ClearCollect() function.

Review monitoring

Ok, so if we select the button, we need to visit the monitoring as it opened in a separate tab. The monitoring function consists of list view on the left side:

and there's a detail view on the right side that tells you exactly what happened:

Here we are inspecting the second row in our list view called "Network". We see a JSON response and know exactly what we're getting back.

Great, we have a way of inspecting different events and see for example incoming data from a Web Request, really useful.

What about variable values, can we see that? Well, if we check the monitoring event for ClearCollect() what do we see when inspecting it more in detail?

Ok, so we can't see the variable value, can we solve that some other way?

Yes, let's cover that next.  

Inspect variable state

To inspect the variable state, we can go to a specific screen for that. To find said screen,  go to triple dot, ... menu on your top right and select "Variables",

this will take you to a page with all the variables. Let's inspect the "Variables" page closer. You come first to a list page, listing your variables and their current values:

 From this page, you can select a specific variable and learn more, before doing so, let's run the app so "str" variable is populated:

What we can see from the above screen is not only the value of the variable "str" but also where it's being interacted with and what code/formulas it's involved in, quite informative.

Collections

Collections is treated as a specific variable and have its own section, see "Collections" menu option on your left side of the screen in the original variable list view:

Now, we can inspect a specific collection and its content:

As you can see, checking the state of variables is pretty great.

However, there are situations where you might want to customize so you only want to see part of a variable value. For cases like that, I'm suggesting my own approach: 

log to screen

In this case, I want to see part of a response coming back from a JSON response and make it all into a string that I can display. So how to do that?

Well, ClearCollect() assigns the value to a collection collect, at this point it's a table structure. From this point, we can use Concat() to iterate over the table, and its columns, and lets us create a string from interesting values like so:

UpdateContext({ str :
    Concat(
        collection,
        Concatenate(
            "Height: " & height ,
            " | ",
            "Name" & name & Char(10)
        )
    )
});

with the above code, we're able to iterate our collection and for each row, read out `height` and `name` and an endline Char(10) and store in str variable.

Now we just need a good place to show it, for example at the bottom of our app, like so in a label doing nothing but showing str: