Site Layout Inspector
Built by Cosmos Web Tech · Sydney
Overlay and label page structure — headers, navs, grids, flex containers and more. Built for layout replication.
Built by the team running Sydney SMB websites.
Cosmos Web Tech designs, builds and runs websites for Australian small businesses — fixed-scope sites from AUD 1,500, custom builds AUD 4,500–10,000, SEO retainers from AUD 800/mo, and Google Ads management at 15–20% of ad spend.
We built Site Layout Inspector because every client engagement starts with auditing somebody else's analytics, content, structured data, or markup — and doing that by hand was the slow part of the job. Overlay and label page structure — headers, navs, grids, flex containers and more. Built for layout replication.
If the audit shows real problems and you'd rather have someone fix them, that's our day job. Book a free 30-min consultation →
Site Layout Inspector
Built by Cosmos Web Tech · Sydney
Overlay and label page structure — headers, navs, grids, flex containers and more. Built for layout replication.
Built by Cosmos Web Tech, used in Sydney.
Site Layout Inspector is part of the chrome extensions catalogue maintained by Cosmos Web Tech, a division of Ganda Tech Services. Sydney web design, SEO & Google Ads arm. We use it on client engagements and ship it as part of our public toolkit.
Install from the Chrome Web Store or browse the full registry of 42 extensions.
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.