La barra de herramientas Web Developer para Firefox
29 de octubre 2008 por Carma Leichty · 7 Comentarios
La barra de herramientas Web Developer para Firefox es a menudo considerado como uno de los must-have de 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 hora. Se hace lo que puede ser una tarea tediosa, casi divertido. Me permite rápidamente vistazo a un sitio web en una ventana de tamaño diferente. Me ayuda a depurar y validar código JavaScript y CSS.
Chris Pederick desarrollado esta barra de herramientas para Firefox. Esto es lo que la barra de herramientas se ve así:
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. A pesar de que no ha utilizado todas las opciones que ofrece la barra de herramientas, permítanme enumerar algunos de mis favoritos.
En tiempo real depuración de CSS. Al tiempo que visualiza mi página web, que puede actualizar el archivo CSS que se muestra a la izquierda (o inferior) de la página web (la barra de herramientas, seleccione CSS / Editar CSS) y ver resultados inmediatos en la ventana del navegador. Esto es muy bueno para resolver problemas y para bajar a lo esencial y básico de cómo los extra de 10 píxeles de relleno afecta a mi página web. Aunque no de inmediato puede salvar mis actualizaciones CSS, 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 los botones rojo / verde para indicar la validez del código CSS y código Javascript. Si el botón es de color rojo, que simplemente ponga el cursor sobre el botón y de inmediato me dice que el error se está encontrando. Puedo hacer clic en la consola de errores para obtener más detalles, vaya de nuevo al código (CSS o Javascript), realizar 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 usualmente se resuelve rápidamente.
Redimensionar la ventana. Desde que desea que las páginas web para verse bien en diferentes resoluciones de pantalla, quiero comprobar cómo las páginas se verá en las ventanas de distinto tamaño. Con la barra de herramientas del desarrollador, se trata de un clic del botón. Simplemente seleccione un tamaño de ventana diferente de la opción Cambiar el tamaño y ver inmediatamente el sitio en un tamaño de ventana diferente.
Versión para pantalla pequeña. También puede ver lo que mi página web se ve como en un dispositivo móvil con un solo clic de un botón. La opción de pantalla pequeña representación está disponible en el menú Varios.
Se integra con Joomla. Este favorito es en realidad el mismo que el primero de la lista anterior, pero dentro de un entorno específico. La barra de herramientas Web Developer es muy valiosa en el entorno de Joomla. Sin la barra de herramientas, siempre estoy entrando en Joomla, navegando a Extensiones / Gestor de plantillas, elegir la plantilla adecuada, haciendo lo que creo que son los cambios necesarios, guardarlo, y luego volver a una ventana del navegador y comprobar los resultados. ¡Menos mal! Con la barra de herramientas de desarrollo, que sólo tiene que seleccionar 'Editar CSS "en el menú CSS, hacer los cambios necesarios, y ver los resultados. Puedo seguir modificando el CSS hasta que esté bien. No hay vuelta atrás y adelante 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 de lo que esta barra de herramientas se puede hacer para que los desarrolladores web. Es fácil de instalar y fácil de usar. Me recomienda que lo que una parte de su entorno de desarrollo. Está disponible en en https://addons.mozilla.org/en-US/firefox/addon/60.
Lo que hace que la barra de herramientas Web Developer es tan especial para Joomla? Get real, es una valiosa herramienta para el desarrollo web o un marco _any_ CMS / aplicación, puede ser Joomla, Drupal, Typo3, Zikula u otros.
Firebug ha dejado la barra de herramientas Web Dev en el polvo ... aunque el validador y las funciones de cambiar el tamaño de las ventanas son útiles, sobre todo en mis 26 "de pantalla
uf .. este uno de los buenos, añade el
puede ser voy a tratar este
Gracias por el recordatorio acerca de esto! Yo tenía instalado, pero lo perdió en algún lugar a lo largo de la distancia. Es muy bueno para la disección de temas de WordPress, también.
Gracias por esto, cualquier información necesaria para tomar mis sitios más accesibles y de fácil lectura para todos tiene que ser bueno.
la aprobación de su último comentario "Se integra con Joomla" acaba de destruir este artículo (que hasta entonces era fantástico). La barra de herramientas no se integra con Joomla.
Aquí está un truco mejor para guardar los css para joomla o cualquier otro CMS que almacena sus archivos como archivos css (no en el PP).
Cargar el sitio de desarrollo en el ordenador (localhost) utilizando LAMP o WAMP * * obturador. Y guarde el archivo en el directorio actual de trabajo css, esto le permitirá hacer múltiples ahorra con el clic de un botón (no copiar, pegar, a continuación, cambiar ventanas, etc).
Comprobación de los cambios en svn luego actualizarlos en la próxima versión.
Sí, lo sé realmente de acuerdo con estos artículos ... esta barra de herramientas de Firefox realmente rocas ... que hace que nuestro trabajo como desarrolladores web fácil ... pero yo estaba un poco adobe .. cuando hay liberación de Firefox versión 3 y que el tiempo todavía donw han actualizado firebug .. pero ahora que ya tienen ... eso está bien ...