html - tools - Cómo congelar el estado del árbol dom(sin usar la declaración js "depurador") para inspeccionarlo?
google chrome developer (2)
Tal vez estoy pidiendo demasiado de las herramientas de desarrollo del navegador pero ... ¿hay alguna manera de simplemente congelar el estado de la página web sin encontrar las líneas relativas en el código JS y poner la declaración del debugger ? (No es una pregunta específica del navegador, cualquier navegador que pueda hacer esto es bueno)
Tengo una situación en la que deseo inspeccionar algunos DOM en la página a la que solo se puede acceder después de:
- Hice clic en un botón específico
- Desaparece después del evento de desenfoque (por ejemplo, una vez que localicé el elemento padre en el inspector y lo pulsé, desaparece inmediatamente).
Debido a que se activa al hacer clic, "Estado del elemento de fuerza" tampoco ayuda.
¡Gracias!
En Chrome, si conoce el elemento que contiene la interfaz que se modificará, haga clic derecho en él e "Inspeccione el elemento" (o vaya directamente al DOM si es más fácil para usted), luego haga clic con el botón derecho en el elemento del DOM y elija "Interrumpir ..."> "Modificaciones de subárbol" (o cualquier otra opción que le convenga).
Esto debería pausar la ejecución de JavaScript cuando cambia cualquier elemento dentro de ese DOM, lo que le permite pasar por el JS usando F10 etc. y ver el DOM en cualquier punto durante su ejecución.
Por supuesto, podría monitorear todo el <body> esta manera si no sabe qué cambiará, pero eso puede capturar demasiados cambios, dependiendo de qué tan dinámica sea su página.
En las herramientas de desarrollo puede establecer un punto de interrupción en cualquier línea del código fuente. Funciona igual que en Visual Studio, por ejemplo.
El punto de interrupción permanecerá activo incluso si detiene y reinicia el navegador. Funciona con Chrome / Firefox / Internet Explorer al menos.
Alternativamente, puede registrar un estado de objeto una vez serializado :
console.log( JSON.stringify( state ) )