IE8 Developer Tools - Miguel Saez - Site Home

En un post anterior contaba sobre la dificultad que presenta el testing cuando se trata del desarrollo de aplicaciones Web. El ecosistema de navegadores es grande, y la familia sigue creciendo.

Dentro de este proceso de testing, frecuentemente es necesaria la utilización de herramientas que permitan hacer una depuración de la ejecución de nuestro código fuente (Javascript), y la inspección del código HTML, y dado que esta ejecución es realizada en el entorno del navegador, es favorable que dichas herramientas estén acopladas en el mismo.

Ya hace un largo tiempo que Firefox contaba con excelentes herramientas en este sentido (Web Developer, Firebug, etc). Sin embargo dichas herramientas son instaladas como add-ons del browser, y no son provistas de forma nativa.

En el caso de Internet Explorer 8, se han incluido herramientas que ayudan en el desarrollo sin necesidad de instalar ningún plugin extra. En este post trataré de hacer un resumen de las mismas, detallando cómo podemos utilizarlas en el desarrollo de aplicaciones Web. Me gustó la explicación que se realiza en este post, aunque no estoy muy de acuerdo con el título, dado que el disponer de nuevas herramientas es en mi criterio un aporte extra, y no un reemplazo.

Developer Tools: Las herramientas se encuentran consolidadas en la ventana de Developers Tools. Se puede abrir una ventana de tools por cada tab del explorer y también podemos optar por embeber la ventana de tools en la propia ventana de exploración mediante el botón de Pin.

Inspección HTML: Acá hay varias opciones, se cuenta con un selector donde haciendo click en la página nos lleva a la porción de HTML que la sustenta. A su vez contamos con información contextual de estilos, incluyendo estilos heredados y redefinidos, layout (posicionamiento), etc. Todo cambio que realicemos en la tool, será automáticamente reflejado en el sitio.

Depuración Javascript: Como dice el jefe: “Uffff….!!”. Me animo a decir que el engine de Debugging es casi tan completo como el de Visual Studio: Se puede hacer Watch de variables, verificar el Stack de llamadas, fijar breakpoints y hasta escribir instrucciones en la consola de pruebas. Además es posible seleccionar de un combo el script sobre el cual se quiere hacer la depuración entre todos los cargados por la página.

Profiler: Similar al profiler de SQL, podemos verificar el tiempo de ejecución de cada función Javascript, la linea de código desde donde fue realizada la invocación, y si hacemos doble click, nos lleva a la linea de código que realizó la invocación.

Outlining: Similar a lo que existe en Web Developer: Tablas, celdas, divs, imagenes, etc.

Browser y Document Mode: No sólo podemos elegir el engine de rendering (IE7, IE8, IE8 Compatibility View), sino el modo de rendering de documentos (Quirck, Standard).

Regla: Esto no lo había encontrado en otras herramientas y me pareció excelente. La posibilidad de usar la lupa para marcar exactamente el pixel que buscamos resulta muy útil.

Selector de colores: Probablemente más utilizada por quienes están en diseño, pero no deja de ser una buena herramienta para tener a mano. No he encontrado un short-cut para disparar el selector, lo cual sería útil.