CSS Sonar - Visual UI Inspector автор Hardik Sehgal
Stop digging through cluttered DevTools. See UI layouts, box models, and CSS properties instantly on the page.
Метадані розширення
Знімки екрана
Про це розширення
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.
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.
Rated 0 by 0 reviewers
Permissions and data
Необхідні дозволи:
- Отримувати доступ до ваших даних для всіх вебсайтів
Необов'язкові дозволи:
- Отримувати доступ до ваших даних для всіх вебсайтів
Data collection:
- The developer says this extension doesn't require data collection.
Більше інформації
- Посилання додатка
- Версія
- 1.0.0
- Розмір
- 1,56 МБ
- Востаннє оновлено
- 8 днів тому (8 трав 2026 р.)
- Пов'язані категорії
- Ліцензія
- Ліцензія MIT
- Політика приватності
- Ознайомитись з політикою приватності для цього додатка
- Історія версій
- Додати до збірки