Cómo solucionar problemas de resolución de CSS/Javascript

Question

A menudo me resulta necesario depurar problemas de diseño de CSS que implican cambios DOM causados ​​por Javascript en reacción a un evento de desplazamiento o diferentes reglas de CSS que se aplican debido al selector: hover.

Normalmente, utilizaría Firebug para inspeccionar el elemento que me está causando problemas y ver cuáles eran sus propiedades de CSS, y de dónde provienen esas propiedades. Sin embargo, cuando está involucrado el estacionario, se vuelve imposible, ya que tan pronto como mueve el mouse hacia abajo al panel Firebug, los elementos que le interesan ya no están suspendidos, las reglas de CSS que se aplican son diferentes, y (en el caso) de JS se desplaza) se cambia el DOM.

¿Hay alguna forma en que pueda "congelar" el estado del DOM y la aplicación de: pase el mouse para inspeccionar el DOM como estaba durante un evento de desplazamiento?

Cualquier otra idea sobre cómo depurar este tipo de problema es bienvenida, por supuesto.

Answer 1

Agregue un controlador de función onmouseover al elemento que está tomando el :hover. Dentro de esa función, llame al console.info(element) en cualquier elemento que desee conocer.

myHoverElement.onmouseover = function() { 
    console.info(document.getElementById("someotherelementofinterest")); 
}; 

Cuando ejecuta esto con firebug activo, el elemento estará disponible para inspeccionar en la consola de Firebug.

Answer 2

de problemas de CSS, encuentro desarrollador Plugin web muy valiosa:

http://chrispederick.com/work/web-developer/

carga, entonces usted tiene 2 posibles herramientas a su disposición.

1. css heredado de archivos en cualquier elemento sobre moused uso shift-ctrl-y

2. css computarizada (incuding cualquier estilo en línea = aplicada que no se encuentra en un archivo .css - oa través de una método .css de jquery, etc.) - pulse shift-ctrl-f

este último también devolverá todas las clases aplicadas al elemento.

por supuesto, tiene otros grandes usos tales como, excelente depuración de formas, incluyendo la edición de campos ocultos y galletas (que pueden ser utilizados para las pruebas de penetración)

Answer 3

que tenía el mismo problema y encontró que mientras yo no pudo inspeccionar los objetos de flotación en Firefox con Firebug, Safari's Web Inspector congelaría el estado actual y permitiría la inspección. Para activar el inspector web de Safari, introduce la siguiente línea en el terminal y reiniciar Safari:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true 

Activa el elemento estacionario en el navegador, a continuación, haga clic derecho y seleccione 'Inspeccionar elemento'. La página se congelará en su estado actual, lo que le permite inspeccionar los objetos fugaces hasta el contenido de su corazón.

Answer 4

Puede hacer esto en Firebug, pero es un poco "buggy". Si inspecciona el elemento y luego hace clic en la pestaña html, en la pestaña DOM, por ejemplo, cuando vuelva a la pestaña html, la pestaña "style" css de la derecha tendrá un selector desplegable de flecha donde puede seleccionar : el estado de desplazamiento de ese elemento para estar activo. Apesta tener que cambiar las pestañas para que se muestre, pero funciona para mí.

Answer 5

No hay una solución perfecta (efecto de mouseover/hover-simulation) en firebug.

Sin embargo, hay un par de formas de editar su estado estacionario en Firebug:

1. Añadir un estado :active, junto con su :hover

   a:hover, a:active { ... }

   Si pasa el ratón hacia abajo en su elemento, arrastrar y soltar, permanece activo.

2. convertir al Estado :hover en una clase .hover

   Puede editar la regla CSS haciendo clic en el archivo de origen (en la ficha Estilo de Firebug)

   Luego, por supuesto, deberá añadir (y eliminar) la clase .hover de su elemento.

Answer 6

También puede inspeccionar ese elemento, luego en el estilo de la pestaña debe haber una pequeña flecha hacia abajo. Tendrá algo así como "Mostrar agente de usuario", "Expandir propiedades de taquigrafía", luego debería haber 2 más debajo de eso (supongo que está inspeccionando algo que tiene un estado de vuelo estacionario) :active y :hover seleccione :hover y debe se dorado.

Answer 7

A menudo hago algunos CSS o Javascript alternativos para "congelar" mi evento suspendido; Ajústelo a la perfección con Firebug y vuelva a poner mi vuelo estacionario en su lugar.

Answer 8

En Firebug, mientras está en la vista HTML, mire hacia el panel derecho y busque la pestaña "Estilos". Haga clic en la flecha hacia abajo y seleccione :hover.

Answer 9

Sí, puede hacer clic con el botón derecho en "Inspeccionar elemento" al activar el estado de desplazamiento. Esto funcionó para mí en Firebug y WebKit.

Answer 10

Al inspeccionar los enlaces, Firebug muestra el estado CSS predeterminado, es decir, los estilos aplicados a un enlace. Por defecto, los siguientes: hover y: estilos activos no se muestran. Afortunadamente, se puede cambiar el estado de la conexión haciendo clic en Estilo y eligiendo la opción adecuada:

Answer 11

Algunos juegos de herramientas de JavaScript, como el uso de Dojo clases CSS como dijitButtonHover el estilo en lugar de: vuelo estacionario.

Por lo tanto, la pestaña Estilo: el truco de desplazamiento no funciona.

En cambio, puede hacer clic en el nodo (que es cambiar de clase CSS) en la ficha HTML, y "Interrumpir en atribuir el cambio"

Answer 12

En Chrome (versión 35):

• inspeccionar elemento
• Dentro del visor de elementos, haga clic derecho en el elemento.
"estado elemento de fuerza"
• Select ->: activa,: hover,: enfoque,: visited

Answer 13

En Firefox (v33.1.1):

• Inspeccionar elemento (Q)
• en la vista DOM haga clic derecho en el elemento
• seleccione: hover,: activa o: se centran en la parte inferior del menú contextual

Answer 14

sé esta publicación es un poco antigua, pero para aquellos que encuentran esto en Google, creé una herramienta de navegador cruzado que te permite visualizar tu diseño de HTML/CSS con solo mover el mouse. Puede ver fácilmente los elementos en su estado de desplazamiento.

HTML Box Visualizer - GitHub