Web Developer: una herramienta indispensable para el desarrollo web

Web Developer: una herramienta indispensable para el desarrollo web

Si eres diseñador, maquetador o programador web seguramente ya conocerás Web Developer, pero seguro que hay alguno por ahí que aún no conozca esta herramienta. Aunque me gusta más Chrome que Firefox, siempre he usado esta barra en Firefox, pero también existe la versión de Chrome.

Si aún no la tienes, descárgala en la página del autor. No te preocupes si la página está en inglés, la herramienta se instalará en español!

Barra Web Developer

Hemos preparado unas capturas para que te hagas una idea de la infinidad de cosas que puedes hacer con esta herramienta. Una vez que la instales, verás una nueva barra en tu navegador (Firefox o Chrome):

Vamos a ver cada opción de la barra Web Developer de forma resumida:

Desactivar. No creo que haga falta explicar nada. Un menú para desactivar elementos en la web que estés viendo.

Cookies. Muy útil cuando estás tocando código javascript y necesitas borrar cookies sólo de ese dominio para refrescar la página.

CSS. Si estás maquetando una web, puedes editar directamente el CSS para probar a tiempo real, desactivar estilos…

Formularios. Aquí, por ejemplo si necesitas ver los datos del formulario, ids, names, labels… haz clic en “Ver información de los formularios” y verás todos los datos en una tabla. 

Imágenes. A través de esta opción, puedes dejar la web sin imágenes desactivándolas, mostrar los “alt” para ver si has olvidado poner alguno, ver los tamaños de las imágenes, las rutas, ver si hay alguna imagen que no se esté cargando, diferenciar las imágenes con background de las img

Información. En este menú se proporciona bastante información, cada opción indica exactamente lo que quieras mostrar…

Varios. Podemos limpiar la caché sin tenter que entrar en las preferencias del navegador, mostrar elementos que ayudan a la maquinación…

Resaltar. Como su propio nombre indica, sirve para resaltar ciertos elementos.

Tamaño. Esta opción es muy útil, si necesitas ver la web en diferentes resoluciones, incluso puedes personalizar los tamaños…

Herramientas. Valida tu CSS, HTML, según la norma WAI… Se usa la validación de w3.org pero si quieres usar otra, sólo tienes que poner el enlace en Editar Herramientas…

Código fuente. A veces nuestra web genera código que no se ve directamente en el código fuente, para verlo, puedes usar la opción Ver código generado.

Opciones. Si has marcado algunas de las opciones y quieres restablecer la página, haz clic en Restablecer página y volverá al estado inicial.

Esto sólo ha sido una introducción sobre esta herramienta, si necesitas más información, puedes visitar la web del autor de la extensión: www.chrispederick.com

También te puede interesar...

4 comentarios
  • enrique Publicado el 03/07/2012 a las 21:39 Responder

    muy interesante pero como puedo obtenerla en espanol para sacarle maximo partido

    • aquihaydominios Publicado el 03/07/2012 a las 22:31 Responder

      Hola Enrique, aunque la web para descargar la herramienta esté en inglés, como ves en las capturas, la barra está en español. Ya nos contarás cuando la pruebes!

  • android Publicado el 05/11/2012 a las 01:04 Responder

    revisión 1.2.2 se instala en ingles 🙁

    • unpapelito Publicado el 07/11/2012 a las 10:51 Responder

      Efectivamente, acabamos de comprobarlo! En la última actualización (17 de septiembre de 2012) ya no aparece en inglés. Suponemos que en un futuro se podrá de nuevo, ya que como ves en nuestras capturas antes estaba en español! Si averiguamos algo nuevo lo publicaremos! Gracias por comentarlo 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *