Page overview

See the full picture of the live page. Every style and asset on that URL, then edit one value across the page, or download any image or SVG.

Add to chrome Find design drift and accessibility issues

How it works

  1. Open the live page in Chrome and open the Overview panel.
  2. Open page vocabulary to see the full picture of the site.
  3. Drill into a group, change a value in bulk, or download and swap assets. Review everything in Changes.

What Overview contains

Overview is the panel where you see the full picture. From it you can:

  • Open page vocabulary, every live style and asset in one place.
  • See page colors and page fonts at a glance, then drill in.
  • Paste from Figma and compare a frame or page styles to the live URL.
  • Keep Figma design tokens you pasted, for a later token baseline in visual QA.
  • Turn Show changes on or off. The inspecta stylesheet hides or applies while the list stays in Changes.
  • Send the current Changes batch to Cursor or Copilot from the same panel.

What page vocabulary lists

Same idea as scanning CSS in DevTools, built so you see the whole page at once. Each group shows live usage, then lets you act.

  • Colors. Every color in use. Change one hex or token and apply it across every match.
  • Type. Fonts, sizes, and type styles on the page. Change one across every match.
  • Radius. Corner radii in use. Set one radius everywhere it appears.
  • Spacing. Gaps, padding, and margin values collected from the live CSS.
  • Border. Width, style, and color of borders on the URL.
  • FX. Shadows, opacity, and other effects.
  • SVGs. Every SVG on the page. Download any of them, or replace one in place.
  • Images. Every image on the page. Download any of them, or swap the file.

What you can do

  • See the full picture. What the live site actually uses, in one view.
  • Drill into a value and jump to every instance on the page.
  • Edit in bulk. One change becomes global Changes across every match.
  • Download any image or SVG without the network panel.
  • Swap an image or SVG and preview it on the real URL.
  • Keep edits local. Visitors do not see them.
  • Review diffs and selectors in Changes. Undo if a pass is wrong.
  • Share a link with the edits on, copy CSS, or send the batch to an agent.

When you need findings, not the full picture

Overview shows everything in use. Scan UI finds UI drift and accessibility issues as design debt grows.

Find design drift and accessibility issues

Frequently asked questions

What is Overview for?

To see the full picture of the live page. The panel opens page vocabulary, Figma compare, and saved Figma tokens. Edits you make land in Changes.

What is page vocabulary?

The full picture of the URL: Colors, Type, Radius, Spacing, Border, FX, SVGs, and Images. Drill into a value, see every instance, bulk-apply, download, or swap.

How is this different from DevTools?

DevTools shows computed CSS on the node you selected. Page overview indexes the whole page so you can change a value once across every match and download any image or SVG. DevTools still debugs code.

Where do bulk edits go?

Into CSS Changes. Review selectors and diffs, undo, share a link, copy CSS, or send the batch to Cursor or Copilot. Visitors do not see the edits.

Is this the same as Scan UI?

No. Overview is the full picture of what the page uses. Scan UI finds UI drift and accessibility issues as design debt grows.

Do these edits go live for visitors?

No. They stay in your browser until you share a link or send the Changes batch to an agent.