TRUCO: Desarrollo Web - Cómo "congelar" en el tiempo una página Web para depurar el HTML/CSS
Publicado por
José Manuel Alarcón
el
El truco de hoy es corto y muy sencillo, pero al mismo tiempo poco intuitivo, y puede resultar útil en ciertas ocasiones. Básicamente consiste en "detener el tiempo" o "congelar" una página web de modo que podamos examinarla tal cual está en ese preciso instante sin preocuparnos de que nuestra interacción sobre esta pueda cambiar nada, no mediante un script ni por culpa de cualquier otra acción. Esto puede ser muy útil para depurar o afinar elementos HTML o reglas CSS que afectan a elementos dinámicos, que aparecen y desaparecen en función de las acciones del usuario. Vamos a verlo...
El truco de hoy es corto y muy sencillo, pero al mismo tiempo poco intuitivo, y puede resultar útil en ciertas ocasiones.
Por ejemplo, estás depurando una página web y necesitas examinar el árbol del DOM de la página para ver las propiedades de un elemento concreto. El problema es que ese elemento se genera dinámicamente, mediante JavaScript, y en cuanto usas el típico menú de "Examinar elemento" y se abren las herramientas del desarrollador, el elemento desaparece.
Si se tratase de un elemento con la pseudo-clase :hover aplicada, es decir, aquellos que se hacen visibles o cambian sus propiedades cuando se pasa el ratón por encima, es algo muy fácil ya que los navegadores (y en especial Chrome, que es del que me voy a ocupar hoy) ofrecen facilidades para simular esto sin necesidad de realmente pasarle por encima al elemento (esto lo veremos en el vídeo a continuación, hacia el final). Sin embargo, si el elemento se genera mediante un script que luego lo hace desaparecer, no tendremos tanta suerte.
Por fortuna, en Chrome existe una forma muy sencilla de conseguir "congelar" la página en un momento determinado y por lo tanto evitar que esos elementos desaparezcan, pudiendo examinarlos, modificarlos, etc...
Te lo cuento en este vídeo corto a continuación:
¡Espero que te resulte útil!
Fundador de campusMVP.es, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en LinkedIn.
Ver todos los posts de José Manuel Alarcón
Archivado en:
Desarrollo Web
¿Te ha gustado este artículo? ¡Compártelo!