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!
Fecha de publicación: