La barra de herramientas Web Developer para Firefox

La barra de herramientas Web Developer para Firefox es a menudo considerado como uno de los must-have herramientas para desarrolladores web. Después de haber utilizado la barra de herramientas dentro de mi entorno de diseño, me acuerdo de todo corazón. Se recorta el tiempo de desarrollo por horas. Se hace lo que puede ser una tarea tediosa, casi divertido. Me permite rápidamente vistazo a una página web en una ventana de tamaño diferente. Me ayuda a depurar y validar el código JavaScript y CSS.

Chris Pederick desarrollado esta barra de herramientas para Firefox. Esto es lo que parece a la barra de herramientas:

Nota: Es una barra en la parte superior de la ventana del navegador. Se muestra como dos imágenes de arriba para que pueda ver toda la barra.

Como puede ver, viene con muchas opciones. Aunque no he utilizado todas las opciones que ofrece la barra de herramientas, permítanme mencionar algunos de mis favoritos.

CSS depuración en tiempo real. Mientras se visualiza mi página web, puedo actualizar el archivo CSS que aparece a la izquierda (o inferior) de la página web (la barra de herramientas, elija CSS / Edit CSS) y ver resultados inmediatos en la ventana del navegador. Esto es excelente para la solución de problemas y para llegar hasta el meollo de la cuestión de cómo esos extra 10 píxeles de relleno afecta a mi página web. Aunque no de inmediato puede salvar mis actualizaciones por CSS, que puede copiar fácilmente los cambios que ya sé de trabajo y las pega en la hoja de estilo CSS abierto en mi editor web.

Validadores. La parte superior derecha de la barra de herramientas muestra rojo / botones de color verde para indicar la validez del código CSS y JavaScript. Si el botón es de color rojo, simplemente el ratón sobre el botón y de inmediato me dice que el error es encontrar. Me puede hacer clic en la consola de error para obtener más detalles, vaya al código (CSS o JavaScript), realice el cambio, actualice la ventana del navegador y ver el botón (s), es de esperar, se vuelven verdes. La facilidad de depuración de código es increíble - y generalmente se resuelve rápidamente.

Cambiar el tamaño de la ventana. Dado que desea que las páginas web para lucir bien en diferentes resoluciones de pantalla, quiero comprobar cómo las páginas se verá en las ventanas de diferentes tamaños. Con la barra de herramientas para desarrolladores, se trata de un clic del botón. Simplemente seleccione un tamaño de ventana diferente a la opción de cambiar el tamaño e inmediatamente ver el sitio en una ventana de tamaño diferente.

Small Screen Rendering. También puedo ver lo que se parece a mi página web en un dispositivo móvil con un solo clic de un botón. La pequeña representación en pantalla de opciones está disponible en el menú Varios.

Se integra con Joomla. Esta favorito es en realidad la misma que la primera de la lista anterior, pero dentro de un entorno específico. La barra de herramientas para desarrolladores Web tiene un valor incalculable en el entorno de Joomla. Sin la barra de herramientas, siempre me va a Joomla, navegando a Extensiones / Administrador de plantillas, elegir la plantilla adecuada, haciendo lo que creo que son los cambios necesarios, el ahorro, y luego volver a una ventana del navegador y comprobar los resultados. ¡Uf! Con la barra de herramientas para desarrolladores, simplemente seleccione 'Editar CSS' en el menú CSS, haga los cambios necesarios, y ver los resultados. Puedo continuar ajustando la CSS hasta que esté bien. No ir y venir entre las ventanas y aplicaciones. Una vez que la CSS es correcto, simplemente poner de relieve los cambios, copiar el código y pegarlo en la plantilla de CSS dentro de Joomla. Es más rápido. Es más fácil. Es muy sencillo.

Esta es sólo la punta del iceberg en lo que puede hacer esta barra de herramientas para desarrolladores web. Es fácil de instalar y fácil de usar. Me recomienda que forme parte de su entorno de desarrollo. Está disponible en en https: / / addons.mozilla.org/en-US/firefox/addon/60.