Lamentablemente, me encuentro una vez más ante la tesitura de que desarrollar una web que se vea mínimamente bien correctamente IE se torna un auténtico calvario. Además de la lista que encontré de errores reconocidos por Redmond, es necesario tener herramientas más potentes para poder detectar los fallos antes de que tu cerebro se churrasque.

Yo solía utilizar un par de herramientas, clásicas, para Firefox, como son CSS Viewer y  Web Developer, pero hoy gracias a uno de mis compañeros, he llegado un paso más allá.

En primer lugar, empecemos con el enemigo. Los de las ventanas tienen una herramienta que para mi sorpresa, aunque clamaba ser válida para IE7+, resulta que funciona en versiones anteriores. Se trata del IE Developer Toolbar. Una flecha azul aparece como icono nuevo en la barra de direcciones, y te permite tener un control visual de qué clases de CSS y qué definiciones de HTML afectan a un lugar en concreto de una web que estés desarrollando.

Y luego, gracias a este compañero, he descubierto Firebug. Esta extensión hace “lo mismo” pero de forma mucho más completa y para Firefox. Instalada y funcionando, aparece un pequeño bichejo como el de la foto en la esquina inferior derecha de la ventana de FF, que cuando la abres te permite ir profundizando a través de una estructura arbórea en el CSS de la página. Lo más notable es que te muestra la herencia de selectores que afectan a un objeto en particular, permitiéndote limpiar y aligerar el código de manera rápida y fácil.

Como las comparaciones son odiosas, gracias a estas dos herramientas, podréis rápidamente encontrar los “errores” de diseño, y solucionarlos de forma eficaz… la mayoría de las veces claro.

En fin, enfermillos, aquí tenéis todas estas pequeñas pero inconmesurablemente útiles herramientas a vuestra disposición, para que vuestro trabajo diario sea un poquito más fácil.

Enlaces: CSS Viewer | Web Developer | IE Developer Toolbar | Firebug