The Hidden Power of ‘View Page Source’ – Debug Your Power Pages Like a Pro

Debugging Power Pages (formerly Power Apps Portals) can be tricky, especially when errors don’t show up clearly. One underrated but powerful method is using the browser’s “View Page Source” feature to uncover hidden issues.

In this blog, we’ll explore how to use HTML source code inspection to diagnose problems in Power Pages, including:

Use Case

Imagine you’ve built a customer portal with dynamic content using Liquid templates, but:

• A FetchXML query isn’t displaying data.
• User-specific fields render blank.
• No error messages appear on the page.

Manually checking each element is time-consuming. Instead, use these two pro techniques to pinpoint issues fast.

Method 1: Debugging Using “View Page Source”

Step 1: Access the Page Source

1. Open your Power Pages site in Chrome, Edge, or Firefox.
2. Right-click anywhere on the page and select “View Page Source” (or press Ctrl + U).
3. This opens the raw HTML output, which can reveal hidden errors.

Step 2: Check for Liquid Rendering Errors

Power Pages uses Liquid templates to render dynamic content. If a Liquid snippet fails, it may appear as:

• Blank spaces where content should be.
• Raw Liquid code (e.g., {{ page.title }} not rendering).
• Error comments (e.g., <!-- Liquid Error: Invalid syntax -->).

Example: Debugging a Broken FetchXML Query

{% fetchxml projects %}
  <fetch>
    <entity name="msdyn_project">
      <attribute name="msdyn_subject" />
    </entity>
  </fetch>
{% endfetchxml %}

Consider this Liquid Code in your Portal page but the data does not render

In the page source, look for:

<!-- FetchXML Error: Permission denied on entity 'msdyn_project' -->

This tells you the issue is table permissions, not the query itself.

Method 2: Debugging Using Hidden <div> Tags

If you need real-time frontend debugging, inject hidden <div> tags to display variables.

Add a Hidden Debug <div>

Place this in your Liquid template:

<div style="display: none; background: #f0f0f0; padding: 10px;">
  <strong>Debug Info:</strong><br/>
  Current User: {{ user.fullname }}<br/>
  FetchXML Results: {{ my_query.results.entities.size }}<br/>
  Page URL: {{ request.url }}
</div>

Inspect with Browser DevTools <div>

1. Press F12 → Elements tab.
2. Search for the <div>.
3. Check if variables (e.g., {{ user.fullname }}) render correctly.

Example: Debugging a Missing Username

If {{ user.fullname }} appears blank:

• The user isn’t logged in.
• Or Web Role permissions block the field.

Results

Let’s test it –

In this case, my fetchXML result is not rendering, so I wanted to verify if I have the necessary roles as well as the user information.

  <div style="display:none;">
                  Current User ID: {{ user.id }}<br>
                  Current User Name: {{ user.fullname }}<br>
                  Current Email: {{ user.emailaddress1 }}<br>
                  Current User Roles: {{ user.roles | join: ', ' }}<br>
                  Project Team Records: {{ project_team_check.results.entities.size }}
                </div>
 
                <div style="display:none;">
                  Query Status: {% if project_team_check.errors %}Error{% else %}Success{% endif %}<br>
                  Records Found: {{ project_team_check.results.entities.size | default: 0 }}
                </div>

By using your browser’s “View Page Source” feature and strategically placed hidden debug <div> tags, you can quickly uncover hidden Liquid errors, verify data rendering, and troubleshoot Power Pages issues more efficiently. These simple yet powerful techniques eliminate guesswork, help identify permission problems, and let you validate variables without disrupting the user experience – ultimately saving you valuable development time while maintaining cleaner, more reliable portals.

(Pro Tip: Combine these methods with browser DevTools for even deeper debugging capabilities!)

We hope you found this blog useful, and if you would like to discuss anything, you can reach out to us at transform@cloudfonts.com.