Inspect a page

Inspect shows you how any part of your site is built: which font it uses, its exact colors, its spacing, and every image and icon on the page. Everything it shows can be copied. It only reads the page, so nothing changes and no credits are used unless you send a fix to chat.

Turn on Inspect

The toolbar at the bottom centre of the preview has an icon of four corner brackets. Click it and the chat column on the left is replaced by the inspector, with five tabs: Inspect, Colors, Fonts, Assets and Checks. Only the open tab shows its name, and hovering the other icons shows theirs. Click the brackets again to go back to chat.

Only one preview tool runs at a time, so turning on Inspect turns off selecting and commenting. Inspect is not offered on a read-only link or on a phone, even one turned sideways, and like the other tools it is unavailable on pages that cannot host the editing bridge. Opening a link to Inspect on a phone shows Inspect needs a wider screen instead. Switching from Preview to another tab, such as CMS, turns Inspect off.

Right after Inspect is updated, a preview that was already open may show Inspector updated with Reload the preview to finish updating. Reload the preview and Inspect carries on.

While Inspect is on, links and buttons in the preview do not respond to clicks, so you can inspect a menu item without leaving the page. Scrolling still works.

Hover to inspect

Move the pointer over the preview. The element under it is outlined in blue with its name, such as Heading or Button, the same way as when you select an element for chat. Its margin, border, padding and content are shaded in different colors, and the margin and padding values are printed on the shading wherever there is room.

A card beside the element shows the essentials without a click: its tag and size, its font, text color and fill, its padding, margin, border and radius, and whether it lays out its children as a flex row, a flex column or a grid. For an image the card shows the size and weight of the file, and warns you in orange when the file is much larger than it is shown, for example 2.8× larger than shown. The card also notes when the element is fully transparent, and when it has ::before or ::after content.

When the element holds other elements, the space between its children is hatched in purple with its size in pixels. A gap that differs from the others in the same row or column turns orange, so uneven spacing stands out. A grid also shows its column and row lines, and children that are hidden but still take up space show as dashed boxes marked hidden.

Move the highlight with the keyboard

The keys work whenever the pointer is over the preview, even if you last clicked somewhere else in the editor. While a highlight is frozen and the pointer is elsewhere, only Space and Escape reach it, so the rest of the editor keeps its keyboard. Shortcuts with Cmd or Ctrl are never taken over.

Key	What it does
↑	Highlights the parent of the highlighted element
↓	Goes back down, or to the first child
← →	Highlights the previous or next element
Tab	Cycles through the elements stacked under the pointer. The card shows which layer you are on, for example layer 2 of 4. Shift Tab goes the other way
Space	Freezes the highlight and its card so you can move the pointer away. Press it again to unfreeze
Enter	Selects the highlighted element
Alt	With nothing selected, hold it (Option on a Mac) to see the distance from the highlighted element to each edge of its parent
Escape	Unfreezes, then clears the selection, then turns Inspect off

Clicking while the highlight is frozen selects the frozen element.

Hover options

The sliders button at the top of the inspector, Hover options, turns parts of the hover on and off: Hover details (the card), Spacing numbers, Layout and gaps, and Outline every element, which outlines everything on the page at once so you can see its whole structure. It also lists the keys above. Your choices are remembered.

Inspect an element

Click an element, or tap it on a touch screen, to select it. It keeps a blue outline while it is selected. The Inspect tab then shows:

• The element, its size, its tag and classes, and the path of elements it sits in. Click a step in the path to select that parent, or use the arrows to move to the parent, the first child, or the previous or next element. Copy selector copies a CSS selector for it.
• Typography, for anything with text: the font, marked Web font or System font, the full font stack, size, weight, line height and color, plus letter spacing, style, transform, decoration and alignment when they are not the default.
• Contrast, the ratio between the text color and the first solid background behind it, rated AAA, AA, AA Large or Fails.
• Colors, every color the element uses, including borders, fills, shadows and gradients.
• Box model, a diagram of margin, border, padding and content, with the radius and box sizing.
• Image, for images: the source address, the size it is shown at, the size and weight of the file, and the alt text, with a warning when the file is much larger than it needs to be.
• Layout and Effects, only the values that differ from the default, such as flex settings, gap, shadow, opacity or transitions.
• ::before and ::after, when the element has them: their content and styles.
• Classes, click one to copy it, or Copy all.
• CSS, a block with the element's styles. Copy CSS puts it on your clipboard.

Click any row to copy its value. Colors show as HEX, RGB or HSL, and the switch above them is remembered.

The details stay live. If AI changes the element while you are looking at it, they update, and if the element is removed from the page the selection clears.

Measure the space between elements

With an element selected, hover over another one. Red lines show the distance between them in pixels. When one element sits inside the other, you see the distance to each of its four edges instead.

Without selecting anything, hold Alt (Option on a Mac) while hovering to see the distance from the highlighted element to each edge of its parent.

Compare two elements

Select an element and click the pin next to Copy selector, Pin to compare. The pinned element keeps a dashed blue outline in the preview. Select any other element and a Compare section appears under its name, listing only the properties that differ, with the pinned value beside the selected one. It covers the font, size, weight, line height, letter spacing, text color, background, border color, width, height, padding, margin, border and radius, plus any layout or effect value that either element sets. Properties that match are counted but hidden.

Click Unpin, or the pin again while the pinned element is selected, to stop comparing. If AI changes the pinned element, the comparison updates, and opening another page clears the pin.

On a touch screen

On a tablet, tap an element to select it. Touching or scrolling the preview does not move the highlight, and the empty inspector reads Tap any element in the preview. The hover card and the keys depend on hovering, so on a touch screen the list of keys is hidden, and copy buttons show without hovering. A mouse or trackpad connected to the tablet still highlights elements as you hover.

To measure on a touch screen, select an element, tap Measure at the bottom of its card, then tap another element. The hint reads Tap another element. While Measure is on, taps measure instead of selecting: the distance lines stay until you tap Measure again, and tapping a different element measures to that one instead.

Colors on the page

The Colors tab lists every color used on the page, the most used first, with how often it appears and where: text, background, border, icon, shadow or gradient. Use the filters to narrow it down.

Click a swatch to outline every element that uses that color in the preview. Click it again to clear the outlines.

If your site defines colors as variables, such as --primary or --background, they are listed at the top under Color variables, and Copy all copies them as CSS.

Pick a color from the screen

The eyedropper button at the top of the Colors tab, Pick a color from the screen, opens your browser's color picker with its magnifier. Click any pixel on the screen, including inside a photo or a gradient, and the exact color is added under Picked colors at the top of the Colors tab, newest first. Clear empties the list.

The picker is available in Chrome and Edge. In other browsers the button is disabled and reads This browser cannot pick colors from the screen.

Fonts on the page

The Fonts tab has two lists. Font families shows each font with the weights and sizes it is used at. Text styles shows every combination of size, line height and weight, the tags that use it and a sample of the text. Click a family or a style to outline where it is used, and Copy CSS to copy the style.

Images and icons

The Assets tab collects the images, SVG icons, background images and videos on the page, plus its icons such as the favicon and the sharing image. Each shows its format, size and how often it is used. The three dots menu on each asset has:

• Open link opens the file in a new tab. Files served from the same address as the page do not have it.
• Copy URL copies the address. For an SVG icon it is Copy SVG, which copies the markup.
• Download saves the file. SVG icons download as .svg files.

Click the preview of an asset to outline where it is used.

Check the page

The Checks tab looks for four kinds of problem and lists each one with how many elements it affects:

• Low contrast text, text whose contrast with the solid background behind it is under 4.5
  , or under 3
  for large text (24px and up, or 18.66px and up in bold). Text over a background image is not checked.
• Oversized images, images whose file is at least 1.5 times larger than they are shown, allowing for the screen's pixel density.
• Missing alt text, images with no alt attribute at all. An empty alt, the right choice for a purely decorative image, is not flagged.
• Uneven spacing, rows and columns of four or more items laid out with flexbox where a gap differs by more than 1px from the most common one.

Each kind lists up to 40 issues. Click an issue to outline the elements it affects in the preview, and click it again to clear the outlines.

Fix with AI

Every issue has a Fix with AI button. It turns Inspect off, opens chat with a prompt that describes the problem, such as the two colors and their ratio for low contrast text, and attaches the affected elements the way selecting an element does, up to 10 of them. When more elements are affected, the prompt says how many. Nothing is sent until you send it, so you can edit the prompt first, and if your message box already has text, the prompt is added after it.

Scanning

The Colors, Fonts, Assets and Checks tabs read the page when you open them. If the page changes, click the refresh button next to the summary, Scan the page again, to read it again. Very large pages are read up to 8,000 elements, and the summary says so when a page is only partly scanned.

Opening another page in the preview clears the selection, and the tabs read the new page.

Leave Inspect with Escape

While the pointer is over the preview, or a highlight is frozen, Escape first unfreezes the highlight, then clears the selected element, then turns Inspect off. Anywhere else in the editor, Escape clears the selected element if there is one, and the next Escape turns Inspect off.

Next

• Select an element attaches an element to chat so AI can change it.
• Use the preview covers pages and viewports.