Visual Layout Inspector

About

Layout Inspector is a visual structure inspector for frontend developers, UI engineers, and web designers.

It helps you understand the layout of any webpage by highlighting flex rows, flex columns, grid containers, block elements, spacing, sizes, and DOM structure directly on the page.

Instead of manually checking styles in DevTools, Layout Inspector gives you a fast visual overview of how a page is built.

Key features:

• Detect flex and grid layouts visually
• Highlight layout structure directly on the webpage
• Inspect spacing, gaps, padding, and element sizes
• View a structured DOM tree for selected elements
• Copy classes, Tailwind-style spacing hints, selectors, or summaries
• Export the inspected structure as JSON
• Use Alt + Shift + I to quickly toggle the inspector
• Works locally in your browser without sending data to external servers

Layout Inspector is useful for debugging layouts, reviewing UI structure, understanding unfamiliar pages, improving responsive designs, and inspecting modern web interfaces faster.

The extension only runs when you activate it. It processes layout information locally in the browser and does not collect, store, or transmit personal data.