Site Layout Inspector

About

Site Layout Inspector is a Chrome extension that visualises the structural layout of any webpage with color-coded overlays and labels. Activate the inspector to instantly see how a site is built — structural elements, navigation, grids, flexbox containers, media, and forms — all highlighted and labelled directly on the page.

Features

• Seven toggleable layer categories: Structural, Navigation, Content, CSS Grid, Flexbox, Media, Forms
• Color-coded overlays with element labels
• Hover info panel showing computed CSS properties, dimensions, typography, and layout details
• One-click export of full page layout as a JSON file
• On-demand activation — never runs passively in the background

How It Works

Click the extension icon and press Activate. Color-coded overlays appear on the page showing element boundaries and tags. Hover over any overlay to see a details panel with display, position, dimensions, padding, margin, typography, and more. Toggle layers on/off to focus on specific element types. Click Export Layout to download a JSON file of the full structure.