¿"Inspeccionar" un elemento flotante?

Nota: He leído hilos similares, pero ninguno es mi problema: puedo hacer clic con el botón derecho en él, y luego desaparece.

Encuentro que "Inspeccionar elemento" es una herramienta invaluable en Chrome, sin embargo, mi última incursión a medida que aprendo las formas mágicas que muchos de ustedes ya poseen me vio creando un submenú para un elemento en mi barra de navegación, que aparece debajo al pasar el mouse sobre su artículo principal.

La ventana emergente (o abajo) no tiene el estilo que me gustaría, así que hago clic con el botón derecho> inspeccionar el elemento para ver qué viene exactamente de dónde, y tener una mejor idea de cómo lograr el efecto deseado.

Sin embargo, tan pronto como muevo el mouse fuera del menú, desaparece.

Entonces no puedo seleccionar diferentes elementos en el panel de inspección y ver qué área está resaltada al mismo tiempo.

¿Hay alguna forma de evitar esto, sin cambiar el menú para que permanezca "emergente" una vez activado?

Si el hoverefecto se da con, CSSentonces sí, normalmente uso dos opciones para obtener esto:

Uno, a seela hover effectcuando el ratón deje el hover area:
Abra el inspector de ventana acoplada y aumentar el ancho hasta llegar a su HTML element, a continuación, haga clic derecho y en el menú emergente debe estar sobre la zona inspector ... entonces cuando se mueve el puntero del ratón sobre la vista inspector , el hover effectmantener activado en el documento.

Dos, para keepel hover effect, incluso si el ratón no está sobre el HTML element, abra el inspector, vaya a Styles TABy haga clic en el icono de la parte superior derecha que dice Toggle Element State... (rectángulo punteado con una flecha) allí se puede activar manualmente el Hover Event(entre otros) con el casilla de verificación proporcionada.

Si no está claro, avíseme y puedo agregar algunas capturas de pantalla. Editado : captura de pantalla agregada.

Y finalmente y como digo al principio, solo podré hacer esto si el hoverestá configurado con CSS:HOVER... cuando controlas el hover statecon jQuery.onMouseOverpor ejemplo, solo funciona (a veces), el método Uno.

Espero eso ayude.

Si JS activa el hover, simplemente pause la ejecución del script a través del teclado. Esta es una forma mucho más simple de congelar el DOM de lo que sugieren las otras respuestas.

Así es como se hace en Chrome. Estoy seguro de que Firefox tiene un procedimiento equivalente:

1. Abra Herramientas de desarrollo y vaya a Fuentes.

2. Tenga en cuenta el acceso directo para pausar la ejecución del script— F8.

   

3. Interactúe con la interfaz de usuario para que aparezca el elemento.

4. Hit F8.
5. Ahora puede mover el mouse, inspeccionar el DOM, lo que sea. El elemento permanecerá allí.

Lo que funcionó para mí fue seleccionar la etiqueta específica a que quería inspeccionar y hacer esto:

Después de hacer lo anterior, normalmente volvería a seleccionar una etiqueta, luego el menú desplegable permanecerá automáticamente como está incluso cuando pase el mouse sobre otros lugares como Inspeccionar elemento, etc.

Puede simplemente actualizar el navegador al inspeccionar los elementos desplegables del menú para volver al estado normal.

Espero que esto ayude. :)

También puede hacer esto en la consola de JavaScript:

$('#foo').trigger('mouseover');

Un que "congelará" el elemento en el estado "hover".

Así es como lo hago sin cambios de CSS o JS en pausa en Chrome (estoy en una Mac y no tengo una PC frente a mí si está ejecutando en Win):

1. tenga su consola de desarrollador abierta.
2. todavía no habilite la herramienta de inspección de desplazamiento, sino que abra el submenú deseado moviendo el mouse sobre él.
3. presione Command+ Shift+ C(Mac) o Ctrl+ Shift+ C(Win / Linux)

ahora la herramienta de inspección de desplazamiento se aplicará a los elementos que ha abierto en su navegación secundaria.

No estoy seguro de si estaba presente en revisiones anteriores del navegador, pero acabo de descubrir este método extremadamente simple.

Abra el inspector en Chrome o Firefox, haga clic con el botón derecho en el elemento que le interesa y seleccione la opción adecuada (en este caso: hover). Esto activará el CSS asociado.

Capturas de pantalla de Firefox 55 y chromium 61.

¡Excelente material!

Gracias a gmo por ese consejo. No sabía acerca de esos ajustes de atributos de gran ayuda.

Como una pequeña revisión de la redacción, explicaría ese proceso de la siguiente manera:

• Haga clic derecho en el elemento que le gustaría diseñar

  • Abra la herramienta 'Inspeccionar'

  • En el lado derecho, navegue hasta la pequeña pestaña Estilos

  • Encontrado arriba del contenido de la hoja de estilo CSS

  • Seleccione la opción .hov: esto le dará todas las configuraciones disponibles para el elemento HTML seleccionado

  • Haga clic y cambie todas las opciones para que estén inactivas

  • Ahora seleccione el estado que le gustaría modificar: al activar cualquiera de estos, su hoja de estilo lo llevará directamente a esas configuraciones:

Estilos - Ajustar filtros - Elementos interactivos

Esta información fue un salvavidas para mí, ¡no puedo creer que me acabo de enterar!

cambiar el CSS para que la propiedad que oculta el menú no se aplique mientras trabaja en él es lo que hago.

Necesitaba hacer esto, pero el elemento que estaba tratando de inspeccionar se agregó y eliminó dinámicamente en función del estado de desplazamiento de otro elemento. Mi solución es similar a esta. , pero no funcionó para mí.

Así que esto es lo que hice:

1. Agregue un script simple para ingresar al modo de depuración sobre mouseoverel elemento que desencadena el evento de desplazamiento que le preocupa.

$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
  debugger;
});

2. Luego, con la consola de desarrollo abierta en Chrome, coloque el cursor sobre su elemento y entrará en el modo de depuración. Navegue hasta la sección de fuentes de las herramientas de desarrollo y haga clic en el botón "Reanudar ejecución del script" (el botón azul similar a reproducir a continuación).

Una vez que haga eso, su DOM se pausará en el estado de desplazamiento, y puede usar el inspector de elementos para inspeccionar todos los elementos tal como existen en ese estado.