Pedro Matias (FroPT)

Aura Frontend Inspector is a professional-grade debugging tool designed for WordPress developers and agencies who need to ensure their sites are compliant, accessible, and error-free.
Unlike traditional auditors, Aura is built for the AI era. It features the ARF 1.0 (Aura Report Format), a structured data standard that allows you to copy detected issues directly into AI tools like ChatGPT or Claude to receive instant, context-aware code fixes.
<h3>Built for AI-Assisted Debugging</h3>
Every issue detected by Aura includes a “Copy AI Prompt” button. This assembles a high-signal prompt containing the exact HTML snippet, site environment, and error metadata in the ARF 1.0 format. Simply paste it into your favorite LLM for a precise solution tailored to your WordPress site.
<h3>Professional Accessibility (A11y) Auditing</h3>
Ensure your site meets WCAG 2.1 standards with real-time detection of: 
* Duplicate IDs: Finds elements sharing IDs that break screen readers and ARIA landmarks. 
* Missing Labels: Identifies form inputs without accessible names. 
* ARIA Integrity: Detects broken <code>aria-labelledby</code>, <code>aria-describedby</code>, and hidden focusable elements. 
* Semantic Structure: Validates heading levels (H1-H6), main landmarks, and page titles. 
* Interactive Elements: Flags non-interactive elements with click handlers and buttons without types.
<h3>Developer-First Features</h3>
<ul>
<li>Persistent Logging: Issues are stored in a dedicated database table with rate-limiting and deduplication.</li>
<li>HTML Snapshots: Capture the full rendered DOM of any page for offline audit or historical reference.</li>
<li>Environment Aware: Configure Aura to run only in <code>Development</code> or <code>Staging</code> modes to protect production performance.</li>
<li>Auto-Fix Engine: Optionally allow Aura to automatically resolve common issues like duplicate IDs on the fly.</li>
<li>Export Options: Download professional CSV logs or ARF 1.0 JSON reports for your client audits.</li>
</ul>
<h3>Part of the Aura Plugin Series</h3>
Aura Frontend Inspector is part of the Aura Plugin Series, a suite of AI-native tools including Aura Static Security Analyzer and Aura Login. Together, they provide a unified “Security & Compliance” ecosystem for WordPress professionals.

Aura Frontend Inspector

The AI-Native accessibility and HTML debugger for WordPress. Detect issues, export ARF 1.0 reports, and get AI-assisted fixes in seconds.

CodingBunny

CodingBunny CSS Inspector adds a clean, DevTools-style sidebar to your WordPress frontend, letting administrators visually inspect any element and copy its CSS with a single click. 
Perfect for theme customization, debugging, and quick styling adjustments—without ever opening the browser DevTools.
The inspector displays full CSS blocks, selector paths, HEX color values, used CSS variables, and ready-to-copy pseudo-state styles like :hover, :focus, and :active.
Designed for power and simplicity, and visible only to logged-in administrators.
<h4>Features</h4>
DevTools-like inspection sidebar, launched from the admin bar
Full CSS block viewer for any element (full or simplified selector paths)
Ready-to-copy pseudo-state blocks: :hover, :focus, :active
Automatic extraction of all CSS variables used by the selected element
Copy-to-clipboard buttons with instant visual feedback
Lightweight and unobtrusive—runs only for authenticated admins
Never loads for visitors or on the WordPress dashboard
<h4>Installation</h4>
Download codingbunny-css-inspector.zip
Unzip the file
Upload the codingbunny-css-inspector folder to /wp-content/plugins/
Activate CodingBunny CSS Inspector from the Plugins screen
<h3>Usage</h3>
Click “CSS Inspector” in the WordPress admin bar (frontend only)
Hover any element to preview its CSS in the sidebar
Click to lock the selection; press ESC to unlock or click ✕ to close
Toggle between full or compact selector paths
Use the copy buttons to instantly copy selectors and CSS blocks (with green confirmation)

CodingBunny CSS Inspector

Inspect and copy the CSS of your site’s elements directly from the frontend—fast, simple, and DevTools-inspired.

Aura Frontend Inspector vs CodingBunny CSS Inspector