Viewport extension

Preview tools

Three tools for looking closely: rulers with draggable guides, an element inspector, and screenshots that come out crisp enough for Figma.

Rulers & guides

• Toggle on rulers along the top and left edges.
• Drag from a ruler to drop a screen-fixed guide; double-click a guide to remove it.
• Turning rulers off clears all guides.

Inspect

Hover any element to see its tag, size, typography (weight, line-height, letter-spacing), and hex colors. Click to copy; Esc to exit.

Screenshots

The camera button offers two captures:

• Current view: the frame's viewport as-is.
• Full page: scrolls the framed site top to bottom and stitches it; sticky and fixed chrome appears once instead of repeating on every screenful.

Captures always export at 2× the viewport width (site-390w@2x-….png), regardless of how the frame is scaled on your screen. The frame is re-rendered at capture scale and stitched tile by tile, so text stays crisp when you drop it into Figma. PNGs save to your Downloads folder; Esc cancels a capture in progress.