Herramientas útiles para el diseño web (II): Web Developer
En la primera entrega de herramientas útiles para el diseño web os presentamos cuatro utilidades genéricas que todo desarrollador suele utilizar (además de gran número de usuarios). En esta segunda entrega nos referiremos a una herramienta, o mejor dicho, a una barra de herramientas, mucho más específica: Web Developer.
Web Developer es una extensión de navegador creada por Chris Pederick que podemos utilizar tanto con Mozilla Firefox (descargar e instalar desde aquí) como en Google Chrome (descargar e instalar desde aquí) en cualquier plataforma que soporte dichos navegadores (MacOS, Windows y Linux incluidos). Las dos versiones son muy similares, por lo que un repaso genérico del producto valdrá para hacerse una idea de lo valiosa que resulta esta extensión a la hora de desarrollar para la web.
La barra de Web Developer, que en Firefox aparece bajo la barra de direcciones y en Chrome pinchando en la rueda dentada junto a la misma (una vez instalada la extensión, por supuesto), se divide en una serie de pestañas con nombres muy representativos de las herramientas que van contener:
– Disable (inhabilitar): En esta pestaña encontraremos opciones para inhabilitar elementos en la carga de la página: la cache, java, javascript, pop-up, redirecciones, colores… La mayor parte sirven para comprobar el comportamiento de la página en diferentes configuraciones del navegador.
– Cookies: Contiene herramientas que permiten añadir, modificar, borrar o inhabilitar cookies.
– CSS: Completo juego de herramientas para las hojas de estilo. Podemos inhabilitarlas, comparar páginas de estilo diferentes, modificarlas y guardarlas mientras vemos los cambios , ver la aplicación para diferentes medios… Además, cuenta con un inspector que permite ver independientemente el estilo de cada elemento de la página.
– Forms (formularios): Borrar el contenido de un formulario, añadírselo, realizar cambios en su código… En definitiva, herramientas para hacer comprobaciones rápidas en los formularios sin tener que utilizar programas ajenos al navegador.
– Information (información): Dividida en dos secciones. Las opciones pertenecientes a la primera (precedidas de la palabra display) muestran la información en la propia página sobre la que realizamos la consulta. Las de la segunda sección (precedidas de la palabra view) abren una pestaña nueva con la información requerida. El conjunto de opciones permite obtener casi cualquier dato que podamos necesitar referente a una página de una forma rápida y ordenada.
– Miscellaneous (miscelánea): Herramientas y opciones que no tenían cabida en ninguna de las demás pestañas. Así, en esta podemos, desde editar el código html, hasta mostrar una regla para tomar medidas de la página (otra opción más que añadir a las que sugerimos en el anterior artículo de Herramientas útiles para el desarrollo web), pasando por mostrar guías o marcar los enlaces como visitados. En esta sección encontraremos una de las pocas diferencias entre la versión de Chrome y la de Firefox. Así, la versión de Chrome añade un selector de color (también mencionados en la entrega anterior de esta serie de entradas), mientras que en Firefox no aparece dicha herramienta, pero sí lo hace una lupa para ver detalles, omitida en la versión del navegador de Google.
– Outline (perfilar): Perfila con diferentes colores diversos elementos de la página para resaltar visualmente la estructura de la misma.
– Resize (cambiar de tamaño): Esta pestaña contiene varias opciones relacionadas con el tamaño de la ventana. Así, tenemos la opción de ver el tamaño actual, tanto de la ventana del navegador como del área de visualización así como de redimensionar el tamaño de la ventana a las medidas que deseemos o a algún tamaño previamente establecido. También añade una función para el diseño adaptativo, pulsando en View Responsive Layout nos envía a una página en la que vemos como se comportaría la página en la que nos encontramos en diferentes tamaños de pantalla (tiene unos tamaños preestablecidos, pero se pueden modificar y/o añadir nuevos). En PIX & LAB, tener esta herramienta en la barra del navegador, nos llena el corazón de regocijo.
– Tools (herramientas): Contiene enlaces a diversos validadores para comprobar que la página cumple con los estándares (dichos enlaces son configurables, es decir, si conoces un validador de CSS mejor que el de w3.org, que es el que viene por defecto, puedes sustituirlo). En la versión de Firefox se añaden un inspector de DOM (requiere de una extensión extra) y una consola de errores.
– View Source (ver fuente): Nos permite ver el código de la página en la que nos encontremos o enviarlo a la aplicación que elijamos para editarlo.
– Options (opciones): En esta pestaña se nos permite configurar las herramientas de Web Developer que son modificables y elegir algunas opciones del comportamiento de la extensión en el navegador (solamente en Firefox).
En resumen, Web Developer nos parece un completísimo conjunto de herramientas. Algunas de ellas son de uso marginal o nulo, pero la mayoría son tremendamente útiles y, en su conjunto, permiten aumentar la productividad del desarrollador web de una forma considerable. Además, su distribución es intuitiva y permite la configuración de atajos de teclado, por lo que la curva de aprendizaje y la velocidad de ejecución son significativamente reducidos. Si en PIX & LAB tuviésemos un sistema de estrellas o una escala numérica a la hora de criticar herramientas y utilidades, esta extensión, sin duda, recibiría la máxima puntuación.