¿Cómo puedo inspeccionar el elemento html que desaparece del DOM al perder el foco?

Estoy tratando de inspeccionar las propiedades CSS de una entrada en una celda de la tabla. La entrada aparece al hacer clic y desaparece al perder el foco, como cuando trato de inspeccionarla. ¿Cómo puedo hacerlo para no perder el foco mientras me muevo a otra ventana (el inspector)?

En el navegador Chrome, abra Herramientas de desarrollo y seleccione la pestaña Elementos , luego abra el menú contextual del nodo principal del elemento que desea inspeccionar, en el menú contextual, haga clic en Romper en > Modificaciones de subárbol .

Después, solo necesita hacer clic en la página y accederá al inspector sin perder el foco o perder el elemento que desea inspeccionar.

Puede capturar el elemento que desaparece si pausa la ejecución de JavaScript con un atajo de teclado sin mover el mouse. Así es como se hace esto en Chrome:

1. Abra Herramientas para desarrolladores y vaya a Fuentes.

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

   

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

4. Hit F8.
5. Cómo puede mover su mouse, inspeccionar el DOM, lo que sea. El elemento se quedará allí.

Este truco también funciona en Firefox y otros navegadores modernos.

Si todo lo demás falla, escriba esto en la Consola:

setTimeout(() => { debugger; }, 5000)

Luego tienes 5 segundos (o cambia el valor a cualquier otra cosa) para que aparezca lo que quieras depurar.

Ninguna de las otras respuestas funcionó para mí: el árbol DOM siguió siendo modificado (es decir, las cosas que me importan desaparecieron) justo antes de que el script se detuviera.

No estoy seguro de si esto funciona en su situación, pero normalmente (y en todos los casos vale la pena mencionar a este respecto, ya que es una gran herramienta) en Chrome Developer Tools, puede simular estados de elementos y uno también lo es :focus.

Para hacerlo, vaya a la Elementspestaña en Herramientas para desarrolladores y asegúrese de estar en la Stylessección de la derecha (esta debería ser la ubicación predeterminada cuando inicie las Herramientas para desarrolladores). Ahora solo muestra los iconos en la esquina superior derecha Toggle Element State. Al hacer clic en ella se puede simular :active, :hover, :focusy :visitedpara el elemento que ha seleccionado a la izquierda en la vista de código.

En Chrome, en la página de herramientas del desarrollador para la página bajo prueba ... haga clic en el menú de opciones y abra la configuración de las preferencias ... en DevTools habilite 'Emular una página enfocada'

Luego, en la página de prueba, aparecen los elementos. Esto funcionó para mantener mis resultados de búsqueda emergentes enfocados a permanecer en la pantalla para poder trabajar con ellos.

No es una solución real, pero generalmente funciona (:

1. Enfoca el elemento
2. Haga clic derecho para el menú contextual
3. Desplazarse hacia abajo a herramientas de desarrollador

Tuve una situación muy difícil y ninguna respuesta funcionaba desde aquí (no verifiqué las respuestas cambiando el contenedor, que es el cuerpo para mí, o el evento original, porque no lo sé). Finalmente encontré una solución al romper los puntos de interrupción del oyente de control de eventos en Chrome Inspector. Tal vez esa también sea una forma de romper el navegador cruzado para situaciones complicadas donde incluso F8 o hacer clic con el botón derecho del mouse ocultan la ventana emergente nuevamente:

Pegue el siguiente Javascript en la consola del desarrollador del navegador:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

Tengo una solución más rápida ya que no soy muy bueno con el uso de herramientas, esto es lo que hago.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Si abre Chrome DevTools y luego activa el inspector de elementos mediante métodos abreviados de teclado, debería resolver el problema.

Mac: Cmd+Opt+J y luegoCmd+Opt+C

Windows: Ctrl+Shift+J y luegoCtrl+Shift+C

[