Update: Als Ergebnis dieser Diskussion wurde die Chrome-Erweiterung " CSS Diff " erstellt.
Tolle Frage und coole Idee zur Erweiterung!
Konzeptioneller Beweiß
Als Proof of Concept können wir hier einen kleinen Trick machen und vermeiden, Erweiterungen zu erstellen. Chrome behält Elemente bei, die Sie über die Schaltfläche "Element überprüfen" in Variablen auswählen. Zuletzt ausgewähltes Element in $0
, eines davor in $1
usw. Auf dieser Grundlage habe ich ein kleines Snippet erstellt, das die letzten beiden überprüften Elemente vergleicht:
(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)
Wie benutzt man es?
Untersuchen Sie zwei Elemente, die Sie vergleichen möchten, nacheinander und fügen Sie den obigen Code in die Konsole ein.
Ergebnis