online - javascript console chrome

¿Cómo puedo inspeccionar elementos que desaparecen en un navegador?

Question

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

No sé si es identificación, clase o cualquier cosa, 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.

Inspeccionar manualmente el árbol DOM para ver los cambios 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. Simplemente vaya a Sources-> Event Listener Breakpoints-> Mouse-> mousedown de Sources-> Event Listener Breakpoints-> Mouse-> mousedown en Chrome. Después de eso hice clic en el elemento que quería inspeccionar y dentro de las Scope Variables vi algunas indicaciones útiles.

Answer 1

(Esta respuesta solo se aplica a las Herramientas para desarrolladores de Chrome).

Encuentra un elemento que contiene el elemento que desaparece. Haga clic con el botón derecho en el elemento y aplique "Interrumpir ...> Modificaciones de subárboles". Esto arrojará una pausa en el depurador antes de que el elemento desaparezca, lo que le permitirá interactuar con el elemento en estado de pausa.

Answer 2

En Firebug hay diferentes soluciones para esto:

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

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

Editar:

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

Sebastian

Answer 3

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

1. Haga clic derecho y vaya a inspeccionar el elemento.
2. Ve a la pestaña de fuentes.
3. Luego pase el cursor sobre el elemento.
4. Luego, usando el teclado F8 Command(Window) / . Pausará la pantalla en un estado estático y el elemento no desaparecerá al desplazarse hacia afuera.

Answer 4

Un método alternativo en Chrome:

Mientras se muestra el elemento que desea, presione F8 (o Ctrl + /). Esto romperá la ejecución del script mientras congela el DOM exactamente como está.

Desde allí puede usar Ctrl + Shift + C para seleccionar el elemento fugaz.

Answer 5

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

Esto es posible con firebug en firefox o el inspector construido en cromo.