Viewport
Fact Sheet Download

Drawing VFS—01 / viewport evidence

Stop guessing.
Measure the viewport.

Select an element. Get a portable fact sheet for its box model, clipping chain, scroll ancestors, stacking hit test, and on-screen reachability.

Download for Chromium Read a sample report

Free · local only · no page contents or form values

Exploded blueprint drawing of nested browser layout boxes, clipping planes, and measurement guides
Plate 01: the visible viewport is an intersection, not a DOM property.

“Why is this below the fold?”

“Which ancestor clips it?”

“What wins the hit test?”

“Why is it off-centre?”

01 / Evidence, not interpretation

One selection. A checkable answer.

The report records what the browser knows now, in pixels and explicit reason codes. Save the JSON with a bug, paste it in a review, or assert it in a test.

Target#checkout-panel
Not reachable
37% visiblecentre hit: .sticky-footer
Border box
420 × 288 px
Viewport position
x 804, y 612
Centre delta
+502 x / +396 y
Position / z-index
static / auto
Primary findingClipped by .shell__body

The visible centre is occluded by .sticky-footer.

  1. 01.shell__bodyoverflow-y: auto
  2. 02main.appoverflow: hidden
  3. 03viewport1440 × 900

02 / Recorded fields

The missing layer between DOM and screenshot.

Geometry

Border and content boxes, document offset, viewport position, centre delta, and visible-area ratio.

Clip & scroll chain

Each relevant ancestor, overflow mode, scroll extent, current offset, and clipped edges.

Reachability

Computed visibility, viewport intersection, centre-point hit target, pointer events, and reason codes.

Style deltas

Position, insets, transform, z-index, box sizing, margins, borders, and padding—only the facts that move boxes.

03 / Workflow

From odd layout to durable evidence.

  1. 1

    Pick

    Press the toolbar button or Alt + Shift + V, then choose an element.

  2. 2

    Read

    See the verdict, measurements, hit test, and ancestor chain immediately.

  3. 3

    Export

    Copy or download versioned JSON. Query strings, form values, and page text stay out.

04 / Same facts in tests

Ask Playwright what a user can reach.

The companion helper runs the same inspection engine against a locator. It returns the report or throws with exact reason codes.

Download helperType definitions
checkout.spec.ts
import { getViewportFactSheet } from
  './viewport-fact-sheet-playwright.mjs';

const facts = await getViewportFactSheet(
  page,
  page.getByRole('button', { name: 'Pay now' })
);

expect(facts.verdict.reachable).toBe(true);

05 / Install locally

Open the drawing set.

  1. 1Download and unzip the Chromium package.
  2. 2Open chrome://extensions and enable Developer mode.
  3. 3Choose “Load unpacked” and select the unzipped folder.
Download extension package