Todos los que hemos trabajado en la creación de páginas web hemos tenido que sufrir la guerra de navegadores: Una vez que tienes creado tu sitio y el diseño es perfecto, lo pruebas con IE/Opera/Firefox/Safari y aquello explota, llevando siempre Internet Explorer gran parte de la culpa.
La razón de esto es que las versiones anteriores a IE9 han tenido problemas con la interpretación de los estándares, y ello implica que sistemas basados en web que han sido desarrolladas para Internet Explorer durante muchos años, con la nueva versión dejan de funcionar, o de verse correctamente.
En Microsoft han sido conscientes de este problema y en Internet Explorer 9 han introducido las herramientas de desarrollador F12, que son un conjunto de opciones que nos harán la vida, como poco, menos difícil. Para acceder a ellas, basta con pulsar F12 en nuestro teclado y encontraremos un menú como el que se muestra a continuación:
Una de las opciones que se incluye es un visor de código fuente, que nos permite ver y comparar lo que se está renderizando con el código fuente que llega del servidor de una manera más limpia que el tradicional click derecho / ver código fuente. Cuando se hace click en un elemento (por ejemplo un párrafo o un div) se sombrea el equivalente en la página que estamos viendo, para poder hacer una comparativa.
Otro añadido es la posibilidad de ver y editar el estilo del elemento seleccionado, de tal manera que podamos «jugar» con el CSS, agregando, quitando y modificando estilos en tiempo real sin efectos secundarios, los cambios se pierden al recargar la página, pero para ajuste fino puede ser muy útil.
Sin embargo, una de las características más importantes es lo que vemos en la esquina superior derecha: Modo de explorador y Modo de documento. Cambiando estos parámetros podemos visualizar la página tal y como se vería en IE7, IE8 e IE9, teniendo en un navegador todas las opciones, sin tener que recurrir a otros programas o un sistema dedicado.
Por otro lado si hacemos desarrollo con Javascript, las pestañas Console, Script y Profiler nos permitirán depurar el código, ver los posibles fallos, poder visualizar variables, ejecutar comandos de manera concurrente y medir la velocidad de nuestros scripts.
Por último, la pestaña Network, permite capturar qué se está transfiriendo cuando nuestra página se carga, así podremos ver si hay imágenes que están ralentizando la carga, o ficheros vacíos que se están enviando al navegador.
Además de las pestañas, tenemos una serie de opciones para habilitar/deshabilitar javascript, la carga de imágenes, el agente de usuario o incluso acceso al validador del W3C.
En resumen, otra utilidad a tener en cuenta si hacemos desarrollo web.
Más información: Internet Explorer Learning – F12 Developer Tools
rlbisbe @ dev 