🌉 UIBridge Debug Panel Demo

🎯 What is this?

This page demonstrates the UIBridge Visual Debug Panel - a real-time debugging tool that shows automation commands as they happen in your web app.

⚠️ Setup Required

Make sure the UIBridge API server is running on http://localhost:3002

node api-server.cjs

🎮 Debug Panel Controls

🎯 Test Commands

Click these buttons to see automation commands appear in the debug panel:

🤖 External Automation Test

Run these PowerShell commands to see external automation in the debug panel:

# Load the helper functions
. .\uibridge-powershell-helpers.ps1

# Test commands that will show in the debug panel
Click-UIBridgeElement -Selector "#test-btn-1"
Take-UIBridgeScreenshot
Click-UIBridgeText -Text "Test Button 2"

💡 Pro Tip: The debug panel shows both local commands (clicked on this page) and external commands (from PowerShell/API calls) in real-time!

📊 Live Status

Debug Panel Status: Not initialized

Server Connection: Unknown

Commands Executed: 0