Con el Web developer toolbar, tendremos una herramienta de testeo de nuestras páginas casi completo, a tiro de barra de herramientas. Muy fácil de usar y de aprender, y que probablemente nos sacará de más de un apuro a la hora de hacer la parte gráfica de nuestras Webs. Esta herramienta funciona como plugin solo para Mozilla Firefox.
Haremos un repaso rápido a las opciones que tiene:
- Disable: Desde aquí podremos deshabilitar las opciones más comunes, para ver el comportamiento de nuestra página en ausencia de estos sistemas, por ejemplo, Java, o javascript, colores o referers. Así, podremos comprobar si alguien sin javascript puede al menos acceder a nuestra información (navegadores de solo texto, lectores de páginas, motores de búsqueda, etc).
- Cookies: Cuando desarrollamos aplicaciones Web, es común que recurramos a las típicas “galletitas” para saber cosas del usuario. Desde este menú podremos, o bien deshabilitarlas, o bien añadirlas, eliminarlas, ver su código, etc.
- CSS: Para mi uno de los menús con más utilidad. Como de costumbre podemos deshabilitar los estilos y ver la página “desnuda”, podemos ver el código de las hojas CSS y sobre todo, centrarnos en algún elemento determinado. Pero lo más importante de todo es que nos permite editar el estilo de cualquier elemento “en caliente”, incluso de páginas que están online y no son nuestras!
- Forms: Desde aquí tenemos varias opciones típicas de formularios, comprobaciones de métodos de envío, prepopulado y modificación de algunos valores desde cliente.
- Images: El trabajo básico de las imágenes se reduce a: especificar bien los atributos “alt”, comprobar que el peso no es excesivo, y ver si hay superposiciones (entre otras). Desde aquí nos permite ir activando y desactivando opciones para comprobar los resultados en nuestra página (o en otras).
- Information: Este menú suele ser más útil para ver otras páginas que las nuestras (si lo hemos desarrollado nosotros, no nos dirá nada nuevo), o bien para depurar CSS, en esos momentos en los que te estás tirando de los pelos. Nos permite mostrar las anclas, claves de acceso (accesibilidad), tamaño en pixels de elemtos de bloque, orden de los DIVs y parentesco, información de los elementos (este último el que más me gusta, ya que saca un tooltip que cambia por donde tienes el ratón), y en general, toda la información relacionada con estilos y código Javascript.
- Miscellaneous: Aquí tenemos las clásicas opciones que no entrar en ningún sitio. Desde ver unas líneas guía muy útiles para maquetar, hasta limpiar todos los datos privados (caché, historial…) nuestros.
- Outline: A nivel visual, hay muchas ocasiones en las que es dificil ver realmente hasta donde llega una celda, o una capa determinada. Con outline podremos dibujar un borde bien grueso y rojo que nos marque los bordes de todos estos elementos, y así ver, por qué narices no conseguimos maquetar bien la página.
- Resize: Podemos modificar el tamaño de nuestro navegador a resoluciones determinadas para comprobar como navegarían, por ejemplo, los pobres de 640×480. También hay una opción de zoom.
- Tools: Desde aqui tenemos acceso directo a los validadores de la W3C, enlaces, y WAI (accesibilidad), además de poder abrir el DOM Inpector.
- View Source: Ver código fuente, pero con facilidades para ver el código de la página de un frame facilmente.
- Options: Opciones de configuración de la extensión.
Por otra parte, tenemos el DOM Inspector, imprescindible cuando nuestro amigo javascript lo manipula dinámicamente con appendChilds, innerHtMLs y compañía. Podemos ver el árbol jerárquico actualizado de la página que se muestra, con información de cada nodo, atributos, etiquetas, etc… y por supuesto, buscar dentro de todos los elementos, ver quienes son los padres y los hijos, etc… No se como hace tiempo pudimos desarrollar sin él. Nota: Al instalar Firefox, hay que especificar que quieres también el DOM inspector.
La Web developer, se puede descargar aquí.
