DOM Lens

DOM Lens is a lightweight visual DOM inspector for developers. Instead of opening Chrome DevTools just to inspect an element, simply activate DOM Lens and hover over any webpage element to instantly view its key properties. The extension displays the information developers commonly need during frontend development, including layout, spacing, typography, colors, dimensions, and a copyable CSS selector—all in a compact floating panel. ## Features • Instant hover inspection without opening DevTools • Visual element highlighting with content, padding, border, and margin overlays • View essential CSS properties at a glance • See element dimensions and layout information • Inspect typography, colors, spacing, and border radius • Generate and copy clean CSS selectors • Lightweight and fast with minimal permissions ## Why use DOM Lens? Chrome DevTools is incredibly powerful, but opening it for quick inspections can interrupt your workflow. DOM Lens is designed for those moments when you simply want to know: * What is this element? * How big is it? * Is it using Flexbox or Grid? * What padding and margin does it have? * Which font is being used? * What's the best CSS selector? Hover over an element and get the answers instantly. ## Privacy DOM Lens processes everything locally inside your browser. The extension: * Does not collect personal data. * Does not send webpage content to external servers. * Does not require an account. * Does not track your browsing activity. DOM Lens only runs when you activate it and uses the minimum permissions required for its functionality.