Chrome DevTools Now Shows You Why a CSS Rule Won Without Guessing

Chrome 151 shipped a genuinely useful, unglamorous DevTools update: the Styles tab now shows a full specificity breakdown for any CSS rule, right next to the rule itself. No more counting IDs, classes and elements by hand or pasting a selector into a specificity calculator in another tab to work out why a style you wrote isn't winning.

It sits alongside updates to the DevTools MCP server, letting AI coding agents inspect and debug real pages rather than guessing from source code alone, and support for the new interest button pseudo element. But the specificity breakdown is the one that saves time on literally every CSS debugging session, not just the occasional edge case.

It's a small feature, and that's exactly why it's worth flagging. The tools that quietly remove a repeated manual step tend to matter more day to day than the ones that make a splashy demo. If you haven't opened Styles tab specificity info before, it's worth a look next time a rule stubbornly refuses to apply.