61

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.Diferencia entre dos estilos de elemento con Google Chrome

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é.

Respuesta

127

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

enter image description here


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

sample output from provided snippet

+0

fantástico. He publicado una pregunta de seguimiento http://stackoverflow.com/questions/12611440/accessing-chromes-last-inspected-element-being-0-and-1-via-js –

+0

Desde que terminé creando una extensión de Chrome para esto, mi respuesta original fue actualizada. –

+0

@KonradDzwinel Ojalá pudiera darte un +10. realmente genial. – Geek

Cuestiones relacionadas