Différence entre deux styles d'élément avec Google Chrome

Question

J'utilise Google Chrome outils de développement et j'inspecte constamment un élément contre un autre dans les deux sens pour savoir ce qui peut causer un problème de style particulier.

Ce serait bien de comparer les différences de style entre l'élément 1 et l'élément 2.

Cela peut-il être fait avec chrome actuellement ou via une solution de contournement? Existe-t-il un outil qui peut faire ce que je recherche?

L'exemple actuel de différence de style est que j'ai une ligne H4 à côté d'un A où le A apparaît plus haut dans l'alignement vertical. Je ne cherche pas de solution à cette question car je vais la régler.

Answer 1

---

Mise à jour: À la suite de cette discussion, l'extension " CSS Diff " Chrome a été créé.

---

Grande question et bonne idée d'extension!

Preuve de concept

Comme preuve de concept, nous pouvons faire une petite astuce ici et éviter de créer une extension. Chrome conserve les éléments que vous sélectionnez via le bouton "inspecter l'élément" dans les variables. Dernier élément sélectionné dans $0, un avant cela dans $1 etc. Sur cette base, j'ai créé un petit extrait qui compare les deux derniers éléments inspectés:

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

Comment l'utiliser?

Inspectez deux éléments que vous souhaitez comparer, l'un après l'autre, et collez le code ci-dessus sur la console.

Résultat