WhyCSS Inspector

About

WhyCSS is a straightforward developer tool that helps you figure out exactly why a CSS property isn't being applied to an element.

We've all been there: you write a CSS rule, refresh the page, and nothing happens. Instead of digging through the default DevTools trying to trace a massive stylesheet cascade, you can just click the WhyCSS icon (or right-click an element) to open it in your side panel.

It breaks down exactly what rules are hitting the element, what properties are being overridden, and gives you the exact specificity score for each rule so you can clearly see who is winning the specificity war.

FEATURES:

• See all CSS rules applied to an element in one clean, readable table.

• Specificity scores (e.g., 0,1,1) are calculated and listed next to every rule.

• Properties that are overridden by stronger rules are crossed out.

• Hover over a rule in the panel to highlight the matching elements on the live page, so you know exactly what a confusing selector is actually targeting.

• Built-in diagnostic hints spot basic problems (like layout conflicts or accessibility contrast issues).

• A built-in tab manager inside the side panel lets you keep track of elements across different browser tabs without losing your place.

PRIVACY:

This extension is built to be extremely lightweight and respects your privacy. It only runs when you explicitly click the action button or select the context menu option. It only uses the activeTab permission, meaning it has zero access to your browsing data until you actively choose to inspect a page, and no data is ever collected or sent off your machine.