Site Layout Inspector

About

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