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

Lilian, miembro de nuestro equipo de trabajo, nos hizo el favor de redactar este escrito porque conoce a la perfección dicho tema.

Solución:

Lo tengo funcionando. Aquí estaba mi procedimiento:

1. Vaya a la página deseada
2. Abre la consola de desarrollo – F12 en Windows/Linux o opción + ⌘ + j en mac OS
3. Selecciona el Sources pestaña en el inspector de cromo
4. En la ventana del navegador web, desplace el cursor sobre el elemento deseado para iniciar la ventana emergente
5. Pegar F8 en Windows/Linux (o fn + F8 en macOS) mientras se muestra la ventana emergente. Si ha hecho clic en cualquier parte 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. Ve a la Elements pestaña en el inspector
7. Encuentre su popover (estará anidado en el HTML del elemento activador)
8. Diviértete modificando el CSS

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 entrará en el depurador en 5 segundos.

  setTimeout(function()debugger;, 5000)

• Vaya a mostrar su elemento (al pasar el mouse o sin embargo) y espere hasta que Chrome irrumpa en el Depurador.

• Ahora haga clic en el Elements pestaña en Chrome Inspector, y puede buscar su elemento allí.
• También puede hacer clic en el Find Element (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 Inspect Element

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

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

correr setTimeout(function()debugger;,5000);luego vaya a mostrar su elemento y espere hasta que irrumpa en el depurador

---

Respuesta original:

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!

1. Ir a la pestaña de elementos en el inspector
2. Botón derecho del ratón y haga clic en “Editar como HTML“
3. Agregue el siguiente elemento después luego presione Ctrl+Entrar:
   

4. Haga clic derecho en este nuevo elemento y seleccione “Pausa en…” -> “Modificaciones de atributos”
5. ahora ve a Consola ver y ejecutar el siguiente comando:
   setTimeout(function()$("#debugFreeze").attr("data-rand",Math.random()),5000);
6. Ahora regrese a la ventana del navegador y tiene 5 segundos para encontrar su elemento y hacer clic/pasar el mouse/enfocar/etc, antes de que se alcance el punto de interrupción y el navegador se “congele”.
7. Ahora puede inspeccionar en paz el elemento en el que hizo clic/sobrevoló/enfocó/etc.

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

Comentarios y puntuaciones del post

---

---

Utiliza Nuestro Buscador