¿Congelar pantalla en el depurador de cromo / panel DevTools para inspección de popover?

394

Estoy usando el inspector de Chrome para intentar analizar el z-indexpopover de bootstrap de Twitter, y lo encuentro extremadamente frustrante ...

¿Hay alguna manera de congelar el popover (mientras se muestra) para que pueda evaluar y modificar el CSS asociado?

Colocar un 'desplazamiento' fijo en el enlace asociado no hace que aparezca el popover.

css google-chrome google-chrome-devtools Abram
fuente
77
Intente establecer un punto de interrupción en su JavaScript inmediatamente después de que se muestre la ventana emergente ( debugger;)
Hope4You
55
Solía window.setTimeoutdisparar debuggeren 5 segundos, luego paso el cursor sobre el elemento y espero.
grimmdude
Hola, escritor técnico de DevTools aquí. ¿Pueden enviarme MVCE que demuestren el problema? A partir de 2019, tenemos algunas herramientas que deberían hacer el truco ( puntos de interrupción del oyente de eventos , conmutaciones de pseudo-clase ) pero no puedo proporcionar una respuesta detallada hasta que pueda reproducir su situación.
Kayce Basques
Puede encontrar otra solución aquí para Chrome y Firefox
Muhammed AbdElFatah
@KayceBasques Aquí hay un ejemplo: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Haga clic en la lista desplegable para abrirla, luego intente inspeccionar el contenido emergente de la lista en la vista Elementos.
RMorrisey

Respuestas:

704

Lo tengo funcionando. Aquí estaba mi procedimiento:

  1. Navega a la página deseada
  2. Abra la consola de desarrollo: F12en Windows / Linux o option+ ⌘+ Jen macOS
  3. Seleccione la Sourcespestaña en el inspector de Chrome
  4. En la ventana del navegador web, desplace el cursor sobre el elemento deseado para iniciar el popover
  5. Presione F8en Windows / Linux (o fn+ F8en macOS) mientras se muestra el popover. 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
  6. Ir a la Elementspestaña en inspector
  7. Encuentra tu popover (estará anidado en el HTML del elemento desencadenante)
  8. Diviértete modificando el CSS
Abram
fuente
99
Este flujo de trabajo me dio una breve y útil introducción al depurador de puntos de interrupción y ayudó a aislar un menú que era difícil de diseñar, ya que desapareció al hacer clic en la consola.
Trevor Pierce
22
Si el elemento DOM usa el evento de enfoque para esconderse, ¡no tienes oportunidad de golpear F8!
Marcel
2
¡@Dean para activar F8 que necesitas usar fn!
mik01aj
10
Para obtener más información, lo que F8hace el acceso directo es pausar el depurador (ejecución del script). Y ctrl + \ también funciona. ( cmd + \ en MacOS)
LeOn - Han Li
1
O puede presionar F8dos veces
samdd
275

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

  • Ejecute el siguiente javascript en la consola. Esto irrumpirá en el depurador en 5 segundos.

    setTimeout(function(){debugger;}, 5000)

  • Vaya a mostrar su elemento (al pasar el ratón por encima o sin embargo) y espere hasta que Chrome entre en el Depurador.

  • Ahora haga clic en la Elementspestaña en el Inspector de Chrome, y puede buscar su elemento allí.
  • También puede hacer clic en el Find Elementícono (parece una lupa) y Chrome lo dejará ir e inspeccionar y encontrar su elemento en la página haciendo clic derecho sobre él y luego eligiendoInspect Element

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

Brad Parks
fuente
77
Respeto que hayas respetado la respuesta de frzsombor. bonito.
Jeremy Moritz
44
Esto es lo que necesitaba, ya que la funcionalidad se debía a que un elemento DOM se agregaba en js Focus y se eliminaba en el desenfoque, lo que siempre ocurre cuando cambias a las herramientas de desarrollo.
trudesign
66
La solución F8 de Abram no funcionó para mí. Este lo hizo. ¡Gracias!
Ralf
3
Gracias. Hice un marcador con el título : ❚❚, dirección : javascript:debugger;. F8funciona, pero para aquellos que prefieren usar el mouse, esto podría ser más conveniente.
Tymek
1
Como otros han comentado, la respuesta F8 no estaba funcionando para mí, ¡y me estaba volviendo completamente loca! Esto funciona como un encanto. ¡Gracias!
DoYouEvenCodeBro
70

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:

ejecutar setTimeout(function(){debugger;},5000);, luego mostrar su elemento y esperar hasta que se rompa en el depurador

Respuesta original:

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

  1. Ir a la pestaña de elementos en el inspector
  2. Haga clic derecho <body>y haga clic en " Editar como HTML "
  3. Agregue el siguiente elemento <body>luego presione Ctrl + Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. Haga clic derecho en este nuevo elemento y seleccione "Romper en ..." -> "Modificaciones de atributos"
  5. Ahora ve a la vista de consola y ejecuta el siguiente comando:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Ahora regrese a la ventana del navegador y tendrá 5 segundos para encontrar su elemento y haga clic / desplazar / enfocar / etc., antes de que se alcance el punto de interrupción y el navegador se "congele".
  7. Ahora puede inspeccionar su elemento cliqueado / suspendido / enfocado / etc. en paz.

Por supuesto, puede modificar el javascript y el tiempo, si tiene la idea.

frzsombor
fuente
11
¡Oye! Gran idea ... aunque ni siquiera necesita agregar el div extra ... Simplemente ejecute este javascript en su lugar setTimeout(function(){debugger;}, 5000);, luego muestre su elemento y espere hasta que se rompa en el depurador. Luego haga clic en la pestaña "Elementos" en el Inspector de Chrome, y puede buscar su elemento allí. También puede hacer clic en el ícono "Buscar elemento" (parece una lupa) y Chrome lo dejará ir e inspeccionar y encontrar su elemento en la página haciendo clic derecho sobre él, luego seleccionando "Inspeccionar elemento".
Brad Parks el
55
Creo que debería agregar esto como respuesta, porque esta solución no solo es mejor que la mía, sino mejor que todas las demás aquí. ¡Muy agradable!
frzsombor
38
  1. Haga clic derecho en cualquier lugar dentro de la pestaña Elementos
  2. Escoger Breakon... > subtree modifications
  3. Active la ventana emergente que desea ver y se congelará si ve cambios en el DOM
  4. Si aún no ve la ventana emergente, haga Step over the next function(F10)clic Resume(F8)en el botón al lado en el centro superior superior del cromo hasta que congele la ventana emergente que desea ver.
Adrián Enríquez
fuente
3
¡GRACIAS! No conocía a este y me está salvando
R Claven
14

Descubrí que esto funciona muy bien en Chrome.

Haga clic derecho en el elemento que desea inspeccionar, luego haga clic en Forzar estado del elemento> Desplazar. Captura de pantalla adjunta.

Estado del elemento de fuerza

Leah Huyghe
fuente
55
Funcionará solo si cpo activa el popover.
mik01aj
6

Pon esto en la pestaña de la consola:

setTimeout(function(){debugger;}, 5000)

Luego haga clic en dónde mostrar la ventana emergente, 5 segundos después: la pantalla se congelará y se divertirá personalizando CSS.

Parker Lucenzo
fuente
0

Mi manera simple:

setTimeout(function(){ debugger; }, 3000);
Nadav B
fuente
77
Esto es exactamente lo mismo que la solución de Brad Parks publicada hace 3 años
frzsombor
-2

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

  1. Pase el cursor sobre el elemento para activar el estado expandido
  2. ctrl+ shift+c
  3. pase el cursor sobre el elemento nuevamente
  4. botón derecho del ratón
  5. navegar al depurador

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

Vincent Tang
fuente