[解決済み] Google Chromeの2つの要素スタイルの違いについて

質問

私は Google Chrome の開発者ツールを使用しており、特定のスタイル設定の問題を引き起こしている可能性があるものを見つけるために、常にある要素を別の要素に対して検査し、行ったり来たりしています。

要素 1 と要素 2 のスタイルの違いを比較するのはいいことだと思います。

これは現在、クロームで、または何らかの回避策で行うことができますか？私が探していることを実現できるツールはありますか？

スタイルの違いの現在の例は、私はインラインの H4 の隣に A があるところ A が縦に並んで表示されています。私はそれを整理するので、この質問で解決策を求めていません。

どのように解決するには？

更新しました。 この議論の結果、" CSS 差分 Chrome 拡張機能が作成されました。

素晴らしい質問と、拡張機能のクールなアイデアですね。

コンセプトの証明

コンセプトの証明として、ここで小さなトリックを行うことができ、拡張機能を作成する必要はありません。Chrome は、'inspect element' ボタンで選択した要素を変数に保持します。最後に選択された要素を $0 に、その一つ前の要素は $1 などです。これに基づいて、最後の2つの検査された要素を比較する小さなスニペットを作成しました。

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

どのように使用するのですか？

比較したい2つの要素を順に見ていき、上のコードをコンソールに貼り付けてください。

結果