css - teclado - Diferencia entre dos estilos de elemento con Google Chrome

inspeccionar elemento guardar cambios

Question

Utilizo las herramientas para desarrolladores de Google Chrome y constantemente inspecciono un elemento contra otro para ver qué puede estar causando un problema de diseño en particular.

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

¿Se puede hacer esto con Chrome actualmente o mediante alguna solución alternativa? ¿Hay alguna herramienta que pueda hacer lo que estoy buscando?

El ejemplo actual de diferencia de estilo es que tengo un H4 línea al lado de una A donde el A aparece más alto en la 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 de Chrome " CSS Diff ".

¡Gran pregunta e idea genial para la extensión!

Prueba de concepto

Como una prueba de concepto, podemos hacer un pequeño truco aquí y evitar crear extensiones. Chrome mantiene los elementos que seleccionas mediante el botón ''inspeccionar elementos'' en las variables. Último elemento seleccionado en $0 , uno anterior en $1 etc. Basándome en esto, he creado un pequeño fragmento que compara los 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 usarlo?

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

Resultado