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


855

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?


Buena pregunta porque estaba buscando cómo editar el estilo de desplazamiento en Firebug - ver aquí stackoverflow.com/questions/5389245/…
Chris Halcrow

1
Sé que no es una solución completa / perfecta para el problema, pero no pude encontrar una solución en las respuestas que funcione para los eventos de mouseover. El uso de Safari le permite desplazarse mientras usa las herramientas del navegador. Por lo tanto, solo para este problema, considere usar otro navegador.
12 de

Respuestas:


1256

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.

Cambiar estado del elemento

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

Estado del elemento de fuerza

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


3
No estoy seguro de cuándo cambió esto, pero ahora puede hacer clic derecho -> forzar el estado del elemento (desde el panel de elementos) en otros elementos (no solo <a>elementos) ahora.
Travis Northcutt

3
Esto funciona para CSS: desplaza el cursor sobre los cambios, pero no si haces cambios al pasar el mouse con JS.
matthew_360

Aquí hay un video rápido que reuní demostrando el: estado de
desplazamiento

54

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


31

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

Desplazamiento forzado o mouseenter para la información sobre herramientas de Bootstrap


Esta es la mejor respuesta
Argun

20

Hay varias formas de ver los estilos de HOVER STATE en las Herramientas para desarrolladores de Chrome.

Método 01

ingrese la descripción de la imagen aquí

Método 02

ingrese la descripción de la imagen aquí

Con Firefox Default Developer Toll

ingrese la descripción de la imagen aquí

Con Firebug

ingrese la descripción de la imagen aquí


9

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:
haz clic en los tres puntos blancos

Luego elija el estado del elemento deseado de este menú desplegable:
este menú desplegable


4

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


Gran investigacion. Estoy sacudiendo la última versión de desarrollo (10.0.612.3), así que solo esperaré un poco y espero ver: ¡qué bueno!
Ben

4

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

Desacoplar herramientas de desarrollador de Chrome

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.

Pase el mouse sobre el elemento

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


1
¡Voy a agregar un comentario para poder encontrarlo nuevamente, porque sé que lo voy a necesitar! Especialmente importante para complementos de IU impredecibles de terceros.
cfranklin

3

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).


2

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

ingrese la descripción de la imagen aquí

2) Seleccione el elemento que desea inspeccionar en el DOM

ingrese la descripción de la imagen aquí

3) Seleccione el ícono de pin ingrese la descripción de la imagen aquí (Alternar estado del elemento)

4) Luego marca el cursor

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


1

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.


1
No es necesario mantener el mouse en estado
flotante

1

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.


0

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.