css - teclado - ¿Se congela la pantalla en el panel de depuración de chrome/DevTools para la inspección de ventanas emergentes?

inspeccionar elemento google chrome (6)

Estoy usando el inspector de chrome para probar y analizar el z-index de un popover de Twitter bootstrap, y lo encuentro extremadamente frustrante ...

¿Hay alguna forma de congelar la ventana emergente (mientras se muestra) para que pueda evaluar y modificar el CSS asociado?

La colocación de un ''desplazamiento'' fijo en el enlace asociado no hace que aparezca la ventana emergente.

Haga clic derecho en cualquier lugar dentro de la pestaña Elementos
Elija Breakon ...> modificaciones de subárbol
Active la ventana emergente que desea ver y se congelará si ve cambios en el DOM
Si aún no ve la ventana emergente, haga clic Step over the next function(F10) botón Step over the next function(F10) junto a Resume(F8) en la parte superior central superior del cromo hasta que congele la ventana emergente que desea ver.

Acabo de tener el mismo problema y creo que encontré una solución "universal". (asumiendo que el sitio usa jQuery)
Espero que ayude a alguien!

Ir a la pestaña de elementos en inspector
Haga clic derecho en <body> y haga clic en " Editar como HTML "
Agregue el siguiente elemento después de <body> luego presione Ctrl + Enter:
<div id="debugFreeze" data-rand="0"></div>
Haga clic derecho en este nuevo elemento y seleccione "Interrumpir en ..." -> "Modificaciones de atributos"
Ahora ve a la vista de la consola y ejecuta el siguiente comando:
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
Ahora regrese a la ventana del navegador y tendrá 5 segundos para encontrar su elemento y haga clic en / hover / focus / etc, antes de que se alcance el punto de ruptura y el navegador se "congele".
Ahora puede inspeccionar su elemento clicado / desplazado / enfocado / etc. en paz.

Por supuesto, puedes modificar el javascript y el tiempo, si tienes la idea.

ACTUALIZACIÓN: Como Brad Parks escribió en su comentario, hay una solución mucho mejor y más fácil con solo una línea de código JS:

ejecute este javascript en lugar de setTimeout(function(){debugger;}, 5000); , luego ve a mostrar tu elemento y espera hasta que se introduzca en el depurador

Encontré que esto funciona muy bien en Chrome.

Haga clic con el botón derecho en el elemento que le gustaría inspeccionar, luego haga clic en Forzar estado del elemento> Desplazar. Captura de pantalla adjunta.

Para poder inspeccionar cualquier elemento haga lo siguiente. Esto debería funcionar incluso si es difícil duplicar el estado de desplazamiento:

Ejecuta el siguiente javascript en la consola. Esto se romperá en el depurador en 5 segundos.
setTimeout(function(){debugger;}, 5000)
Vaya a mostrar su elemento (moviendo el mouse o sin embargo) y espere hasta que Chrome entre en el Depurador.
Ahora haga clic en la pestaña Elements en el Inspector de Chrome, y puede buscar su elemento allí.
También puedes hacer clic en el ícono Find Element (que parece una lupa) y Chrome te dejará ir e inspeccionar y encontrar tu elemento en la página haciendo clic derecho sobre él, luego seleccionando Inspect Element

Tenga en cuenta que este enfoque es una ligera variación de esta otra gran respuesta en esta página.

Probé las otras soluciones aquí, funcionan pero soy flojo, así que esta es mi solución.

desplazarse sobre el elemento para activar el estado expandido
Ctrl + Mayús + c
pasar el cursor sobre el elemento de nuevo
botón derecho del ratón
navegar al depurador

al hacer clic con el botón derecho, ya no se registra el evento del mouse ya que aparece un menú contextual, por lo que puede alejar el mouse de forma segura

Lo tengo funcionando. Aquí estaba mi procedimiento:

Navega a la página deseada
Abra la consola dev - F12 en Windows / Linux u opción + ⌘ + J en OSX
Seleccione la pestaña Sources en el inspector de cromo
En la ventana del navegador web, pase el cursor sobre el elemento deseado para iniciar la ventana emergente
Presione F8 en Windows / Linux (o fn + F8 en OSX) mientras se muestra la ventana emergente. Si ha hecho clic en cualquier lugar de la página real, F8 no hará nada. Su último clic debe estar en algún lugar del inspector, como la pestaña de fuentes
Ir a la pestaña Elements en el inspector
Encuentra tu ventana emergente (se anidará en el HTML del elemento disparador)
Diviértete modificando el CSS