DevLens

DevLens — Element Capture & WCAG Contrast Inspector Stop guessing accessibility scores and copying messy logs. Capture clean DOM snippets, accurate contrast ratios, and complete environment details in seconds. DevLens is a lightweight yet powerful browser extension designed for developers, QA engineers, accessibility testers, and UI/UX professionals. With a single click, inspect any element on a webpage and instantly generate a structured, audit-ready bug package containing the element's HTML, accessibility information, environment details, and WCAG contrast evaluation—all presented in a clean, easy-to-read interface. Whether you're testing for WCAG compliance, reporting UI defects, or debugging frontend issues, DevLens helps you collect everything you need without manually inspecting the DOM or taking multiple screenshots. ______________________________________________________________________________ ✨ Key Features 🎯 Interactive Element Selection Activate the inspector, hover over any webpage element, and click to capture it instantly. 🧩 Clean DOM Snippet Capture Extracts a readable HTML snippet of the selected element, including: • Element tag • Classes • Text content • Nested HTML structure Perfect for bug reports and developer handoffs. 🌐 Environment Information Automatically captures important context, including: • Current page URL • Capture timestamp • Screen resolution • Element tag name Helping reproduce issues faster. 🔤 Font Metrics Displays accurate typography information: • Font size (CSS pixels & points) • Font weight • Bold/Normal classification 🎨 WCAG Contrast Analysis Instantly calculates text contrast and provides: • Contrast ratio • WCAG AA verdict • WCAG AAA verdict • Clear color-coded Pass and Fail indicators ⚠️ Smart Background Detection Detects situations where contrast calculations may be affected by: • Transparent backgrounds • Layered elements • Background blending When necessary, DevLens marks the result as Approximate (0.01) and explains why, making it easy to know when additional verification with a pixel eyedropper is recommended. 🔄 One-Click Reinspection Need to inspect another element? Simply click Capture New Element without reopening or reloading the extension. ______________________________________________________________________________ 📋 Captured Bug Package Includes Each capture generates a clean, structured report containing: • ✅ Captured DOM Snippet • ✅ Page URL • ✅ Timestamp • ✅ Screen Resolution • ✅ Element Tag Name • ✅ Font Size (px & pt) • ✅ Font Weight • ✅ Contrast Ratio • ✅ WCAG AA Result • ✅ WCAG AAA Result • ✅ Accuracy Notes (when applicable) Example: DOM Snippet <span><strong class="color-fg-default">0</strong> Tags</span> Contrast Ratio ≈ 5.09:1 Font 14px (10.5pt) — Normal WCAG Compliance AA ✓ Pass AAA ✗ Fail Accuracy Note Approximate result due to a translucent background. Computed using CSS values. Verify with a pixel eyedropper when precise measurement is required. ______________________________________________________________________________ 🚀 How to Use 1. Click the DevLens extension icon. 2. Select "Select Broken Element." 3. Hover over the webpage and click the element you want to inspect. 4. Review the generated Bug Package with all accessibility and environment details. 5. Click "Capture New Element" to inspect another element instantly. _____________________________________________________________________________ 🔒 Built for Modern Web Applications DevLens is engineered using safe, non-destructive DOM APIs such as createElement() and textContent() instead of unsafe HTML injection methods. This allows the extension to work reliably on: • Enterprise applications • Internal corporate portals • Banking and government websites • Applications enforcing strict Content Security Policy (CSP) • Trusted Types enabled environments ______________________________________________________________________________ 🎯 Perfect For • Accessibility Testing • WCAG Audits • Section 508 Compliance Testing • Frontend Development • UI Bug Reporting • QA & Software Testing • Design System Validation ______________________________________________________________________________ Save time. Improve accessibility. Create better bug reports. Install DevLens today and capture everything you need for faster debugging and accessibility testing—all with a single click.