Unterschied zwischen zwei Elementstilen bei Google Chrome

Ich verwende Google Chrome-Entwicklertools und überprüfe ständig ein Element gegen ein anderes, um herauszufinden, was möglicherweise ein bestimmtes Stylingproblem verursacht.

Es wäre schön, die Stilunterschiede zwischen Element 1 und Element 2 zu vergleichen.

Kann dies derzeit mit Chrom oder über eine Problemumgehung erfolgen? Gibt es da draußen ein Tool, das das kann, wonach ich suche?

Aktuelles Beispiel für einen Stilunterschied ist, dass ich eine Inline H4neben einer habe, Abei der Adie vertikale Ausrichtung höher erscheint. Ich suche keine Lösung für diese Frage, da ich sie klären werde.

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 $1usw. 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