Differenza tra due stili di elementi con Google Chrome

Question

Uso gli strumenti di sviluppo di Google Chrome e continuo a ispezionare un elemento contro un altro avanti e indietro per scoprire cosa potrebbe causare un particolare problema di stile.

Sarebbe bello per confrontare le differenze di stile tra l'elemento 1 e l'elemento 2.

si può fare con Chrome attualmente o tramite qualche soluzione? C'è uno strumento là fuori che può fare quello che sto cercando?

esempio attuale di differenza di stile è che ho un inline H4 accanto a un A dove il A sta comparendo superiore in allineamento verticale. Non sto cercando una soluzione in questa domanda, come lo risolverò.

Answer 1

---

Aggiornamento: Come risultato di questa discussione, è stato creato l'estensione "CSS Diff" Chrome.

---

grande domanda e grande idea per l'estensione!

Proof of concept

Come una prova di concetto, possiamo fare un piccolo trucco qui ed evitare di creare l'estensione. Chrome mantiene gli elementi selezionati tramite il pulsante 'inspect element' nelle variabili. Ultimo elemento selezionato in $0, uno prima che nel $1 ecc Sulla base di questo, ho creato un piccolo frammento che mette a confronto due ultimi elementi ispezionati:

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

Come si usa?

Ispezionare due elementi che si desidera confrontare, uno dopo l'altro, e incollare il codice sopra per console.

Risultato