CSS Sonar - Visual UI Inspector — Hardik Sehgal

CSS Sonar: The Visual UI Intelligence Tool for Developers

Tired of context-switching between your code and the cluttered Chrome DevTools? CSS Sonar turns your browser into a high-fidelity design x-ray, allowing you to understand any website’s layout at a glance.

Designed with a minimalist, high-contrast aesthetic for professional developers, CSS Sonar helps you debug layouts faster, audit design systems, and learn from world-class UI implementations.

KEY FEATURES:

Live Box Model Overlay: Instantly visualize padding, borders, and margins as you hover over elements. No more clicking through the Styles pane.
Deep CSS Inspection: Extract typography (font, weight, size), colors (hex/rgb), and layout properties (flex, grid, position) in a clean, non-obtrusive HUD.
Asset Intelligence: View and download high-quality SVGs and images directly from the inspector—perfect for design audits and asset gathering.
Keyboard-First Workflow: Toggle the "Sonar" instantly with Ctrl+Shift+X (or Cmd+Shift+X on Mac) for a seamless development flow.
Non-Intrusive Design: Minimalist monochrome UI that doesn't clash with the site you're inspecting.

PRIVACY & PERFORMANCE FIRST:

Zero Data Collection: We don't track your browsing, your clicks, or your data. What happens in your browser stays in your browser.
Lightweight: Zero dependencies. Written in vanilla JavaScript for maximum performance and zero impact on page load times.
Open & Secure: Fully compliant with the latest Manifest V3 security standards.

Built by developers, for developers. Stop digging. Start seeing.