All-in-one utility extension for UI developers. Inspect fonts, colors, contrast, dimensions, spacing, and more with powerful hover inspectors.
Easy-to-use tool selection grid lets you quickly access any tool. Each feature is just one click away with our streamlined interface designed for efficiency.
Analyze fonts & hover inspector
Extract colors & color inspector
WCAG AA/AAA compliance
Measure dimensions & spacing
Padding, margin & gap analysis
Visual alignment grid
Explore how each tool works with interactive demos
Get detailed font information instantly. Analyze all fonts on any webpage with comprehensive property inspection.
Hover Inspector: Click to activate, then hover over any text to see font details
Extract and analyze color palettes from any webpage. Inspect background, text, and border colors with hover inspector.
Color Inspector: Hover over elements to see their colors (background, text, border)
Ensure WCAG AA/AAA compliance with real-time contrast ratio checking. Perfect for accessibility audits.
Contrast Inspector: Hover over text elements to see WCAG contrast ratios
Measure elements precisely with width, height, padding, margin, and border information.
Dimension Inspector: Hover over elements to see their dimensions, padding, margin, and borders
Visualize spacing relationships including padding, margins, gaps, and sibling spacing.
Spacing Inspector: Hover over elements to see padding, margin, gap, and sibling spacing
Customizable grid overlay (4-100px) for precise alignment and layout verification. Perfect for ensuring consistent spacing and alignment across your designs.
Highlight CSS Grid and Flexbox containers with colored overlays to understand layout structure. Perfect for debugging and understanding complex layouts.
Highlights CSS Grid and Flexbox containers with colored overlays
Test responsive breakpoints and viewport sizes in real-time. Displays current viewport dimensions and breakpoint information for responsive design testing.
Check ARIA roles, labels, alt text, and accessibility compliance on hover.
Real-time performance metrics including DOM stats, memory usage, and load times. Displays DOM metrics, load times, memory usage, and layout stability.
Displays DOM metrics, load times, memory usage, and layout stability
Export comprehensive analysis reports in JSON or Markdown format for documentation and sharing.
Inspect elements instantly with hover-based inspectors. No need to open DevTools for every measurement. Save time and work more efficiently.
Ensure accessibility compliance with WCAG contrast checking. Measure precisely with dimension and spacing inspectors. Professional results every time.
No more switching between multiple extensions or tools. Everything you need for UI development is right here in one convenient extension.
Comprehensive font analysis with detailed property inspection and usage statistics
Extract color palettes and inspect background, text, and border colors
WCAG AA/AAA compliance checking with real-time contrast ratios
Measure element dimensions, padding, margins, and borders
Visualize padding, margins, gaps, and sibling spacing
Visual alignment grid to help with layout precision
Highlight Grid and Flexbox containers on any page
Test responsive breakpoints and viewport sizes
ARIA roles, labels, alt text, and accessibility analysis
Real-time performance metrics and monitoring
Export comprehensive analysis reports in JSON or Markdown
Quick access to tools with customizable keyboard shortcuts
Start with a 14-day free trial. No credit card required.
For short-term or occasional use
Less than $1.70 / month
Cancel anytime
Pay once. Use forever.
No subscription.
Download the extension from the Chrome Web Store
Click "Add to Chrome" and confirm installation
Click the extension icon and select your tool
14-day free trial • No credit card required
Have questions or found a bug? We're here to help!