Google Chromeの2つの要素スタイルの相違点

Question

私はGoogle Chromeの開発ツールを使用しています。特定のスタイリングの問題の原因を特定するために、ある要素を前後に徹底的に調べています。

素子1と素子2

間のスタイルの違いを比較するためにいいだろうこれは、現在、またはいくつかの回避策を経て、クロムで行うことができますか？私が探していることをすることができるツールがありますか？

現在のスタイルの違いの例は、Aの隣にインラインH4があり、Aの方が垂直方向の位置が高くなっています。私はそれを並べ替えるので、私はこの問題の解決策を模索していません。

Answer 1

---

更新：この議論の結果、 "CSS Diff" Chromeの拡張機能を作成しました。

---

グレート質問と拡張のためのクールなアイデア！コンセプトの証明として概念

の

証明、我々はここで小さなトリックを行うと拡張子を作成しないようにすることができます。 Chromeは変数の '要素の検査'ボタンを使用して選択した要素を保持します。

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

どのようにそれを使用する：この上に基づか$1などでその前$0、1の最後の選択された要素は、私は最後の二つの検査の要素を比較して、小さなスニペットを作成しましたか？

比較する2つの要素を順番に調べて、上記のコードをコンソールに貼り付けます。

結果