IE Developer ToolBar – El poder en tus manos

Hace unos días volví a ver una herramienta para desarrolladores Web (Y diseñadores Web) excelente. Si bien en algún momento del pasado ya la había usado, simplemente se me había borrado de la cabeza.

En todo caso, supongo que esta es una nueva versión, o algo totalmente diferente de lo que alguna vez usé.

A continuación trataré de hacer un breve paso a paso descriptivo de las bondades de esta herramienta.

La utilidad.

Muchas veces, los desarrolladores Web, nos encontramos con comportamientos extraños en nuestras páginas Webs, atribuidos a objetos que no se quedan en el lugar que queríamos, o tipos de letras que no se ven como esperábamos, imágenes que no se ven, o scripts que no funcionan.

Salvo excepciones, o herramientas muy específicas, las que analizan el código fuente de la página o depuradores que saltan con alertas cuando el error ocurre, el trabajo suele ser artesanal. Digo artesanal, ya que constantemente nos vemos forzados a modificar un par imagede líneas en el HTML, guardar el archivo en cuestión, volver al navegador, recargar la página y ver si el problema se solucionó. Esto puede ser simple con poco código, pero a medida que las líneas se van sumando, el código por detrás se hace más complejo, los lapsos de espera, entre prueba y error, se hacen más largos, aburridos y agotadores.

Justamente, esto me sucedió hace unas semanas cuando trataba de encontrar porque una fuente variaba su tamaño, donde, las líneas HTML eran generadas dinámicamente con JavaScript en el cliente. En definitiva, no habían muchas posibilidades de ver el código resultante para inspeccionar el comportamiento de la página. Así que el Internet Explorer Developer ToolBar salió al rescate.

 

Haciendo un poco con todo esto.

Lo primero que podemos ver en esta herramienta es la facilidad con la que podemos analizar una página Web, desde como esta construida, hasta modificarla a gusto, para luego aplicar los posibles cambios (Por nuestra cuenta, ya no con la herramienta) en nuestra página.

image

Tomemos como ejemplo a nuestro conocido buscador Google (Debería decir Live Search).

Una vez en el sitio Web en cuestión, o en la página Web (Podría ser una página de nuestra autoría), podemos inspeccionarla, analizarla, y claro, modificarla.

Lo primero que notaremos de nuestra IE Developer ToolBar es el menú de opciones y 3 paneles principales.

 

El menú.

image

Si bien tenemos grandes cantidades de opciones disponibles, nos concentraremos en algunas, que a mi entender son las que me dieron mayores gratificaciones.

El primero de los ítem del menú, es la posibilidad de seleccionar un elemento de la página con sólo hacer un click sobre este image , este también lo encontramos desde el menú "Find". Con él simplemente seleccionamos cualquier elemento de la página para poder ver sus propiedades.

image
Seleccionamos la imagen "Google"

image
Si bien esta única opción puede ser una de las más poderosas, podemos encontrar bajo el menú "Outline" otra de las grandes ayudas de la herramienta.

Esta opción nos otorga la posibilidad de visualizar independientemente las diferentes secciones de la página, como Tablas, Celdas, y otros elementos que normalmente no son visibles pero que sirven para darle estructura a toda la página.

 

 

image
Outlines activados.

Paneles

Siguiendo el proceso, una vez seleccionado un elemento podemos "auditarlo" desde los paneles inferiores. Contamos con 3 paneles, el primero nos muestra un árbol con la estructura HTML de la página, y la posición, dentro de ese árbol, del elemento seleccionado.

image
Posición de la imagen en el árbol HTML

imageEl segundo panel, nos muestra las propiedades del elemento seleccionado. Como por ejemplo, estilos aplicados (Colores, posición, etc.) Este panel tiene la particularidad de que aquí, podremos editar el elemento seleccionado para "ver" como se vería (valga la redundancia) con los nuevos valores aplicados.

Este es el caso de la imagen más abajo, donde con algunas pocas modificaciones podemos ver como quedaría el navegador Google con el logo de MSN Live.

 

image
Google modificado

Finalmente, el tercer panel nos muestra los estilos generales que hereda el elemento seleccionado. Ya que el elemento puede tener estilos propios, también podría haber heredado algunos a nivel global o de ramas superiores del árbol donde se encuentra.

image
Tercer panel. Muestra elementos globales

Finalizando

Con conclusión rápida puedo decir que esta herramienta puede salvarnos de grandes inversiones de tiempo a la hora de encontrar esas fallas visuales en nuestras aplicaciones Web. Pudiendo modificarlas mientras analizamos el código resultante, para luego poder aplicarlas a nuestro código.

Otro dato interesante es que lo instalé en un IE 7 con Vista, y en un IE 6 con XP, y en los dos casos funcionó perfectamente.

Como puntos a mejorar, creo que sería excelente el poder por ejemplo, mover elementos arrastrándolos (No lo pude hacer), y si bien es posible guardar los cambios generados, sería de terrible ayuda poder enlazar estos cambios directamente con nuestro código real, una forma de conseguir cambios de la manera más visual posible. Claro está, que esto último muchas veces depende del código que pudiera generar el código de nuestras páginas, pero seguramente algo se podría lograr, alguna mejora por ahí.🙂



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s