La extensión Web Developer para Firefox genera una barra con varias herramientas útiles para la creación, análisis y desarrollo de sitios web. Con Web Developer es posible la manipulación instantánea de formularios, CSS, HTML, imágenes, cookies, etc.
WD - Barra de herramientas
Esta es una breve sinopsis de algunas de las herramientas que esta extensión ofrece para el popular navegador web.
En los siguientes párrafos enlistaremos tan sólo algunos de las herramientas que ofrece la extensión Web Developer, especialmente las nueve que son revisadas en el artículo en inglés de Sixrevisions.com, sobresalientes sobre todo pos su aspecto pragmático pera revisar un sitio ya terminado o realizar rápidos estudios de caso.
1) Cambiar el código XHTML al vuelo sin modificar los archivos de la web.
El menú Miscellaneous > Edit HTML y Miscellaneous > Edit CSS despliega un viso de estos códigos; puedes hacer cualquier modificación a tags para ver instantáneamente cómo se aplican los cambios en el sitio. El área de edición se puede colocar abajo o a un lado del navegador.
En este ejemplo, la imágen del sitio original y otra al cambiarle el color de fondo de la hoja y el orden de algunos textos.
2) Midiendo cosas rápidamente con la regla
Con la herramienta disponible en Miscellaneous > Display Ruler Tool puedes medir el tamaño de varios de los objetos que aparecen en el navegador. Esta herramienta es útil para cuando qieres medir el tamaño de un bloqe div por ejemplo (o el margen o padding interno), para esto usala activando Information > Display Block Size la opción.
Web depelovment - Regla
3) Ver cómo se ven las páginas en un navegador no tradicional
Cada vez más es la gente que utiliza dispositivos móbiles para visitar sitios web que por lo general están construidos para navegadores tradicional o de tipo escritorio. Puedes ver cómo se despliegan los sitios que generas activando la opción del menú Miscellaneous > Small Screen Rendering.
Así se ve la página de meneame.net
Meneame sin small screen
y así se ve luego de renderearla como si estuviera en una pantalla pequeña:
WD- meneame rendereada como small screen
4) Rellenar formularios rápidamente
Cuando necesites comprobar que los formularios se despliegan correctamente y necesitas que aparezcan como rellenados, puedes usar la opción del menú Form > Populate Form Fields.
5) Encontrar elementos de la hoja de estilos
Para localizar rápidamente cuales son los elementos de una hoja de estilos que tienes que modificar en un sitio o si estás estudiando cómo es que fue diseñado un sitio, puedes activar la opción CSS > View Style Information.
WD - css de yahoo
6) Ver código CSS y Javascript
Puedes visualizar también la totalidad del código CSS y/o Javascript para intentar encontrar algún elemento en específico (usando por ejemplo el buscador de mozilla que se activa si presionas ctrl + f). Estas opciones las encuentras en CSS > View Style Information y en Information > View Javascript, al activarlo te lo mostrará en una nueva pestaña.
7) Viendo qué tan optimizado está el sitio
Utilizando la opción Tools > View Speed Report automáticamente se invoca el servicio en línea de WebSiteOptimization.com, un sitio que ofrece un sinfín de información como son el tiempo que tarda un sitio web en cargarse y cuantas conexiones HTTP están siendo usadas, entre otras muchas cosas.
WD -speed
8) Ver Layers de un sitio
Siempre es útil determinar cuales objetos están en un plano o capa superior. Para eso puedes usar Information > View Topographic information que te ofrece una representación visual de las profundidades en que se encuentran los elementos de la página : los más oscuros están mas abajo que los que aparecen en todos claros o grises.
WD - Sitio de Drupal con Información de layers
2010 Siete Coyote +