谷歌浏览器的两种元素风格之间的差异

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

比较元素1和元素2之间风格的差异将是很好的。

这可以用铬目前或通过一些解决方法？ 有没有可以做我正在寻找的工具？

当前风格差异的例子是，我有一个A旁边的内联H4 ，其中A在垂直alignment中出现较高。 我不会在这个问题上寻求解决办法，因为我会解决这个问题。

Answer 1

---

更新：作为讨论的结果，“ CSS差异 ”Chrome扩展程序已创build。

---

很好的问题和很酷的想法延伸！

概念validation

作为概念的certificate，我们可以在这里做一个小窍门，避免创build扩展。 Chrome会通过variables中的“检查元素”button保留您select的元素。 在$0最后一个选定的元素，之前在$1等。在此基础上，我创build了一个小片段，比较最后两个检查元素：

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

如何使用它？

检查你想要比较的两个元素，并将上面的代码粘贴到控制台。

结果