Różnica między dwoma stylami elementów w Google Chrome

Question

Różnica między dwoma stylami elementów w Google Chrome

Używam narzędzi programistycznych Google Chrome i ciągle sprawdzam jeden element przed drugim, aby dowiedzieć się, co może być przyczyną konkretnego problemu ze stylizacją.

Byłoby miło porównać różnice w stylu między elementem 1 i elementem 2.

Czy można to zrobić z chrome obecnie lub przez jakieś obejście? Czy istnieje narzędzie, które może zrobić to, czego szukam?

obecny przykład różnicy stylów jest taki, że mam inline H4 obok A Gdzie A pojawia się wyżej w pionowym wyrównaniu. Nie szukam rozwiązania w tym pytaniu, ponieważ je rozwiążę.

66

css google-chrome-devtools google-chrome google-chrome-extension styles

Author: Valamas, 2012-09-26

Source

1 answers

score 132 · Accepted Answer

Update: w wyniku tej dyskusji powstało rozszerzenie Chrome" CSS Diff ".

Świetne pytanie i fajny pomysł na rozszerzenie!

Proof of concept

Jako dowód koncepcji, możemy zrobić małą sztuczkę i uniknąć tworzenia rozszerzenia. Chrome przechowuje elementy wybrane za pomocą przycisku "Sprawdź element" w zmiennych. Ostatni wybrany element w $0, jeden wcześniej w $1 itd. Opierając się na tym, mam utworzono mały fragment porównujący dwa ostatnie kontrolowane elementy:

(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);

Jak go używać?

Sprawdź dwa elementy, które chcesz porównać, jeden po drugim, i wklej powyższy kod do konsoli.

Wynik

Przykładowe wyjście z dostarczonego fragmentu