Google Chrome 两种元素风格的差异

我使用谷歌浏览器开发工具，我不断检查一个元素对另一个来回找出什么可能导致一个特定的样式问题。

如果能比较元素1和元素2在样式上的差异就好了。

这是否可以做到与铬目前或通过一些工作区？有没有什么工具可以做到我想要的？

当前的风格差异的例子是，我有一个内联 H4旁边的 A的 A是出现在垂直对齐更高。在这个问题上我不寻求解决办法，因为我要把它解决掉。

12700 次浏览
小开
最佳答案

更新: 作为这次讨论的结果，“ CSS Diff”Chrome 扩展被创建了。

enter image description here

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

概念验证

作为概念的证明，我们可以在这里做一个小技巧，避免创建扩展。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);

怎么用？

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

结果

sample output from provided snippet


提交答案