CSS Cause Map

A layout field notebook for Chrome

Explain the gap.
Keep the proof.

Pick a live element and get a compact map of the rules, box metrics, and ancestor constraints most likely shaping it—without sending your DOM anywhere.

Download for Chrome v1.0See the field method ↓

Free core · MV3 · active tab only · load unpacked in developer mode

Top-down lab notebook with nested paper rectangles connected by red and blue measurement lines beside calipers and a ruler
Fig. 01 Follow one measured effect through its ancestor chain.

LOCAL Your DOM stays in Chrome

DETERMINISTIC Same inputs, same ranking

SHAREABLE Scrubbed HTML + JSON

Field method / three moves

From “why?” to a testable lead.

Cause Map compresses the useful parts of Computed, Layout, and the ancestor chain into one evidence sheet.

  1. 01

    Circle the specimen

    Open the side panel and pick the element on the live page. Hover, click, or use Tab and Enter.

  2. 02

    Read the chain

    Direct rules, flex/grid context, clamping sizes, box model, positioning, and transforms are ranked with their source selector.

  3. 03

    Reproduce and tear off

    Trigger the defect, recapture observed DOM changes, then export scrubbed HTML or JSON for the bug report.

A report that says enough

The likely constraint rises to the top.

Scores are evidence strength, never a claim that CSS Cause Map can expose a browser engine’s private causal graph. Each lead includes the reason and the rule to toggle next.

  • Final box and offset
  • Matched CSS source
  • Up to eight ancestors
  • Changes between captures

Selected element

article.card312 × 184 px
  1. 01
    grid-template-columnsrepeat(3, 1fr)

    The parent defines tracks that constrain the selected item.

    .results · /styles/layout.css
    strong
  2. 02
    gap24px
    strong
  3. 03
    max-width72rem
    likely

computed evidence
≠ internal causation

Private by construction

The page is evidence, not inventory.

No accounts, analytics, remote diagnosis, DOM upload, or broad browsing permission. The extension runs only after you invoke it on the active tab. Exports omit page text and strip URL queries; selectors can be anonymized too.

Read the privacy note →

Optional one-time unlock

Keep the notebook.

The free edition includes the complete live map, recapture, and both export formats. Field Kit adds an unlimited on-device report log and private notes.

$12 one time

  • Unlimited local field log
  • Private notebook notes
  • No subscription
Buy Field Kit

Restore purchase

Verify your Field Kit key

Your token is stored only in this browser.

Next defect

Don’t toggle blind.

Download CSS Cause Map

Works on Chrome 116+. The ZIP contains an unpacked MV3 extension.