Ver: estado de desplazamiento en las Herramientas para desarrolladores de Chrome

Quiero ver el :hoverestilo de un ancla que estoy flotando en Chrome . En Firebug , hay un menú desplegable de estilo que me permite seleccionar diferentes estados para un elemento.

Parece que no puedo encontrar nada similar en Chrome. ¿Me estoy perdiendo de algo?

Ahora puede ver las reglas de pseudo-clase y forzarlas en los elementos.

Para ver las reglas como :hoveren el panel Estilos, haga clic en el :hovtexto pequeño en la esquina superior derecha.

Para forzar un elemento a un :hoverestado, haga clic derecho y seleccione :hover.

Consejos adicionales sobre el panel de elementos en Atajos de herramientas de desarrollador de Chrome .

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

• 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 el elemento mediante el teclado, como en la flecha hacia arriba y luego la tecla Intro.
• Mire en las herramientas de desarrollador en Reglas CSS coincidentes, debería poder ver: hover.

PD: Intenté esto en una de sus etiquetas de preguntas.

Quería ver el estado de desplazamiento en la información sobre herramientas de Bootstrap. Forzar el estado: hover en Chrome dev Tools no creó la salida requerida, pero activar el evento 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 formas de ver los estilos de HOVER STATE en las Herramientas para desarrolladores 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:

Luego 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 de Google lo señalarán con rudeza y editaré mi respuesta. Si no, tendremos que esperar y mirar. (puedes destacar el tema para votarlo)

Comentario 1 del miembro del proyecto Chrome : en 10.0.620.0, el panel Estilos muestra: 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 lanzamiento de acceso temprano ).

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

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

Sé que lo que hago es una solución alternativa, sin embargo, funciona perfectamente y esa es la forma en que lo hago siempre.

Luego, proceda así:

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

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

¡Salud!

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

En el Elementspanel, haga clic en el Toggle Element statebotón y seleccione:hover .

En el Scriptspanel, vaya a Event Listeners Breakpointsla sección inferior derecha y seleccioneMouse -> mouseup .

Ahora inspeccione el menú y seleccione la casilla que desee. Cuando suelte el botón del mouse, debería detenerse y mostrarle el estado de desplazamiento del elemento seleccionado en el Elementspanel (consulte la Stylessección).

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 de pin (Alternar estado del elemento)

4) Luego marca el cursor

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

Pude ver el estilo siguiendo los pasos a continuación sugeridos por Babiker: "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 el elemento mediante el teclado, como en la flecha hacia arriba y luego presione la tecla ".

Para cambiar el estilo, siga los pasos anteriores y luego: cambie la pestaña del navegador presionando ctrl + TAB en el teclado. Luego, haga clic de nuevo en la pestaña que desea depurar. Su pantalla de desplazamiento todavía estará allí. Ahora con cuidado lleva el mouse al área de herramientas del desarrollador.

En mi caso, quiero copiar la información sobre herramientas de 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 coloque el cursor sobre un botón, generará un elemento html hermano debajo del botón, por lo que selecciono el elemento padre del botón en la pestaña "Elementos" de la ventana "Herramientas para desarrolladores", coloca 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 si acaso. Escribí este script jQuery para inspeccionar el DOM cuando me muevo con la tecla TAB.

Si se cambia 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 haga clic o haga algo en un elemento en el que desea detenerse.