Inspeccionar menús desplegables en el nuevo Chrome

Estoy en Chrome versión 41.0.2272.101 m (más reciente), y esta actualización es un desastre. Ellos dicen, cuando tienes el inspector abierto, que cualquier cambio de DOM parpadeará con púrpura en el elemento cambiado (como en Firefox), pero ahora no puedo inspeccionar ningún objeto suspendido (también como en FF, por eso no me gusta para usarlo al desarrollar el front-end).

Estoy hablando de eventos activados por js, como superfish, por ejemplo. Antes, podía desplazar el menú y cubrir el menú con el inspector, y el menú permanecería abierto, y podía ir al inspector para ver qué pseudoelementos se crean, cambiar los rellenos y demás directamente, y ver el cambio. Ahora, cuando coloco el cursor sobre el menú y hago clic con el botón derecho del ratón para inspeccionarlo, el menú se cierra y no puedo inspeccionarlo.

Intenté arrastrar al inspector, pero nada ayudó. Esta nueva "característica" es muy molesta. ¿Hay alguna manera de inspeccionar los eventos activados por js, sin poner puntos de interrupción en los elementos (lo cual funciona, pero es un poco doloroso)?

Desplácese sobre el elemento con el mouse y presione F8 (esto solo funcionará en Chrome) para pausar la ejecución del script. El estado de desplazamiento permanecerá visible para usted. Si está en una Mac, es posible que deba abrir las preferencias del sistema y marcar la casilla de verificación "Usar todos los F1, F2, etc." (o simplemente use fn + F8).

A veces, solo funciona si se encuentra en la pestaña Fuentes del inspector.

Dependiendo del tipo de elemento del menú, encontré este problema con los menús de entrada desplegables. La razón por la que desaparece cuando lo inspecciono es porque blursiempre se activa un evento en el elemento cuando hago clic en cualquier lugar fuera del elemento.

Una forma en que pude inspeccionar el elemento es para evitar que se active el evento de desenfoque es eliminando el detector de eventos de desenfoque:

• Inspeccione el elemento de entrada en Chrome
• Vaya a la pestaña Event Listeners y elimine el evento de desenfoque

Una vez que se elimina el evento de desenfoque, puede abrir el menú e inspeccionarlo sin desaparecer

En Chrome, presione F12 para abrir la consola del desarrollador, luego haga clic en Configuración (icono de rueda dentada) o presione F1:

luego busque y marque la opción "Emular una página enfocada".

En Mac, puede presionar cmd+ \para pausar el script después de haber abierto el menú desplegable. Luego puede usar shift+ cmd+ cpara inspeccionar elementos.

Ahora, cuando coloco el cursor sobre el menú y hago clic con el botón derecho del ratón para inspeccionarlo, el menú se cierra y no puedo inspeccionarlo.

Enfrenté el mismo problema y lo que usé fue la opción Expandir recursivamente en las herramientas de desarrollo de Chrome:

Los pasos son:

1. Inspeccione el campo desplegable
2. Encuentra el DOM dinámico (el resaltado morado)
3. Haga clic con el botón derecho del mouse en ese DOM dinámico
4. Elija Expandir recursivamente :
5. Podemos ver que todos los elementos están ahí.

Aquí hay una demostración:

Puede establecer un intervalo que escriba el contenido de un elemento determinado en la consola JS cada segundo. Suelta esto en la consola y abre el menú desplegable.

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

En Firefox

En Inspector, haga clic con el botón derecho en un nodo que contiene el menú desplegable, seleccione:

Romper en ...> Modificación del subárbol

Esto detendrá la ejecución en el momento en que el menú desplegable ... bueno ... se despliega.

Creo que puedes usar el Editor de CSS en Chrome para aplicar un estado, por ejemplo, el estado de 'hover'.

En las herramientas de desarrollo, selecciona un elemento. A la derecha tienes un cuadrado con una flecha encima. Haga clic en eso y puede elegir un estado. Por ejemplo, elija hovered y verá tanto su ventana como la actualización de CSS como si el elemento estuviera flotando en este momento.

Ninguno de los remedios antes mencionados funcionó para mí. Como nuestro menú desplegable (basado en React) se cerrará con cualquier clic (derecho o izquierdo), descubrimos la siguiente solución:

• En Chrome Open Developer Tools
• primero haga clic en el menú desplegable en estado contraído y deje que se expanda con opciones
• luego, debajo de la sección de elementos, haga clic derecho en el nodo div (asegúrese de no hacer clic izquierdo antes de hacer clic derecho), que contiene detalles de los elementos desplegables
• Luego seleccione la opción ' Expandir recursivamente '
• Luego se mostraron los detalles requeridos

Cambiar HTML en la ventana Elementos

• Desplácese sobre el menú que desea mantener abierto en el modo Inspeccionar .
• Observe los cambios HTML en el elemento en la ventana Elemento entre los estados abierto / cerrado del menú. La mayoría de las veces se trata de un cambio de estilo.
• Cuando descubra qué hace que el menú se abra y se cierre (en este ejemplo, una clase llamada "dropdownOpen" agregada y eliminada entre los estados del menú), haga doble clic en el HTML en la pestaña Elemento y realice los cambios necesarios. En este ejemplo, agregamos la clase "dropdownOpen" al <li>elemento.

Usando jQuery en la ventana de la consola

Si necesita repetir este comportamiento, puede hacer uso de jQuery. Usted selecciona el elemento utilizando jQuery y hacer los cambios necesarios en la consola . En este ejemplo, seleccionamos el elemento por su id y le agregamos la clase "dropdownOpen" así:

jQuery("#menu-item-11012").addClass("dropdownOpen");