Using browser Dev Tools with Power Pages

Browser Developer Tools (commonly known as DevTools) are essential for inspecting, debugging, and optimizing Power Pages (formerly known as Power Apps Portals). Whether you’re troubleshooting a styling issue, fixing a JavaScript bug, analyzing performance, or inspecting network requests, DevTools provide granular control and visibility into your portal’s frontend.

This guide walks you through step-by-step usage of browser DevTools (focused on Google Chrome, but similar tools exist in Edge, Firefox) specifically for Power Pages development and debugging.

---

1. Accessing DevTools

To open DevTools in Google Chrome:

• Shortcut: Press F12 or Ctrl + Shift + I (or Cmd + Option + I on macOS)
• Via Menu: Click on the three-dot menu → More Tools → Developer Tools

Once open, you’ll see several tabs:

• Elements
• Console
• Network
• Sources
• Performance
• Application
• Security

---

2. Elements Tab – Inspecting HTML & CSS

This tab is primarily used to inspect, test, and modify the HTML and CSS rendered in your Power Pages.

Use Cases:

• Identify and fix broken CSS
• Inspect applied styles and override them live
• Locate web page components like Web Forms, Web Files, or injected Liquid code

Tips:

• Use the “Select Element” tool (top-left cursor icon) to click on any component and view its source
• You can edit the HTML or CSS live to test visual changes
• Helpful for debugging:
  • Custom themes
  • Web Templates
  • CSS overrides
  • Mobile responsiveness

---

3. Console Tab – JavaScript Debugging

The Console is your real-time window into JavaScript output and errors.

Use Cases:

• Check for JavaScript errors
• Log variable values using console.log()
• Debug DOM manipulations
• Check loaded libraries like jQuery, Bootstrap

Common Errors in Power Pages:

• Uncaught ReferenceError
• Cannot read property ‘x’ of undefined
• Missing jQuery if custom script runs before it loads

Tip:

Use console.clear() to clear clutter and console.table() to log arrays in a neat format.

---

4. Network Tab – Inspecting Requests

This tab shows every network request made by the browser — including API calls, scripts, styles, fonts, and images.

Use Cases:

• Validate Web API calls
• Check Dataverse fetch and post requests
• Monitor loading times
• Detect 404 or 403 errors

How to Use:

1. Refresh the portal with the Network tab open
2. Filter by XHR to see API requests
3. Click on a request → Inspect Headers, Payload, Response
4. Check status codes for errors:
   • 200 OK: success
   • 403 Forbidden: permission error
   • 404 Not Found: missing resource
   • 500 Server Error: backend issues

---

5. Sources Tab – Debugging Scripts

This tab lets you view, debug, and set breakpoints in your custom scripts.

Use Cases:

• Debug JavaScript added in Web Files or Custom Scripts
• Add breakpoints to pause execution and inspect variables
• Watch asynchronous (AJAX) flows in forms or dashboards

How To:

• Find your script file (e.g., custom.js)
• Set breakpoints by clicking the line numbers
• Use the Call Stack, Watch, and Scope panels to understand logic

---

6. Application Tab – Local Storage, Cookies, Cache

Power Pages may store authentication tokens or preferences in browser storage.

Use Cases:

• Inspect localStorage/sessionStorage values
• Check cookies for login/authentication data
• Clear cache and cookies during authentication debugging

---

7. Performance Tab – Optimize Load Time

Use this to record and analyze the page loading behavior.

Use Cases:

• Identify slow-loading scripts or large images
• Analyze time taken by JavaScript, CSS, and DOM rendering
• Detect layout shifts and bottlenecks

Tip:

Click “Record”, refresh the page, and stop recording to get a detailed timeline.

---

8. Security Tab – SSL and Resource Validation

Ensure your Power Pages site is served over HTTPS and all resources are secure.

• Check if third-party scripts/fonts/images are loaded via secure channels
• Debug any mixed content warnings (HTTPS + HTTP)

---

9. Lighthouse Tool – Performance & Accessibility Audit

Although not part of DevTools tabs directly, Lighthouse can be accessed from DevTools.

Use Cases:

• Run performance audit
• Get suggestions for accessibility and SEO improvements
• Identify mobile usability problems

---

10. Use Cases Specific to Power Pages

Scenario	DevTools Feature	Example
Theme not applying	Elements → Styles	Inspect applied CSS
JavaScript not working	Console / Sources	Check errors or breakpoints
Web Form not submitting	Network / Console	Inspect POST request or validation error
Login failing	Network / Application	Check token and cookies
Power BI not showing	Network / Console	Check iframe loads and embed token
Custom Web API fails	Network → XHR	Check HTTP headers and response

---

Tips for Power Pages Devs

• Use console.log() extensively during script development
• Enable Preserve Log in Network tab to keep data after refresh
• Use Responsive Design Mode (toggle device toolbar) to test mobile behavior
• Combine DevTools with Site Settings like EnableDiagnosticLogging for richer insights