Power Pages DevTools extension

Microsoft Power Pages allows you to build powerful web applications using a variety of components, tools and development languages. However, building websites using server-side markup languages like Liquid sometimes can be very time consuming to debug and test.

I was looking up something else in the Microsoft documentation and stumbled upon a new tool that will greatly assist in debugging your code as well as assist in identifying other issues.

The Power Pages DevTools extension is an Edge browser extension that enhances the existing browser developer tools.

The YouTube video for this blog post can be found here:

Browser developer tools are indepensible when working on any browser based application (including Dynamics 365 and Power Apps). It allows you to examine code structures, watch network traffic and log console messages (plus a hundred other things!).

Installing Power Pages DevTools extension

Navigate to Microsoft Power Pages – Microsoft Edge Addons and select Get. If the Get button is greyed out, you might be using another brower other than Microsoft Edge. (I hope for a Chrome version at some point).

This will appear with your other browser extensions. Note that the extension will be able to read info from your website. (That’s part of point).

Using the devtools extension

If your website is in private mode (as a developer website, it should be) then you don’t have to do any futher updates.

If you need to run the tool on public sites, you will need to add the site setting UserTrace/Debug with the value set to true.

Restart your browser (that is important). Then open up your Power Pages site and hit F12. This will launch the browser developer tools. You can dock the tools to the bottom or side or have them float.

Select the Power Pages tab (if you don’t see it, you may have not restarted your browser or may have installed in on an alternate profile.)

As you navigate to different pages, you may begin to see error messages and mitigation steps. I noticed a lot of permission errors that indicated that the didn’t have access to specific web pages or data, at this point, its not very specific, but it is a start.

Adding Liquid log messages

In JavaScript, we often use the console.log function for troubleshooting or to see if a particular piece of code works. Up until now, Liquid did not have that ability.

The DevTools extension provides the ability to view console messages from Liquid. You can add the following snippet to your liquid code:

{% log message: 'Log from contact page' %}

And the message will appear in the Power Pages DevTools:

You can begin to add log messages in your code to determine if certain code is being executed or data is being properly returned (sample from MS Learn).

{% capture msgg %}
   Contact email is {{contact.emailaddress1}} for name {{contact.fullname}}
{% endcapture %}
{% log message: msgg %}

Why is this important? If you develop Power Pages sites using Liquid (and eventually PowerFx) you cannot see the code when using the browser “view source” feature, as this code is rendered on the server and it will only see HTML/JavaScript from the client side.

Summary

The DevTools extension adds another tool while building Power Pages websites and adds a much needed features when developing in Liquid. I am looking forward to saving hours of frustration while developing!

Nick Doelman is a Microsoft MVP, podcaster, trainer, public speaker, (slightly injured) competitive Powerlifter and gets excited about geeky things. Follow Nick on X at @readyxrm or LinkedIN. Listen or watch the the Power Platform Boost podcast every second week for news and updates from the Power Platform community.

Original Post https://readyxrm.blog/2024/07/09/power-pages-devtools-extension/