Web Developer, extensión para Firefox

  • Por
Hablamos sobre una popular extensión para Firefox, que contiene numerosas herramientas y ayudas para desarrolladores del web.
Las extensiones de Firefox son añadidos que se pueden instalar opcionalmente para dotar de nuevas funcionalidades y herramientas al programa. En este caso vamos a mostrar una extensión muy interesante para desarrolladores: Web Developer.

Lo bueno de esta extensión es que incluye muchas de las herramientas más útiles a la hora de desarrollar una página, todas instaladas de un golpe y accesibles a través de una barra de navegación, de esas que aparecen en la parte de arriba del navegador, debajo de la botonera.

Nota:Se ha comentado lo con detalle lo que son las extensiones de Firefox y se han dado ejemplos de las más comunes para desarrolladores. Todo ello en el artículo Extensiones de Firefox útiles para desarrolladores del web.

Extensión Web Developer

Para obtener Web Developer, la barra de herramientas para desarrolladores, tienes que acceder con tu Firefox a la siguiente dirección: https://addons.mozilla.org/es-ES/firefox/addon/60/.

Como decíamos, esta extensión crea una nueva barra de navegación, que se sitúa en la parte de arriba de la ventana de Firefox. Esta barra de navegación contiene una serie de funciones ordenadas en varios botones. Veremos las más interesantes:


Disable: Sirve para deshabilitar diversos componentes o partes del navegador. Por ejemplo, para deshabilitar la caché, Javascript, el bloqueador de popups, los colores de la página…

Cookies: nos permite hacer cosas con las cookies, como no permitirlas o encontrar información completa de las cookies que nos envían en cada página.

CSS: para realizar diversas acciones sobre las hojas de estilo. Nos permite no aplicarlas a la página, ver algunos estilos y otros no… incluso tiene una opción para editar las hojas de estilo en el propio Firefox y así ver cómo, alterando el código CSS de la página, se cambia el aspecto de la web.

Forms: nos permite realizar diversas acciones sobre formularios, como reasaltar y obtener información de todos sus campos. Pero también nos permite hacer cosas más peregrinas, como cambiar un campo select por un campo de texto, completar con textos todos los campos del formulario o quitar los maxlength de los campos.

Images: dispone de diversas opciones para alterar la presencia de las imágenes. Puedes permitirlas o deshabilitarlas, incluso deshabilitar sólo las imágenes que son externas al sitio web. Mostrar información de las imágenes, como sus rutas, tamaño en bytes, dimesiones en píxeles, etc.

Information: nos permite obtener más información de un montón de elementos de la página. Permite ver información sobre las anclas, el tamaño del documento, la profundidad de las tablas, el Javascript que se está ejecutando, información de los enlaces, etc. Hay tantas cosas que algunas son difíciles de entender qué es lo que muestran.

Miscellaneous: son varias opciones de distinta índole, como mostrar comentarios, unas guías para saber la localización de puntos en la página, editar el código HTML para ver qué ocurre directamente al cambiar el código de cualquier página sin tener que subirla al servidor, una visualización de la página en dispositivos con pantallas pequeñas.... Estas son opciones desconectadas entre si, pero algunas bastante útiles.

Outline: que sirve para destacar elementos de la página, como los enlaces, frames, tablas, celdas, elementos obsoletos que se puedan estar utilizando en el código, etc.

Resize: es una interesante utilidad para redimensionar la ventana del navegador, para observar el aspecto que tiene la web si se redimensiona la ventana a otros tamaños o definiciones de pantalla.

Tools: contiene unas herramientas muy útiles, como verificador de links, validadores del código, acceso a la consola de Java o Javascript, etc.

View Source: como su nombre indica, nos sirve para ver el código fuente.

Por último, también se dispone de un botón para acceder a diversas opciones para configurar el comportamiento del navegador o de esta extensión para desarrolladores.

Conclusión sobre WebDeveloper Toolbar

Se trata de una extensión que aconsejamos instalar a todos los desarrolladores, ya que concentra en un espacio mínimo todas las funcionalidades y herramientas que pueden hacernos la vida más sencilla.

Un gran trabajo, que confirma a Firefox como un navegador extremadamente útil para las personas que desarrollamos páginas web.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

mimosin

17/10/2008
Web Developper me parece una herramienta muy útil para el desarrollo, tiene una infinidad de aplicaciones. Pero todavía seria más util si las opciones estuvieran en una barra lateral y a un solo clic de distancia, sobre todo las de cambio de elementos visuales. Ahora con las opciones tipo menu a veces es un engorro seleccionar/quitar elementos. Hay hotkeys, pero vamos tampoco es cuestión de teer que aprenderse 50 hotkeys.