Media
4 items
Description
Overlay and label page structure — headers, navs, grids, flex containers and more. Built for layout replication. Site Layout Inspector lets you visualise the structural layout of any webpage with color-coded overlays and labels. Click Activate and instantly see how a page is built — headers, footers, navigation, grids, flex containers, and more — all highlighted directly on the page. HOW IT WORKS 1. Click the extension icon and press "Activate" 2. Color-coded overlays appear on the page showing element boundaries and tags 3. Hover over any overlay to see a detailed info panel with CSS properties 4. Toggle layer categories on/off to focus on specific element types 5. Click "Export Layout" to download a JSON file of the full page structure SEVEN LAYER CATEGORIES Each layer is color-coded and can be toggled independently: - Structural (blue) — header, footer, main, section, nav, aside, article, and ARIA landmark roles - Navigation (purple) — nav elements, menus, dropdown wrappers - Content (green) — main content areas, hero sections, call-to-action blocks - CSS Grid (orange) — any element using display: grid - Flexbox (red) — any element using display: flex - Media (teal) — images, videos, iframes, and embedded content - Forms (amber) — form elements, input groups, fieldsets HOVER INSPECTION Hover over any overlay to see a details panel showing: - Tag name, ID, and class list - Display and position values - Dimensions (width x height) - Padding and margin values - Font size and family - Flex direction, grid columns (when applicable) - Background color, text color, z-index, and overflow EXPORT Click "Export Layout" to download a JSON file containing every structural element on the page with its tag, classes, dimensions, and computed layout properties. Useful for design handoff and layout documentation. PRIVACY - All inspection runs locally in your browser - No data is sent to external servers - No tracking or analytics - Scripts are only injected when you click Activate — never passively Built for frontend developers, UI designers, and anyone who wants to understand how a webpage is structured. Made by Cosmos Web Tech — Digital Solutions for Sydney Businesses