Unterschied zwischen zwei Elementstilen bei Google Chrome

77

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.

Valamas
quelle

Antworten:

146

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

Geben Sie hier die Bildbeschreibung ein


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

Beispielausgabe des bereitgestellten Snippets

Konrad Dzwinel
quelle
Fantastisch. Haben eine Folgefrage gestapelt stackoverflow.com/questions/12611440/…
Valamas
Da ich dafür eine Chrome-Erweiterung erstellt habe, wurde meine ursprüngliche Antwort aktualisiert.
Konrad Dzwinel
1
@GeoffreyHudik CSS Diff-Erweiterung funktioniert jetzt zwischen den Registerkarten - probieren Sie es aus.
Konrad Dzwinel
1
Wenn es Ihnen nichts ausmacht, Firefox zu verwenden, habe ich eine Funktion hinzugefügt, mit der Sie mit der rechten Maustaste klicken, den Knoten "A" festlegen, mit der rechten Maustaste klicken, den Knoten "B" festlegen und Attribute, CSS für das Element und seine untergeordneten
NoBugs
5
Link ist derzeit tot
Wal