diagnostic · one of 36 free, no counter
Compare
Why do these two elements look slightly different?
Two buttons that were meant to be the same button drift apart two pixels at a time, and by eye all anyone can say is that something is off. This holds both side by side on every computed property the inspector reads and marks the ones that differ - so “something is off” becomes three rows: the padding, the font size and the background nobody remembers changing.
Reach it Press ⌘ + K on any tab and type compare. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
two elements side by side, with every computed value that differs markedA review where one instance of a component looks wrong and nobody can say how, a design system audit where drift is the finding, or the recurring one: this works on staging and not in production, and the answer is a computed value one of them resolved differently.
Asked about this diagnostic
4 of themEvery property matches, so why are they different sizes?
Because two elements can agree on every computed property and still differ by two hundred pixels - width is decided by content and layout, not only by declarations. The box measurements are compared separately and listed first, because very often they are the whole finding.
Does it change or store anything?
No. Both sides are the same snapshot the page already sends for an ordinary selection, so nothing is read twice, no styles are written, and neither element is kept anywhere once the panel closes.
Can I compare an element against one on another page?
Not directly - both snapshots come from the page in front of you. For the same page in two deployments, the Environments diff is the tool built for exactly that shape.
What does Swap do?
It exchanges A and B, which matters because the differences read directionally - “A is 14px, B is 15px” - and sometimes the element you meant as the reference landed in the wrong slot. Swapping re-reads nothing; it relabels what is already held.
how to use compare
- Open Compare, arm side A, and click the first element on the page.
- Arm side B and click the element it was meant to match.
- Read the box measurements first, then the property groups: only the differing rows are marked.
- Fix the rows that differ. Nothing on either element was changed by the reading.
70 of these · no host permissions · three free audits