¿Cómo puedo inspeccionar el elemento que desaparece en un navegador?

¿Cómo puedo inspeccionar un elemento que desaparece cuando mi mouse se aleja?

No sé si es ID, clase o nada, pero quiero inspeccionarlo.

Soluciones que he probado:

Ejecute el selector jQuery dentro de la consola, $('*:contains("some text")')pero no tuvo suerte, principalmente porque el elemento no está oculto pero probablemente se eliminó del árbol DOM.

La inspección manual de los cambios en el árbol DOM no me da nada, ya que parece ser demasiado rápido para notar lo que ha cambiado.

ÉXITO:

He tenido éxito con los puntos de interrupción del evento. Específicamente - mousedown en mi caso. Solo ve a Sources-> Event Listener Breakpoints-> Mouse-> mousedownChrome. Después de eso, hice clic en el elemento que quería inspeccionar y en el interior Scope Variablesvi algunas instrucciones útiles.

(Esta respuesta solo se aplica a las Herramientas para desarrolladores de Chrome. Consulte la actualización a continuación).

Encuentre un elemento que contenga el elemento que desaparece. Haga clic derecho en el elemento y aplique "Romper en ...> Modificaciones de subárbol". Esto generará una pausa del depurador antes de que el elemento desaparezca, lo que le permitirá interactuar con el elemento en estado de pausa.

Actualización del 22 de octubre de 2019: con el lanzamiento de la v. 70, parece que FireFox finalmente admite este tipo de depuración 2 3 :

Un método alternativo en Chrome:

• Abra devTools (F12).
• Seleccione la pestaña "Fuentes".
• Mientras se muestra el elemento que desea, presione F8 (o Ctrl + /). Esto interrumpirá la ejecución del script y "congelará" el DOM exactamente como se muestra.
• Desde este punto, use Ctrl + Shift + C para seleccionar el elemento.

1. Consola abierta
2. Escribir setTimeout(()=>{debugger;},5000);
3. Presione Entrar

Ahora tiene 5 segundos para que aparezca su elemento. Una vez que apareció, espere hasta que llegue el depurador. Mientras no reanude, puede jugar con su elemento y no desaparecerá.

Consejo útil para evitar repetir los pasos anteriores siempre:

agregue esto como un bookmarklet:

1. Marcar cualquier página
2. Editar este nuevo marcador
3. Reemplace la URL / ubicación con: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

La próxima vez que desee usar esto, simplemente haga clic / toque este marcador.

Estoy usando Chrome en Mac, he seguido los pasos anteriores, pero intentaré explicar un poco más:

1. Haga clic derecho y vaya al elemento de inspección.
2. Ir a la pestaña de fuentes.
3. Luego pasa el cursor sobre el elemento.
4. Luego usando el teclado F8 o Command(Window) \ . Pausará la pantalla en un estado estático y el elemento no desaparecerá al desplazarse.

En Firebug hay diferentes soluciones para esto:

1. Puede usar Break On Mutate dentro del panel HTML. (con esto también podrás averiguar qué elemento es)
2. Puede hacer clic con el botón derecho en el elemento y elegir Inspeccionar elemento con Firebug

También es posible que desee seguir el problema 551 , que solicita una forma de bloquear temporalmente eventos específicos.

Editar:

Para averiguar qué elemento es, también puede habilitar las opciones del panel HTML Resaltar cambios , Expandir cambios y Desplazar cambios a la vista para que el elemento sea visible dentro del panel HTML.

Sebastian

En mi caso, utilicé la opción Expandir recursivamente en Google Chrome:

Los pasos son:

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

Aquí hay una demostración:

Pase el cursor sobre el elemento con su mouse y presione F8 (esto en Chrome) para pausar la ejecución del script. El estado de desplazamiento permanecerá visible para usted.

Te lleva a la pestaña de fuentes. Regrese a la pestaña Elementos. Este código de tiempo no se desvanecerá.

Puede ver los elementos que aparecen y desaparecen en el inspector debajo de los elementos. Si navega hasta el elemento cuando está visible, debería poder verlo desaparecer o ver cómo cambia su CSS cuando cambia su estado.

Esto es posible con firebug en firefox o el inspector integrado en Chrome.

Tuve el mismo problema, pero uso Firefox, desaparece tan pronto como abro, el elemento de inspección encontró una solución: abra los 4 guiones (configuraciones) vaya al desarrollador web> Depurador e inmediatamente presione F8, que es el acceso directo para la pausa que detiene el script antes de patear y detectar que abriste las herramientas para desarrolladores