Google Chrome浏览器的两种元素样式之间的区别

我使用Google Chrome开发人员工具，并且不断地来回检查一个元素，以找出可能导致特定样式问题的原因。

比较元素1和元素2在样式上的差异会很好。

目前可以使用chrome或通过某些解决方法来完成此操作吗？有没有可以做我想要的工具？

当前样式差异的示例是，我在的H4旁边有一个内联，A其中的A行在垂直对齐方向上显示较高。我不会在这个问题上寻求解决方案，因为我会对其进行梳理。

更新：通过此讨论，创建了“ CSS Diff ” Chrome扩展程序。

扩展的好问题和好主意！

概念证明

作为概念验证，我们可以在此处做一些小技巧，避免创建扩展。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);

如何使用它？

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

结果