Ver: estado de desplazamiento en las herramientas de desarrollo de Chrome

Ahora puede ver las reglas de la clase psuedo y forzarlas sobre los elementos.

Para ver las reglas como :hover el mouse en el panel Estilos, haga clic en el texto pequeño :hov en la :hov superior derecha.

Para forzar un elemento a :hover estado de :hover , haga clic derecho sobre él.

Consejos adicionales sobre el panel de elementos en los accesos directos de las herramientas para desarrolladores de Chrome .

EDITAR: Esta respuesta fue antes de la corrección de errores, ver la respuesta de tnothcutt.

Esto fue un poco complicado, pero aquí va:

• Haga clic con el botón derecho en el elemento, pero NO aleje el puntero del mouse del elemento, manténgalo en estado de desplazamiento.
• Elija inspeccionar elemento a través del teclado, como en la flecha hacia arriba y luego la tecla Intro.
• Mire en las herramientas de desarrollo bajo Reglas de CSS coincidentes, debería poder ver: hover.

PD: Intenté esto en una de tus tags de pregunta.

Quería ver el estado de desplazamiento en mi información de herramientas de Bootstrap. Forzar el estado: flotar en las herramientas de desarrollo de Chrome Tools no creó la salida requerida, pero desencadenar el evento de mouseenter a través de la consola hizo el truco en Chrome. Si jQuery existe en la página puede ejecutar:

 $('.YOUR-TOOL-TIP-CLASS').trigger('mouseenter'); 

Hay varias maneras de ver los estilos de estado de HOVER en las herramientas de desarrollo de Chrome.

Método 01

Método 02

Con Firefox Default Developer Toll

Con Firebug

En caso de que ayude, esto parece ser más fácil en el último Chrome (47.0.2526.106):

Inspeccione el elemento y luego haga clic en los tres puntos blancos en el canal izquierdo:

A continuación, elija el estado del elemento deseado de este menú desplegable:

No creo que haya una manera de hacer esto. Envié una solicitud de función . Si hay una manera, los desarrolladores en Google lo señalarán y editaré mi respuesta. Si no, tendremos que esperar y mirar. (puede protagonizar el problema para votar por él)

Comentario 1 del miembro del proyecto de Chrome : en 10.0.620.0, el panel Estilos muestra los siguientes estilos de desplazamiento para el elemento seleccionado pero no activo.

(a partir de esta publicación) La versión actual del canal estable es 8.0.552.224.

Puede reemplazar la instalación de su canal estable de Google Chrome con el canal Beta o el canal Dev (consulte Canales de versión de acceso anticipado ).

También puede instalar una instalación secundaria de Chrome que esté aún más actualizada que el canal Dev .

… La comstackción Canary se actualiza con más frecuencia que el canal Dev y no se prueba antes de ser lanzada. Debido a que la construcción de Canary puede ser inutilizable, no se puede configurar como su navegador predeterminado y se puede instalar además de cualquiera de los canales anteriores de Google Chrome. …

Sé que lo que hago es una buena solución, sin embargo, funciona perfectamente y así lo hago siempre.

Luego, proceda de esta manera:

• Primero asegúrese de que Chrome Developer Tools esté desacoplado.
• Luego, simplemente mueva cualquier lado de la ventana de Dev Tools al centro del elemento que desea inspeccionar mientras está suspendido.

• Finalmente, desplace el elemento, haga clic con el botón derecho e inspeccione el elemento, mueva el mouse a la ventana Dev Tools y podrá jugar con su elemento: hover css.

¡Aclamaciones!

Estaba depurando un estado de menú hover con Chrome e hice esto para poder ver el código de estado de desplazamiento:

En el panel Elements , haga clic en el botón de Toggle Element state y seleccione :hover .

En el panel Mouse -> mouseup Scripts , vaya a Event Listeners Breakpoints de Event Listeners Breakpoints en la sección inferior derecha y seleccione Mouse -> mouseup .

Ahora inspeccione el Menú y seleccione el cuadro que desea. Cuando suelte el botón del mouse, debe detenerse y mostrarle el estado del elemento emergente seleccionado en el panel Elements (consulte la sección Styles ).

Pude ver el estilo siguiendo los pasos a continuación sugeridos por Babiker: “Haga clic derecho en el elemento, pero NO mueva el puntero del mouse lejos del elemento, manténgalo en estado estacionario. Elija inspeccionar el elemento mediante el teclado, como en la flecha hacia arriba y luego, introduce la tecla “.

Para cambiar el estilo, siga los pasos anteriores y luego – Cambie la pestaña del navegador presionando ctrl + TAB en el teclado. A continuación, haz clic en la pestaña que deseas depurar. Tu pantalla emergente todavía estará allí. Ahora lleve con cuidado su ratón al área de la herramienta de desarrollador.

Cambiar al estado de desplazamiento en Chrome es bastante fácil, solo siga estos pasos a continuación:

1) Haga clic derecho en su página y seleccione inspeccionar

2) Seleccione el elemento que desea inspeccionar en el DOM

3) Seleccione el ícono pin (Alternar estado del elemento)

4) Luego marque el vuelo estacionario

¡Ahora puede ver el estado de desplazamiento del DOM seleccionado en el navegador!

En mi caso, quiero dubugar información sobre herramientas bootstrap. Pero los métodos anteriores no funcionan para mí. Supongo que bootstrap implementó esto por algo como el evento de entrada / salida del mouse.

De todos modos, cuando cierro sobre un botón, generará un elemento html hermano debajo del botón, así que selecciono el elemento padre del botón en la pestaña “Elementos” de la ventana “Herramientas de desarrollador”, coloco el botón y “Ctrl + C”, entonces puedo pegar el código fuente que contiene el código generado. Por último, encuentre el código generado y agréguelo al código fuente mediante “Editar como HTML” en la pestaña “Elementos”.

Espero que pueda ayudar a alguien.

Creo que esto ya no es un problema en Chrome, sino por las dudas. Escribí este script jQuery para inspeccionar el DOM cuando me muevo con la tecla TAB.

Si cambiaste para usar ‘mouseover’, se vería así:

 $("body *").on('mouseover', function(event) { console.log(event.target); inspect(event.target); event.stopPropagation(); }); 

Puede modificarlo fácilmente para eliminar el controlador de eventos cada vez que hace clic o hace algo en un elemento que desea detener.