> Manuales > Manual de IE Developer Tools

En este cuarto artículo de Developer Tools vamos a empezar a analizar las distintas herramientas de que disponemos en IE9.

Este artículo forma parte de una serie dedica a las Developer Tools de Internet Explorer 9.

1. Herramientas

Las herramientas de desarrollador de IE tienen distintos modos de funcionamiento, que se reflejan en las pestañas que podemos ver en el "Menú de Modos" del que hablábamos en un anterior artículo. En la Figura 1 podemos ver este menú de modos resaltado en rojo.

Cada una de estas pestañas se corresponde con una faceta distinta relacionada con el desarrollo web. En Internet Explorer 8 teníamos pestañas para HTML, CSS, Script y Profiler, A ellas se han sumado dos nuevas pestañas en la última versión de IE, la 9: Console y Network. Vamos a hacer un repaso de cada una de ellas, para conocer en profundidad las posibilidades que nos brindan a los desarrolladores.

2. Herramienta de HTML

La pestaña HTML permite visualizar la estructura DOM que ha renderizado Internet Explorer, a partir de la página descargada. Desde esta pestaña se pueden ver el código de marcado de cada elemento que aparece en la página y sus atributos.

En cuanto a la estructura de esta pestaña, se compone de un menú específico de la pestaña, un panel primario de contenido, un menú para elegir los tipos de propiedades que queremos visualizar, un panel de propiedades y una caja de búsqueda. En la Figura 2 podemos ver cada una de estas partes:

En la parte superior tenemos una barra específica de este modo compuesta de distintos iconos. Estos iconos, de izquierda a derecha, representan las siguientes funcionalidades:

Inmediatamente debajo de la barra específica de la pestaña podemos encontrar el panel primario de contenido. Este panel tiene una doble función: dibuja el árbol DOM, salvo que nos encontremos en modo edición, en cuyo caso actúa como un mero editor de texto. En la Figura 3 podemos ver este panel más en detalle.

Cuando el panel no se encuentra en modo de edición, podemos hacer uso de él para recorrer el árbol de elementos de la página. También, cuando utilizamos la herramienta "select element by click, es en este panel donde se muestra la información del elemento una vez seleccionado. El panel está sincronizado con el panel de propiedades, con lo que cada vez que se elige un nuevo elemento en él, se actualiza la información que contiene el panel de propiedades con los valores correspondientes a ese elemento.

El menú de elección de propiedades nos permite elegir qué conjunto de propiedades del elemento queremos inspeccionar. Existen cuatro opciones diferentes, que detallamos a continuación:

Desde todas estas ventanas se pueden realizar modificaciones en línea de los valores del elemento seleccionado. De esta forma podemos ver de forma inmediata las consecuencias de, por ejemplo, modificar el color de background de un botón o su propiedad border.

3. Conclusiones

Hemos podido ver la primera de las herramientas que nos ofrecen las Developer Tools. En concreto esta herramienta permite gestionar todo lo relacionado con los elementos HTML del árbol DOM de la página web, así como acceder a sus estilos CSS.

En los siguiente artículos completaremos la información con las demás herramientas: CSS, Console, Script, Profiler y Network.

4. Bibliografía

Referencia de la Interfaz de Usuario de las Developer Tools (Inglés): http://msdn.microsoft.com/en-us/library/dd565626(v=VS.85).aspx
Centro de Desarrollo de Internet Explorer 9 (Español): http://msdn.microsoft.com/es-ES/ie

Javier Holguera

Desarrollador senior con tecnología .NET en Payvision.

Manual