谷歌浏览器两种元素样式的区别

更新：作为讨论的结果，创建了“CSS Diff”Chrome 扩展程序。

https://i.stack.imgur.com/YHKum.png

很好的问题和很酷的扩展想法！

概念证明

作为概念证明，我们可以在这里做一个小技巧，避免创建扩展。 Chrome 将您通过“检查元素”按钮选择的元素保留在变量中。 $0 中的最后一个选定元素，$1 中的最后一个元素等。基于此，我创建了一个小片段来比较最后两个检查的元素：

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

如何使用它？

依次检查要比较的两个元素，然后将上面的代码粘贴到控制台。

结果

https://i.stack.imgur.com/0KoEK.png

---