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

152

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

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.

lukas.pukenis
fuente
2
Su pregunta ayudó aunque no llegué al punto de interrupción usando las fuentes, ejecuté el siguiente script en la consola: document.body.addEventListener('mouseup',function(){ debugger; })Eso me interrumpió y pude inspeccionar los elementos creados.
HMR
Tú Molas. Tenía este problema exacto con un control React-Select, donde no podía ver el HTML de los elementos de la lista porque el subárbol se eliminaría cada vez que hiciera clic. Se necesitaban los ID de los elementos para automatizar los clics con Selenium. ¡Gracias!
araisbec

Respuestas:

177

(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.

ingrese la descripción de la imagen aquí

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 :

ingrese la descripción de la imagen aquí

arxpoetica
fuente
1
Para evitar posibles confusiones, el depurador se detendrá cuando esté activando el evento, es decir, escribiendo el nombre de un lugar. Cuando la pantalla se detenga, simplemente presione el botón de reproducción en el DOM y podrá activar el evento.
Dylan Pierce
Esto no funciona si la página ha capturado el clic derecho y hace lo propio al hacer clic derecho.
Michael
Esto no funciona para el primero de los dos cuadros de diálogo en el mismo contenedor
Still_learning
@Still_learning ¿Puede explicar qué quiere decir con "dos diálogos en el mismo contenedor"?
arxpoetica
<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-container>- en mi caso, el primer cuadro de diálogo solo se muestra hasta que los datos llegan de la base de datos, aproximadamente 1 segundo
Still_learning
92

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.
Joseph Tinoco
fuente
3
¡¡Perfecto!! Esto hace exactamente lo que quería
Daniel Loiterton,
2
Noté que esto solo funciona cuando las herramientas de desarrollador ya están abiertas en la pestaña 'Fuentes'.
hbulens
3
congela el código de la ejecución pero el elemento aún desapareció (estoy usando React).
Lorem Ipsum Dolor
Mi Chrome dice F8 o Crtl + \ (no Crtl + /). Además, el Crtl + \ no funciona en mi caso ...
Roger Veciana
Esto no funciona en las ventanas emergentes de control de video de Google ... el control parece desvanecerse de la vista tan pronto como presiona la tecla, y se ha desvanecido por completo antes de que ocurra el congelamiento.
Michael
18
  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.

Mojtaba
fuente
1
Esta es la forma más rápida y estable de depurar elementos desaparecidos ^
warmwhisky
8

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.
Mamba negro
fuente
1
¡Gracias, gracias por las instrucciones detalladas! Después de una demostración de destreza extrema - presionando un botón, presionando Ctr + Shift + C, moviendo el mouse para pasar el cursor sobre el elemento, y presionando F8dentro del espacio de un segundo y medio - Finalmente conseguí mi elemento en modo inspeccionable
Todavía
2

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

Sebastian Zartner
fuente
Chrome también tiene un inspector decente. El problema es: hacer clic derecho en el elemento hace que desaparezca en mi caso. Chrome también tiene Break on DOM mutate. El problema con esto: no sé qué elemento es, ya que se genera dinámicamente
lukas.pukenis
1
Acabo de editar mi respuesta para dar una pista de cómo saber qué elemento es.
Sebastian Zartner el
2

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 : ingrese la descripción de la imagen aquí
  5. Podemos ver que todos los elementos están ahí.

Aquí hay una demostración:

ingrese la descripción de la imagen aquí

Raja David
fuente
2

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á.

Panda Vivekanand
fuente
0

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.

matpol
fuente
1
Si. He declarado que los cambios suceden demasiado rápido en DOM y la página modifica DOM en gran medida, por lo que realmente no es una solución, ya que no puedo distinguir mis elementos necesarios de un montón de modificaciones en todas partes :)
lukas.pukenis
puede intentar rastrear lo que está sucediendo usando console.log, por ejemplo, al comienzo de la función que está tratando de verificar, puede ver objetos css, etc. O reduzca la velocidad de los cambios hasta que sepa que funcionan correctamente y luego cambie la velocidad a lo que desea quiero que sea, por ejemplo, hide ('lento') en jquery
matpol
El problema es - no es mi propio código base, es un legado, grande, viejo, base de código, donde simple búsqueda a través de los archivos me da nada .. :)
lukas.pukenis
También puede ver qué archivos está utilizando la página en el inspector. Pasaría por eliminarlos hasta que se rompa, luego miraría en el archivo que lo rompió e iría desde allí. Siempre puede buscar los archivos reales también.
matpol
0

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

Hani Yassine
fuente