When you click an element with Lens active, the popup expands and shows you a panel listing every CSS property currently applied to that element. This is the computed styles panel, and it’s the starting point for every diagnosis. You don’t type a description of the problem into a text box. You click the property that’s wrong.
What the panel shows #
Each row in the panel is one CSS property. The row shows the property name on the left and its current computed value on the right. If the value is a color, a small swatch appears so you can see it at a glance rather than decoding a hex code. If the property is using a CSS Variable, the row shows both the variable token and the value it resolves to, formatted as var(--token-name) → resolved value.
Only properties that are actively set appear. Browser defaults, the baseline styling every browser applies before any stylesheet runs, are filtered out. What you see in the panel is what your site’s CSS is actually doing to that element.
How to select a property #
Click any row. The row highlights, and an edit field appears below the panel. The field is pre-populated with the current value as a placeholder so you can see what Lens is starting from.
Type your target value: what you want it to be, not what it is now. For a color, that’s a hex code, an rgb value, or a color name. For a size, a pixel or percentage value. For a font, the font name. This tells Lens exactly what you’re trying to achieve, which is what the rule engine needs to identify what’s blocking it.
The pseudo-element section #
If the element you clicked has an active ::before or ::after pseudo-element with non-default styling, a second panel appears below the main one labeled “Pseudo-element (::before / ::after).” This surfaces things like decorative borders, icons, or overlays that are applied via CSS pseudo-elements rather than real HTML elements. If something looks wrong around an element and you can’t find the cause in the main panel, check here.
The “Anything else?” field #
Below the computed styles panel is a small optional text field. Use it to add context Lens can’t see from the CSS alone: “only happens on mobile,” “only in Safari,” “started after I updated the theme last week,” “only on the checkout page.” This goes into the session record and shows up in the developer handoff message if you need one. Leave it blank if the problem is visible right now in the current Viewport.
When you’re ready #
Once you’ve clicked a property row and typed your target value, click Diagnose. That’s the step that requires an active plan or free trial. You can also click Download at any point to get the capture file without requiring a plan. See The Lens Capture File for what that file contains and when it’s useful.
If you’re not sure which property to click, start with the most obvious one. If the button color is wrong, click background-color. If text isn’t centering, click text-align. Lens will show you what’s winning on that property and why, which usually makes the broader problem clear.