83

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

要素1と要素2のスタイルの違いを比較するとよいでしょう。

これは、現在Chromeを使用して、またはいくつかの回避策を介して実行できますか？私が探していることを実行できるツールはありますか？

スタイルの違いの現在の例は、垂直方向の配置でがより高く表示されている場所のH4横にインラインがあることです。私はそれを整理するので、私はこの質問の解決策を探していません。AA

4

1 に答える 1

148

更新：この議論の結果、「CSSDiff」Chrome拡張機能が作成されました。

ここに画像の説明を入力してください

拡張のための素晴らしい質問とクールなアイデア！

コンセプトの証明

概念実証として、ここで小さなトリックを実行して、拡張機能の作成を回避できます。Chromeは、「要素の検査」ボタンで選択した要素を変数に保持します。で最後に選択された要素$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つの要素を次々に調べ、上記のコードをコンソールに貼り付けます。

結果

提供されたスニペットからのサンプル出力

于 2012-09-26T07:19:38.340 に答える