Your First Diagnosis: Loupely Lens

What you need before you start #

You need the Loupely Lens Chrome extension installed and pinned to your toolbar, and either an active free trial or an active Lens Annual plan. Installation takes about 2 minutes if you haven’t done it yet. See Installing the Loupely Lens Chrome Extension.

Lens doesn’t require any plugin or account on the site you’re diagnosing. It reads directly from the browser. That means you can use it on any website you can open in Chrome, not just sites you own or manage.

How to run your first diagnosis #

The process has 3 stages. Here’s what happens at each one.

Stage 1: Pick your element and your property #

1. Go to the page with the visual problem. Open the page in Chrome where something looks wrong. The button that’s the wrong color, the section that won’t center, the layout that breaks on mobile. The problem needs to be visible on screen.
2. Click the Loupely Lens icon in your Chrome toolbar to activate the picker. Your cursor will change to indicate Lens is active.
3. Click directly on the element that looks wrong. The actual element: the button, the heading, the container. The popup expands and shows you a screenshot of the element you clicked, along with a panel listing every CSS property currently active on it.
4. Click the property that’s wrong. In the computed styles panel, you’ll see a list of properties and their current values. Click the one you’re trying to change. For example, if the button color is wrong, click background-color. The property row highlights and an edit field appears.
5. Type what you want it to be. Enter your target value. For a color, that might be a hex code or a color name. For a size, a pixel value.
6. Watch the live preview. As soon as you type a value, Lens applies it to the element on the live page so you can see what it looks like. If Lens determines the change won’t survive production CSS, a warning panel appears naming the source that’s blocking it. If it looks like the change would hold, you’ll see a quiet confirmation instead. Either way, the preview is showing you what the value looks like, not guaranteeing the change is permanent. Diagnose is the path to the permanent fix.
7. Add any extra context (optional). There’s a small text field below the panel for anything Lens can’t see from the default page state: “only on mobile,” “only in Safari,” “started after I updated the theme.” Leave it blank if the problem is visible right now on desktop.
8. Click Diagnose. Lens runs the capture through its rule engine. This step requires an active plan or free trial.

Stage 2: Read the Fight View #

The popup updates to show you what’s winning on the property you selected and why your intended value isn’t taking effect. You’ll see:

• The rule that’s currently winning: its selector, where it came from (your theme, a plugin, your Page Builder), and its value.
• The rules that tried and lost: each competing rule and why it lost (more specific selector, loads later, uses !important, inside an @media or @layer).
• An override prescription, if Lens can generate one: the exact CSS to paste that will make your change win.

If the override prescription is there and looks right, you can copy and paste it immediately. If you want the full picture, click See full detail.

Stage 3: The Triage Page #

Clicking “See full detail” opens a dedicated page in a new tab with the complete diagnosis: the full winner and loser breakdown, the override prescription with copy button and variant options, the ancestor chain, where every style came from, and a pre-written developer handoff message if you need one.

You don’t always need Stage 3. If the Fight View shows you the override and it’s clear, copy it and paste it in.

If you clicked the wrong element #

Click the Lens icon again to reactivate the picker and click the correct element. No diagnosis is counted until you click Diagnose at Stage 1.

What the override looks like when you paste it #

When Lens generates an override prescription, it’s a complete CSS rule targeted as narrowly as possible. You copy it and paste it into your theme’s Custom CSS field (in WordPress: Appearance > Customize > Additional CSS) or your Page Builder’s custom CSS panel. Save. Refresh. The problem should be gone.

Lens only offers the override when it’s confident the fix is right. If the situation is more complex, it routes to developer handoff instead.

The developer handoff #

If the triage route is developer handoff, the Triage Page gives you a structured capture file and a pre-written message you can send directly to your developer. The message contains the specific conflict, the origin of each competing rule, and everything your developer needs to write a fix without asking follow-up questions.