Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

TRUCO: Desarrollo Web - Cómo "congelar" en el tiempo una página Web para depurar el HTML/CSS

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!

José M. Alarcón Aguín Fundador de campusMVP, 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 Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José M. Alarcón Aguín
Archivado en: Desarrollo Web

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Comentarios (2) -

Este truco es interesante. Por mi parte lo que suelo hacer es colocar un "breakpoint" en el DOM:

Inspect -> Pulsar el botón derecho sobre un elemento del DOM -> Seleccionar "Break on -> Subtree modifications".

Responder

Excelente, muchas gracias.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.