Inspeccionar el estado de desplazamiento en Firebug o Chrome DevTools

Question

Tengo un elemento HTML que tiene un estado de desplazamiento de CSS. Hay un error con el margen o relleno en el vuelo estacionario y cada vez que uso el mouseover, el contenido del elemento se desliza un poco, es molesto.

Me gustaría depurar usando FireBug o Chrome Dev Tools, pero un problema común que he tenido con estas herramientas es que después de seleccionar el elemento de Firebug/devtools obviamente necesito mover el mouse de regreso al dev herramientas y el estado de desplazamiento ya no está habilitado.

¿Cómo inspecciono/depuro un elemento HTML usando estas herramientas con el elemento en su estado de desplazamiento?

Answer 1

Chrome Dev Tools tiene incorporado: selector de estado de desplazamiento en el panel Elementos> Estilos. Puede alternar otras pseudo-clases (como: activo) allí también.

Answer 2

Aquí hay una captura de pantalla de Firebug & los que no están lo suficientemente aguda para ver el comentario de agriboz (como yo)

Answer 3

para las pruebas :hover estados en Chrome

Para la prueba :hover estado en Firefox (Es necesario añadir en firebug)

Answer 4

Ahora se puede ver tanto las reglas de estilo pseudo-clase y forzarlos en elementos.

Para ver las reglas como: desplace el cursor sobre el panel Estilos, haga clic en el botón pequeño del cuadro de puntos en la parte superior derecha.

Para forzar un elemento en: estado de desplazamiento, haga clic con el botón derecho en el elemento.

O bien, puede usar el panel de la barra lateral de Event Listener Breakpoints en el panel Scripts y seleccionar pausar en los manejadores de mouseover.