Web Developer: una herramienta indispensable para el desarrollo web

30 Abr 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!

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