Volvemos a la carga con Internet Explorer 8 y sus nuevas características. Hoy, por seguir con la temática del desarrollo web, vamos a ver las funciones para desarrolladores web que incluye Internet Explorer 8.
Desde el menú de herramientas o simplemente pulsando la tecla F12 accedemos a una ventana que nos muestra el código fuente de cualquier pagina web de una manera agradable y cómoda, además de incluir una serie de herramientas para analizar los elementos que componen el documento.
La ventana nos presenta 4 pestañas principales para controlar todos los aspectos de nuestra web:
HTML
Es la primera pestaña que se nos abre cuando entramos en el modo de desarrollador de Internet Explorer 8. Presenta a la derecha de la pantalla un cuadro de detalle donde, por defecto, se nos muestras las propiedades de estilo que se están aplicando al elemento seleccionado.
Además de poder ver los estilos aplicados podemos ver (mediante la opción Trace Styles) cual es el origen de un valor concreto, para determinar si en algún momento dos clases u hojas de estilo están “compitiendo” entre sí por los estilos de un objeto.
La opción de Layout nos muestra a modo resumen cuales son las propiedades que presenta un objeto con lo que respecta a su posición dentro de la página y frente a otros objetos. Con unidades expresadas en pixeles y un diseño fácil de entender nos quedara ya mucho más claro porque ese div rebelde se está colocando donde no debe.
Para terminar tenemos Attributes, un resumen de todos los modificadores aplicados a nuestro elemento y desde donde podremos agregar nuevos. Microsoft ha incluido además una lista de todos los elementos aceptados por lo que nos será mucho más fácil encontrar el que estamos buscando.
CSS
Aunque en el apartado anterior hemos podido modificar la apariencia de la página mediante el código HTML desde la pestaña de CSS tendremos control aun más directo sobre los estilos que se manejan en nuestra página. Unos simples checkboxs junto a los nombres de clases e ids nos permiten activar o desactivar de manera granuralizada los estilos, comprobando cómo se comporta nuestro sitio frente a distintas configuraciones.
Script
En la actualidad cada vez mas paginas hacen uso de scripts Javascript para aportar funcionalidades extra a sus contenidos. El auge de la tecnología AJAX ha hecho que opciones como esta sean indispensables.
Desde esta pestaña accederemos a todo el código Javascript y podremos interactuar con él a voluntad. Además disponemos de distintas opciones en la zona de la derecha que nos permitirán controlar las variables y el flujo del programa.
Mediante la opción Console podemos ejecutar aquel código Javascript que queramos en el contexto de la página web. Esto es útil cuando necesitamos ejecutar algún método concreto y no queremos tener que realizar todas las acciones necesarias para lograr lanzarlo.
En Breakpoints aparece una lista de los breakpoints que hayamos definido en nuestro código. Para definir uno solo debemos de hacer clic sobre la zona blanca que aparece a la izquierda del número de la línea en la que deseemos detenernos.
Locals nos muestra las variables y sus valores cuando estamos dentro de una función. Así podremos saber en todo momento que se está cociendo dentro de nuestra aplicación.
Watch nos permite monitorizar el valor de una variable a través del tiempo. Simplemente debemos de escribir el nombre de esta e Internet Explorer 8 se encargara de mostrárnosla.
Para terminar la opción de Call Stack nos muestra el hilo de llamadas que ha realizado nuestro código. Esto puede ser útil cuando realizamos llamadas recursivas y necesitamos ver donde se queda bloqueado nuestro código.
Profiler
La última opción hará las delicias de todos aquellos obsesionados por la usabilidad. Esta zona nos permite generar un árbol con los tiempos que tardan las distintas partes de nuestra página en ejecutarse. Si observamos que una zona concreta de nuestro código consume la mayor parte del tiempo de procesamiento de nuestra página sabremos donde invertir esfuerzos en mejorar el rendimiento.
Además de todas estas opciones tenemos una barra superior que no varía en ningún momento. Desde esta barra podemos acceder a distintas opciones para el análisis web. Existen opciones para analizar los elementos sobre la propia página, resaltándolos mediante un borde de color. Opciones para deshabilitar distintos elementos como CSS o imágenes (para comprobar el funcionamiento con navegadores para personas con discapacidad). Incluso opciones para comprobar si nuestro código cumple los estándares, enviando nuestra página a los servidores de la W3C para que comprueben nuestro código.
Con esto completamos un vistazo general a las nuevas funcionalidades para desarrolladores de Internet Explorer 8. Quizás no sea una característica que vayan a usar todos los usuarios pero sin duda harán las delicias de todos aquellos que trabajamos día a día con la web.
Un saludo,
Enviado
jun 26 2009, 10:29
por
Pedro Laguna