2.4. Depuración 1w3ue

Inevitablemente, todos los diseñadores web cometen errores en los trabajos que realizan. En la mayoría de las ocasiones, los errores se descubren al probar el diseño en diferentes navegadores. Además de mostrar los errores, los principales navegadores disponen de herramientas que permiten descubrir de forma sencilla la causa concreta del error.

Antes de que existieran estas herramientas avanzadas, el trabajo del diseñador era mucho más complicado, ya que no era fácil descubrir la causa exacta del error entre todas las posibles:

• El selector está mal escrito.
• Las propiedades están mal escritas o tienen valores no permitidos.
• Otros selectores tienen más prioridad y están sobreescribiendo una propiedad y/o valor.
• Las reglas y valores están bien escritos, pero los elementos no ocupan el espacio que a simple vista parece que están ocupando en la pantalla.
• El navegador tiene un error que impide mostrar correctamente la página.

Los diseñadores web idearon hace mucho tiempo soluciones ingeniosas para cada uno de los problemas anteriores. En primer lugar, cuando no se está seguro de si todas las reglas CSS están bien escritas, lo mejor es validar la hoja de estilos utilizando el validador CSS del W3C.

Una vez descartado el error de sintaxis, el siguiente problema a resolver es por qué una regla CSS no se aplica correctamente a un elemento. Una estrategia muy utilizada consistía en añadir alguna propiedad que sea visualmente significativa para comprobar si realmente el selector se está aplicando. Poner todo el texto del elemento en negrita, aumentar mucho su tamaño de letra y cambiar el color de fondo eran algunas de las estrategias habituales. Cuando lo anterior no resultaba, se utilizaba directamente la palabra reservada !important para aumentar la prioridad de esa propiedad CSS.

Otro de los problemas habituales en el diseño web está relacionado con el espacio que ocupa cada elemento en pantalla. Como los elementos por defecto no muestran ningún borde y su color de fondo es transparente, no es posible conocer a simple vista el espacio que ocupa cada elemento. Por lo tanto, cuando se posicionan elementos de forma flotante o cuando se establecen márgenes, rellenos, alturas y anchuras máximas/mínimas, no es posible visualizar si el navegador está mostrando correctamente todos los elementos.

Para solucionar este problema la técnica habitual consistía en añadir un borde visible a los elementos. Como los bordes visibles ocupan sitio en pantalla, el problema de esta solución es que modifica el propio diseño. La alternativa consistía en añadir un color de fondo diferente para cada elemento. Otra posible alternativa es el uso de la propiedad outline de CSS, que añade un perfil en el contorno de un elemento pero no ocupa sitio y por tanto no modifica el diseño de la página.

Los navegadores modernos como Safari, Opera y Firefox incluyen el soporte de la propiedad outline, mientras que las versiones anteriores a Internet Explorer 11 no es capaz de mostrar perfiles en los elementos de la página. El diseñador Chris Page ha publicado un artículo llamado A Handy CSS Debugging Snippet en el que muestra unas reglas CSS que hacen uso de outline y permiten depurar fácilmente cualquier diseño sin utilizar herramientas avanzadas:

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

2.4.1. Firebug 10126u

Al margen de soluciones manuales y técnicas más o menos ingeniosas, los diseñadores web profesionales de hoy en día utilizan herramientas avanzadas para averiguar con precisión la causa de los errores de diseño. De todas las herramientas disponibles, la mejor con mucha diferencia es Firebug, una extensión del navegador Firefox.

Firebug dispone de todas las utilidades que necesitan los diseñadores y programadores web en su trabajo. Firebug es una herramienta gratuita, completa, fácil de utilizar y para la que se publican nuevas versiones de forma continua.

2.4.2. Otras herramientas de depuración 2p15s

Firebug es la mejor herramienta para depurar el diseño de los sitios web, pero sólo está disponible para el navegador Firefox. Como la mayoría de errores en el diseño web sólo se producen en los navegadores de la familia Internet Explorer, Firebug no se puede utilizar.

Afortunadamente, los creadores de Firebug han publicado una versión reducida y simplificada de Firebug compatible con el resto de navegadores. La versión reducida se denomina Firebug Lite y requiere el uso de JavaScript. Aunque se puede descargar Firebug Lite para utilizarlo desde nuestros propios servidores, la forma más sencilla de probarla es añadir el siguiente código en la página que se quiere depurar:

<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

El código anterior se puede colocar en cualquier zona de la página, aunque normalmente se incluye dentro de la sección <head>.

Por último, como las empresas que desarrollan los navegadores consideran que Firebug es insuperable, desde hace un tiempo se dedican a copiar todas sus características. Internet Explorer 8, Safari 3 y Opera 9 (Actualmente estamos en las versiones Internet Explorer 11, Firefox 65, Safari 5.1.8, Opera 58 y Google Chrome 71.) disponen de herramientas de depuración que son una réplica de Firebug.