View Categories

The Lens Capture File

1 min read

What the Lens capture file is #

The Lens capture file is a structured document containing all the CSS data Lens collected when you clicked an element. It’s available for download on the Triage Page after a completed diagnosis. You don’t need to download it to act on the triage step, but it’s there whenever you need to go further.

The file is formatted as structured JSON. You don’t need to read it or understand its contents. It’s designed to be read by developers, not by you. What matters is what’s in it and what it makes possible.

What’s inside the capture file #

  • The winning rules. Every CSS property applied to the element you clicked, and the exact rule and selector responsible for each one.
  • The losing rules. Every rule that was considered for each property but overridden, with the reason it lost: lower specificity, source order, @layer priority, or no !important.
  • Origin classification. Whether each rule came from the browser’s defaults, your theme, a specific plugin, your Page Builder, an Inline Style, a WPCode snippet, or a JavaScript injection. The stylesheet filename is included where available.
  • The ancestor chain. The same CSS picture for every parent element above the one you clicked, up to the body element, with the constraints each ancestor is applying.
  • Competitor elements. Any elements Lens detected as overlapping, competing for space, or constraining the element you clicked.
  • Capture context. The URL of the page, the Viewport dimensions at the time of capture, the browser version, and the timestamp.
  • Correlation output. The problem class Lens assigned and the specific rules that triggered the classification.

Using the capture file for developer handoff #

When the triage route is developer handoff, the capture file is what makes the handoff work. Your developer receives the complete CSS context for the problem: which rule is winning, which is losing, where each came from, and what the ancestor chain looks like. They don’t need to reproduce the problem in DevTools. They don’t need to ask what plugins you have or what your theme is called. The file contains all of that.

When sending to a developer: download the capture file from the Triage Page, attach it to your message or ticket, and include the pre-written message from the developer handoff section. That message tells them what to look for in the file.

How the capture file differs from a screenshot #

A screenshot shows what the page looks like. The capture file shows why it looks that way. A developer working from a screenshot has to manually inspect the element to reproduce the CSS state. A developer working from the capture file already has the CSS state. That’s the gap the file closes, and it’s why the time difference between the two approaches is usually measured in hours rather than minutes.