我使用谷歌Chrome开发者工具，不断地来回判断一个元素和另一个元素，以找出可能导致特定样式问题的原因.
比较元素1和元素2在风格上的差异会很好.
目前是否可以使用Chrome或通过一些解决方法来实现这一点？有没有工具可以做我想要的？
Current example of style difference is that I have an inline 100 next to a 101 where the 101 is appearing higher in vertical alignment. I am not seeking a solution in this question as I will sort it out.
Update:作为讨论的结果，创建了"CSS Diff"Chrome扩展.
很好的问题和很酷的扩展 idea ！
Proof of concept
作为概念证明，我们可以在这里做一个小技巧，避免创建扩展.Chrome将通过"判断元素"按钮 Select 的元素保留在变量中.$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);
How to use it?
逐个判断要比较的两个元素，并将上面的代码粘贴到Console.
Result个
