div - Cómo depurar problemas de CSS/Javascript

title css (14)

A menudo me encuentro con ganas de depurar problemas de diseño de CSS que involucran 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, usaría Firebug para inspeccionar el elemento que me causa 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 de que pueda "congelar" el estado del DOM y la aplicación de: hover para inspeccionar el DOM como estaba durante un evento de vuelo estacionario?

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

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.

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, puede cambiar el estado del enlace haciendo clic en Estilo y eligiendo la opción adecuada:

Algunos juegos de herramientas de JavaScript, como Dojo, usan clases de CSS como dijitButtonHover para estilo en lugar de: hover.

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

En su lugar, puede hacer clic con el botón derecho en el nodo (a quién cambian las clases CSS) en la pestaña HTML, y "Interrumpir el cambio de atributo".

En Chrome (versión 35):

Inspeccionar elemento
Dentro del visor de elementos, haga clic derecho en el elemento.
Seleccione "Estado del elemento de la fuerza" ->: activo,: hover,: focus,: visitado

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 .

En Firefox (v33.1.1):

Inspeccionar el elemento (Q)
En la vista DOM, haga clic derecho sobre el elemento
select: hover,: active o: focus en la parte inferior del menú contextual

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

Sin embargo, hay un par de maneras de editar tu estado de vuelo estacionario en firebug:

Agregue un :active estado :active , junto con su :hover
a:hover, a:active { ... }

Si presiona el mouse sobre su elemento, arrastre y suelte, permanece activo.
Convierte el estado :hover en una clase .hover
Puede editar la regla de CSS haciendo clic en el archivo de origen (en la pestaña Estilo de Firebug)
Entonces, por supuesto, agregarías (y eliminarías) la clase .hover de tu elemento.

Puedes 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í.

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

Visualizador de cuadros HTML - GitHub

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.

También puede inspeccionar ese elemento, luego, en el estilo de la pestaña debe haber una pequeña flecha desplegable. 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 el :hover seleccione el :hover y deberías ser dorado.

Tuve el mismo problema y descubrí que, si bien no podía inspeccionar los objetos de flotación en Firefox con Firebug, Safari Web Inspector congelaba el estado actual y permitía la inspección. Para activar el inspector web de Safari, simplemente ingresa la siguiente línea en el terminal y reinicia Safari:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Active el elemento de desplazamiento en el navegador, luego 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.

para problemas de css, el plugin de desarrollador web me parece invaluable:

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

cárgalo, entonces tienes 2 herramientas posibles a tu disposición.

hechizos heredados de archivos en cualquier elemento moused-over, use shift-ctrl-y
css calculado (incluyendo cualquier estilo en línea = aplicado que no esté en un archivo .css - o mediante un método .css de jquery, etc.) - presione shift-ctrl-f

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

por supuesto, tiene otros grandes usos, como la excelente depuración de formularios, incluida la edición de campos ocultos y cookies (que pueden usarse para pruebas de penetración).

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

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

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