Update: As a result of this discussion, the “CSS Diff” Chrome extension was created.
Great question and cool idea for extension!
Proof of concept
As a proof of concept, we can do a small trick here and avoid creating extension. Chrome keeps elements you select via ‘inspect element’ button in variables. Last selected element in $0, one before that in $1 etc. Basing on this, I’ve created a small snippet that compares last two inspected elements:
(function(a,b){
var aComputed = getComputedStyle(a);
var bComputed = getComputedStyle(b);
console.log('------------------------------------------');
console.log('You are comparing: ');
console.log('A:', a);
console.log('B:', b);
console.log('------------------------------------------');
for(var aname in aComputed) {
var avalue = aComputed[aname];
var bvalue = bComputed[aname];
if( aname === 'length' || aname === 'cssText' || typeof avalue === "function" ) {
continue;
}
if( avalue !== bvalue ) {
console.warn('Attribute ' + aname + ' differs: ');
console.log('A:', avalue);
console.log('B:', bvalue);
}
}
console.log('------------------------------------------');
})($0,$1);
How to use it?
Inspect two elements you want to compare, one after another, and paste the code above to console.
Result
