Diferencia entre dos estilos de elemento con Google Chrome

Question

Uso las herramientas de desarrollador de Google Chrome y estoy constantemente inspeccionando un elemento contra otro para saber qué puede estar causando un problema de estilo en particular.

Sería bueno para comparar las diferencias de estilo entre el elemento 1 y el elemento 2.

se puede hacer esto con el cromo en la actualidad o por medio de alguna solución? ¿Hay alguna herramienta que pueda hacer lo que estoy buscando?

ejemplo actual de la diferencia de estilo es que tengo una línea H4 junto a un A donde el A está apareciendo superior en alineación vertical. No busco una solución en esta pregunta ya que la resolveré.

Answer 1

---

Actualización: Como resultado de esta discusión, se creó la extensión "CSS Diff" Chrome.

---

Muy buena pregunta y la idea fresca para la extensión!

Prueba de concepto

Como prueba de concepto, se puede hacer un pequeño truco aquí y evitar la creación de extensión. Chrome mantiene los elementos que seleccionas mediante el botón 'inspeccionar elementos' en las variables. Último elemento seleccionado en $0, uno antes de que en $1 etc. Basándose en esto, he creado un pequeño fragmento que compara dos últimos elementos inspeccionados:

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

Cómo se usa?

Inspeccione dos elementos que desea comparar, uno tras otro, y pegue el código anterior en la consola.

Resultado