Usando Firefox Developer Edition para desarrollo web

Lo que vas a crear

Firefox Developer Edition fue lanzado por Mozilla durante la celebración del décimo aniversario de Firefox el año pasado. Recientemente, las versiones de 64 bits de Firefox Developer Edition también están disponibles para Windows, Linux y Mac OS X. Firefox Developer Edition ofrece fácil acceso para una amplia gama de herramientas para desarrolladores que ayudan a facilitar la depuración y ayudan a ser más rápidos y profesionales. desarrollo. Puede descargar la última versión de Firefox Developer Edition desde aquí. Echemos un vistazo a algunas de las excelentes características de Firefox Developer Edition..

WebIDE

Con WebIDE, puede crear, editar, probar o depurar aplicaciones web ejecutándolas en el simulador de Firefox OS. Si está creando una nueva aplicación web, también crea una placa de preparación básica de la aplicación o una placa de caldera más completa para usted junto con una estructura de directorio adecuada. WebIDE también le permite conectar Firefox Devtools a muchos otros navegadores web como Safari (iOS), Firefox (Android) y Chrome (Android).

Vista de diseño responsivo

La Vista de diseño responsivo en Firefox se puede invocar presionando Ctrl + Shift + M. Puede verificar la capacidad de respuesta de su aplicación web con la ayuda de esta utilidad. Ofrece una serie de opciones, como configurar el tamaño del dispositivo que desea emular, rotar la pantalla (pasar del modo vertical al horizontal), simular eventos táctiles y tomar capturas de pantalla de la página web en el modo de respuesta.

Herramienta cuentagotas

La herramienta Eyedropper es una herramienta realmente impresionante que te ayuda a conocer el valor hexadecimal de cualquier color en una página web (al igual que la herramienta eyedropper en Photoshop). Esto ayuda a encontrar el color de cualquier elemento o imagen que tenga que navegar a través de su código a través de Element Inspector. Al hacer clic en el color se copia su valor en su portapapeles.!

Inspector de navegador

Todos hemos trabajado con el inspector de elementos, ¿ahora qué diablos es el inspector de navegador? Bueno, Browser Inspector se usa para depurar el navegador Firefox. Si desea cambiar el color de la barra de URL o, por ejemplo, cambiar la curva de las pestañas con resultados no persistentes, puede hacerlo a través del Inspector del navegador. Aunque se puede lograr el mismo resultado a través de Scratchpad, Browser Inspector es excelente si no eres un desarrollador de Firefox o si solo quieres probar tus cambios.!

Vista 3D

Ahora esto, creo que es la característica más impresionante de las herramientas para desarrolladores de Firefox. Puede ver la representación 3D de cualquier sitio web, donde cada bloque de elevación representa un elemento, en orden de su anidación en el código del sitio web. Esto le ayuda a saber qué elementos están anidados en qué elemento. Puede acceder a la Vista 3D presionando Ctrl + Mayús + C y luego seleccionando el icono con forma de cuadro en el lado derecho del panel recién abierto.

Bloc de notas

Puede abrir el Bloc de notas presionando Mayús + F4. Scratchpad se puede utilizar para ejecutar grupos de código javascript y editar, ejecutar y examinar los resultados. La forma en que se diferencia de la Consola del navegador es que la Consola del navegador está diseñada para interpretar una sola línea de código a la vez, pero con Scratchpad puede trabajar con trozos más grandes de código ejecutándolos de varias maneras, dependiendo de cómo quiera usar el salida.

Conclusión

Firefox Developer Edition proporciona una amplia gama de herramientas para crear, depurar, monitorear el rendimiento, depurar el navegador y extender los DevTools. Explicar todas las herramientas está fuera del alcance de este artículo. Sin embargo, puede ver la lista completa de herramientas aquí. Esperamos que la introducción a las herramientas mencionadas anteriormente le ayude en sus tareas diarias de desarrollo web..