Google Chrome的两种元素风格之间的差异

Question

我使用谷歌Chrome开发人员工具,我不断检查一个元素来回反复来找出可能导致特定样式问题的因素.

比较元素1和元素2之间的风格差异会很好.

这可以通过Chrome目前或通过一些解决方法来完成吗？有没有可以做我想要的工具？

样式差异的当前示例是我在垂直对齐中出现较高H4的A位置旁边的内联A.我不会在这个问题上寻求解决方案,因为我会解决它.

Answer 1

更新:作为此讨论的结果,创建了" 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);

如何使用它？

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

结果