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


Quiero ver el :hover estilo para un ancla 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?


751
2017-12-23 01:16


origen


Respuestas:


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

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

Toggle element state

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

Force element state

Consejos adicionales sobre panel de elementos en Accesos directos de las herramientas para desarrolladores de Chrome.


1091
2017-07-21 15:25



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 el 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 etiquetas de pregunta.


51
2017-12-23 01:47



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');

Forcing hover or mouseenter for Bootstrap Tooltips


21
2017-12-23 15:25



Hay varias formas de ver HOVER ESTADO estilos en Herramientas de desarrollo de Chrome.

Método 01

enter image description here

Método 02

enter image description here

Con Firefox Default Developer Toll

enter image description here

Con Firebug

enter image description here


9
2018-01-06 08:05



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:
click on the three white dots

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


7
2018-01-04 19:22



No creo que haya una manera de hacer esto. Presenté 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 por miembro del proyecto Chrome: En 10.0.620.0, el panel Estilos muestra los estilos de desplazamiento: para el elemento seleccionado, pero no: activo.


(a partir de esta publicación) Actual Canal estable la versión es 8.0.552.224.

Puedes reemplazar tu Canal estable instalación de Google Chrome con el Canal Beta o el Canal Dev (Ver Canales de versión de acceso anticipado)

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

... La compilació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. ...


4
2017-12-23 01:34



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

Undock Chrome Developer Tools

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.

Hover on element

  • 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!


3
2017-08-21 23:11