Unterschied zwischen zwei Elementstilen mit Google Chrome

Question

Ich benutze Google Chrome-Entwicklerwerkzeuge und untersuche ständig ein Element gegen ein anderes hin und her, um herauszufinden, was ein bestimmtes Styling-Problem verursachen könnte.

Es wäre schön, die Unterschiede in der Art zwischen Element 1 und Element 2

dies derzeit mit Chrom getan werden kann, zu vergleichen oder über irgendeine Abhilfe? Gibt es da draußen ein Werkzeug, das tun kann, wonach ich suche?

Aktuelles Beispiel für Stil Unterschied ist, dass ich ein Inline-H4 neben einem A haben, wo die A höher in vertikaler Ausrichtung erscheinen. Ich suche keine Lösung in dieser Frage, da ich es lösen werde.

Answer 1

---

Update: Als Ergebnis dieser Diskussion, die "CSS Diff" Chrome-Erweiterung erstellt wurde.

---

Große Frage und coole Idee für die Erweiterung!

Proof-of-Concept

Als Proof of Concept, können wir einen kleinen Trick tun und die Schaffung von Erweiterung zu vermeiden. Chrome behält Elemente, die Sie über die Schaltfläche "Element prüfen" auswählen, in Variablen bei. Zuletzt ausgewähltes Element in $0, in $1, dass man vor usw. auf dieser Gründend, ich habe ein kleines Snippet erstellt, die letzten zwei inspizierten 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 es zu benutzen?

Untersuchen Sie zwei Elemente, die Sie vergleichen möchten, nacheinander und fügen Sie den obigen Code in die Konsole ein.

Ergebnis