css - other - inspect element chrome
Ver: estado de hover en Chrome Developer Tools (12)
Quiero ver el estilo " :hover " para un ancla en la que estoy desplazando 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 puedes ver las dos reglas de la clase psuedo y forzarlas en los elementos.
Para ver las reglas como :hover en el panel Estilos, haga clic en el texto pequeño :hov en la parte superior derecha.
Para forzar un elemento en :hover estado de :hover , haga clic derecho en él.
Sugerencias adicionales sobre el panel de elementos en Accesos directos de Chrome Developer Tools .
Cambiar al estado de navegación en Chrome es bastante fácil, solo sigue 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 icono de pin (Estado del elemento de alternancia)
4) Luego marca el cursor
¡Ahora puede ver el estado de desplazamiento del DOM seleccionado en el navegador!
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 desee detenerse.
En mi caso, quiero dubug bootstrap tooltip. Pero los métodos anteriores no funcionan para mí. Supongo que bootstrap implementó esto por algo como un evento de entrada / salida del mouse.
De todos modos, cuando muevo el mouse sobre un botón, generará un elemento HTML html debajo del botón, así que selecciono el elemento principal del botón en la pestaña "Elementos" de la ventana "Herramientas del desarrollador", muevo el botón, y "Ctrl + C". luego puedo pegar el código fuente que contiene el código generado. Por último, busque 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.
Estaba depurando un estado de menú hover con Chrome e hice esto para poder ver el código de estado flotante:
En el panel Elements , haga clic en el botón de Toggle Element state y seleccione :hover .
En el panel Scripts , vaya a Event Listeners Breakpoints Mouse -> mouseup Event Listeners Breakpoints en la sección inferior derecha y seleccione Mouse -> mouseup .
Ahora inspecciona el menú y selecciona la casilla que deseas. Cuando sueltes el botón del mouse, debería detenerse y mostrarte el estado de activación del elemento seleccionado en el panel Elements (mira la sección Styles ).
No creo que haya una manera de hacer esto. He enviado una solicitud de función . Si hay una manera, los desarrolladores de Google lo señalarán y editaré mi respuesta. Si no, tendremos que esperar y observar. (Puedes marcar el tema para votar por él)
Comentario 1 del miembro del proyecto Chrome : en 10.0.620.0, el panel Estilos muestra los estilos: desplazarse para el elemento seleccionado pero no: activo.
(a partir de este post) La versión actual del canal estable es 8.0.552.224.
Puede reemplazar la instalación de canal estable de Google Chrome con el canal Beta o el canal Dev (consulte Canales de lanzamiento de acceso anticipado ).
También puede instalar una instalación secundaria de Chrome que está incluso 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 puede a veces ser inutilizable, no puede configurarse como su navegador predeterminado y puede instalarse además de cualquiera de los canales anteriores de Google Chrome. ...
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 mueva el puntero del mouse para alejarlo del elemento, manténgalo en estado estacionario. Elija inspeccionar el elemento mediante el teclado, como en la flecha arriba y abajo. luego la tecla Enter ".
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, haga clic en la pestaña que desea depurar. Su pantalla flotante todavía estará allí. Ahora, con cuidado, lleve su ratón al área de herramientas para desarrolladores.
Quería ver el estado flotante en la información sobre herramientas de mi Bootstrap. Forzar el estado de: hover en las herramientas de desarrollo de Chrome no creó la salida requerida, pero al activar el evento mouseenter a través de la consola hizo el truco en Chrome. Si existe jQuery en la página, puede ejecutar:
$(''.YOUR-TOOL-TIP-CLASS'').trigger(''mouseenter'');
Sé que lo que hago es bastante la solución, sin embargo, funciona perfectamente y esa es la forma en que lo hago cada vez.
Entonces, proceda así:
- Primero asegúrese de que Chrome Developer Tools esté desacoplado.
- Luego, simplemente mueva cualquier lado de la ventana de Herramientas de desarrollo al centro del elemento que desea inspeccionar mientras se desplaza.
- 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!
EDITAR: Esta respuesta fue antes de la corrección de errores, vea la respuesta de tnothcutt.
Esto fue un poco complicado, pero aquí va:- Haga clic con el botón derecho en el elemento, pero NO mueva el puntero del mouse para alejarlo del elemento, manténgalo en estado activo.
- Elija inspeccionar el elemento a través del teclado, como en la flecha arriba y luego presione la tecla Intro.
- Busque en las herramientas del desarrollador bajo Reglas CSS emparejadas, debería poder ver: desplazarse.
PD: Probé esto en una de tus etiquetas de pregunta.