Your site has a problem that isn’t a broken feature. Something looks wrong: a color that isn’t what it should be, text that won’t center, a section that’s the wrong size for no reason you can find. No error message. No obvious cause. Just something you can see but can’t fix.
Loupely Lens is built for exactly that.
Loupely Lens is a Chrome extension that works on any website. You click the element that looks wrong, and Lens reads the full CSS picture behind it: every rule setting that property, where each rule came from, which rules tried to set the same thing and lost, and what the parent elements are doing that might be constraining the layout. Then it tells you in real human terms what’s causing the problem and gives you a specific next step.
Why this is hard without Lens #
The browser knows exactly why the element looks the way it does. The complete answer is in there. But it’s buried in DevTools under dozens of properties in an order that doesn’t reflect how you’d naturally look for a problem. Most people open DevTools, see the wall of information, and close it again. Lens reads the same information and hands you what matters.
Works on any website #
Lens isn’t limited to WordPress. It works on any website open in Chrome. You don’t need a plugin installed anywhere. Just the extension, a credit or an annual plan, and the element you’re staring at.
How it relates to Loupely #
Loupely Lens and Loupely are separate products that solve different versions of the same problem. Loupely is for when something stopped working: a checkout, a form, a login. Lens is for when something looks wrong. Both share one account. If you run into a functional failure on your WordPress site, see What Is Loupely.