Hoy damos por finalizada la serie de entregas dedicadas al uso y funcionamiento de las características proporcionadas por las Developers Tools. Queremos recordar una última vez que el principal objetivo de esta serie de artículos técnicos no ha sido otra que la de acercar al usuario las diversas funcionalidades que proporcionan las herramientas de desarrollo, integradas a partir de la versión 8 del navegador Internet Explorer.

En el artículo anterior se mostraban las opciones disponibles en el entorno a la hora de establecer una correcta validación de los desarrollos mediante el uso del menú Validar. Hoy, antes de cerrar esta entrega de post técnicos, queremos centrarnos en el resto de las opciones de configuración disponibles, como son las dedicadas al tratamiento de imágenes y cache. También queremos mostrar las utilidades incorporadas a través del menú Herramientas, las cuales pueden ser utilizadas por parte de los programadores para realizar una gestión optimizada del desarrollo de sitios y aplicaciones web.

Opciones de configuración – Tratamiento de imágenes, cache y herramientas disponibles

Las herramientas de desarrollo proporcionan datos e información variada en cuanto al tratamiento y gestión de imágenes se refiere. Gracias a las opciones que se encuentran disponibles a través del menú Imágenes, se proporcionan diversas capacidades de visualización asociadas a las imágenes que utilicemos en nuestros sitios, como por ejemplo, las relativas al tamaño, rutas o dimensiones utilizadas en las mismas. Obsérvese la siguiente imagen y como al tener activadas las opciones Mostrar dimensiones de imágenes, Mostrar tamaños de archivo de imágenes, Mostrar rutas de acceso de imágenes y Ver texto alt, se proporciona la información solicitada.

Otra opción interesante a destacar, es la posibilidad de disponer de un informe detallado de todas las imágenes utilizadas en el desarrollo de un sitio o página web. Para ello, tan solo se deberá utilizar la opción de menú Ver informe de imágenes, acción que generará un informe basado en XML como el que podemos visualizar en la siguiente imagen.

El informe generado proporcionará información interesante, como alguno de los casos que se exponen a continuación. Disponer de datos relativos a si se está utilizando por parte de la etiqueta IMG el uso de atributos específicos DYNSRC (Dynamic Source), lo que servirá para averiguar si el comportamiento del elemento imagen se está utilizando para reproducir un archivo de vídeo, o de atributos LOWSRC (Low Source), utilizados en el caso de que archivo de imagen original proporcionado disponga de un tamaño considerable (lo que puede derivar en una página ralentizada a la hora de descargarse) por lo que es posible visualizar una imagen más pequeña antes de que se descargue el archivo de imagen principal.

También se dispone de una opción interesante a través de la acción Deshabilitar imágenes, lo que permitirá desactivar momentaneamente el renderizado de las mismas, en el caso de que se desee realizar una carga rápida del entorno para procesos de depuración donde no sea necesario el uso de imágenes.

Otro apartado interesante a analizar es el que hace referencia a las opciones proporcionadas por las herramientas de desarrollo a través del menú Cache. De todos es sabido que borrar los archivos temporales de internet (limpieza de la memoria caché) y las cookies muchas veces soluciona un gran número de problemas derivados de la mala configuración de las mismas. Algo tan simple de realizar, como borrar la memoria caché crea más espacio en el disco duro, lo cual puede afectar positivamente la capacidad de ver imágenes en nuestros sitio web. Para ello, tan solo habrá que remitirse a la opción Borrar caché de exploración. Opcionalmente, se dispone de la posibilidad de borrar la cache de exploración para un determinado ámbito o dominio a través de la opción Borrar caché de exploración para este dominio.

En cuanto a las opciones de gestión de cookies disponibles, el menú Cache proporciona la utilidad de deshabilitar el uso de cookies o realizar un borrado global o selectivo de las mismas a través de las opciones de menú Borrar cookies de la sesión o Borrar cookies para el dominio.

Además, al igual que pasaba con las imágenes, vamos a disponer de la opción Ver información de cookies, lo que desencadenará la generación de un informe basado en XML con información de las cookies que actualmente dispone nuestro navegador.

Para finalizar, vamos a hacer mención a algunas herramientas incorporadas en el entorno. Disponer de la posibilidad de cambiar la resolución de nuestros sitios o de poder indicar un User-Agent específico son algunas de las opciones que incorporan las herramientas de desarrollo y que facilitarán la labor a la hora de preparar nuestras aplicaciones para otros entornos, como puedan ser por ejemplo resoluciones de nuestros sitios adaptadas a dispositivos móviles o Tablet PC.

A su vez, se puede realizar una selección de colores a utilizar por parte del desarrollador mediante la opción Mostrar selector de colores, lo que permitirá de forma cómoda poder elegir la combinación de colores a utilizar en nuestros sitios, por ejemplo, los colores que se pueden utilizar en el uso de capas a través de etiquetas DIV.

Una última utilidad es la que hace referencia a la posibilidad de realizar mediciones ajustadas a la hora de maquetar nuestros sitios a través de la opción Mostrar la regla. Observe que mediante la pulsación de la tecla Ctrl se permite la generación y uso de varias reglas. En dicha utilidad también se incluye el uso de la herramienta Lupa, la cual se activará mediante la combinación de teclas Ctrl + M.

Con esto damos por finalizada las entregas técnicas dedicadas a las posibilidades de uso proporcionadas por parte de las Developer Tools, esperando que hayan sido de utilidad para todos aquellos que hayan seguido esta serie de artículos.

Autor del artículo: José Bonnin