Google Chrome geliştirici araçları kullanmak ve sürekli ileri geri birbirine elemanı özel tasarım bir soruna neden olabilir ne olduğunu bulmak için İnceleme yapıyorum.

Element 1 element 2 arasında stil farklılıkları karşılaştırmak için iyi olurdu.

Bu şu anda ya da bazı çözüm üzerinden chrome ile yapılabilir mi? Aradığım şeyi yapabilecek bir araç var mı?

Tarzı fark mevcut örnek A yüksek dikey hizalama göründüğü yere H4 satır A bir yanında olmam. Bunu çözmek için uğraşıyorum. bu konuda bir çözüm arayışında değilim.

Güncelleme:Bu tartışma sonucunda, "CSS Diff" Chrome uzantı oluşturuldu.

Uzatma için büyük bir soru ve hoş bir fikir!

Kavram kanıtı

Kavramının bir kanıtı olarak, küçük bir hile burada ve uzantısı oluşturma engelleyebiliriz. Chrome 'element' değişkenleri düğmesi. kontrol) seçin öğeleri tutar Son $0, $1 Daha önce bir Seçili öğe vb. Bu dayanarak, son iki kontrol elemanları karşılaştıran küçük bir parçacık oluşturduk:

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

Nasıl kullanılır?

Birbiri ardına karşılaştırın ve kodu konsola yukarıdaki yapıştırmak istediğiniz iki unsur inceleyin.

Sonuç