Firefox Developer Edition: el navegador para desarrolladores

Hoy en día, todos los navegadores proporcionan herramientas de desarrollo que le permiten probar a fondo sus proyectos web en cuanto a diseño y funcionalidad. Por defecto, la depuración de JavaScript y la inspección del código fuente se encuentran entre estas características. Firefox Developer Edition es un navegador desarrollado por Mozilla y está dedicado exclusivamente a desarrolladores web, brindando herramientas aún más útiles que ayudan a optimizar un sitio web. Sus características incluyen la prueba de animaciones y transiciones CSS3.

Diseño delgado, acceso rápido a las herramientas de desarrollo

Edición para desarrolladores de Firefox se basa en la rama Aurora del popular navegador. Las nuevas funciones que no están disponibles en Firefox estándar ya están implementadas aquí y se pueden probar con anticipación. Lo que más llama la atención a primera vista es el diseño delgado de la interfaz de usuario. La pestaña y la barra de direcciones ocupan menos espacio en comparación con Firefox estándar. El navegador también viene envuelto en un tema oscuro por defecto. Si prefiere colores más brillantes, puede cambiar rápidamente el esquema de colores a los que conoce de Firefox estándar.

Interfaz de Firefox Developer Edition

Dado que Firefox Developer Edition está dirigido a los desarrolladores, encontrar las diferentes herramientas especializadas es más accesible y se presenta de manera significativamente más destacada. En la barra de direcciones, encontrará una opción de menú que le otorga acceso a todas las herramientas de desarrollo.

Las herramientas para desarrolladores ahora admiten animaciones

CSS3 ha convertido las animaciones en un aspecto importante del desarrollo web contemporáneo. Ahora, el nuevo inspector de herramientas para desarrolladores también las admite. Se ha introducido un índice que visualiza animaciones en una línea de tiempo. Los elementos animados individuales se mostrarán como capas una debajo de la otra. Ya conoce presentaciones similares del software de edición y animación de video.

Herramienta de animación con línea de tiempo y capas

Los atributos CSS modificados por la animación se enumeran para cada elemento. A través de fotogramas clave, los lugares donde ocurren los cambios se muestran en la línea de tiempo.

Los botones le permiten reproducir y rebobinar una animación. Particularmente para animaciones rápidas, puede ser importante poder verificar si cada pequeño detalle es correcto. Aquí, tiene la opción de reproducir su animación a velocidad reducida, es decir, la mitad de rápido, una cuarta parte o incluso una décima parte de la velocidad original. Puede ser útil reproducir animaciones muy lentas más rápido de lo habitual. Esto también es posible, hasta diez veces más rápido.

Prueba y ajuste de los efectos de relajación

Los efectos de aceleración de CSS3 le permiten reproducir animaciones con aceleraciones y desaceleraciones específicamente definidas, en lugar de una velocidad de animación lineal. Dentro del nuevo inspector, también tiene la opción de modificar directamente el efecto de suavizado de una animación o transición.

Simplemente elija un efecto de relajación

Justo al lado del valor de aceleración, se muestra un pequeño icono que le permite cambiar el efecto de aceleración. Recibirá una descripción general de todas las aceleraciones disponibles, incluido un diagrama que describe la curva de animación. Además, una pequeña animación de ejemplo le muestra la aceleración en acción. Aparte de los efectos comunes „ease“, „ease-in“ y „ease-out“, hay algunos procesos individuales que están definidos por curvas Bézier separadas. Puede editar la curva Bézier usted mismo utilizando el controlador del diagrama. De esta manera, crea su aceleración personalizada que está marcada en el texto fuente de CSS a través de «cubic-bezier ()».

Con esta nueva función, puede probar rápidamente nuevas aceleraciones para animaciones y transiciones sin tener que salir del navegador.

Aplicar y probar filtros CSS3

Similar a la aplicación de efectos de aceleración, puede cambiar el filtro CSS3 de un elemento o agregar otros nuevos. Cuando se aplica un filtro a un elemento, el inspector muestra un pequeño icono junto a él. Usando este ícono, puede cambiar el filtro o agregar otro.

Cambiar y agregar filtros

Todos los filtros aplicados se muestran como una lista de sus valores definidos. Puede editar valores, eliminar filtros o agregar nuevos de una lista de posibles filtros.

Dado que es necesario probar especialmente los efectos y filtros de aceleración en el navegador debido a la gran cantidad de posibilidades diferentes, Firefox proporciona una forma muy agradable de mostrar las reglas CSS para estos efectos directamente en el navegador. Especialmente los desarrolladores que escriben manualmente el código fuente HTML y CSS podrán ahorrar mucho trabajo con esta característica.

Elegir colores usando una pipeta

La edición de los valores de color se realiza en una interfaz individual que le permite elegir un nuevo color directamente desde una paleta de colores. Si desea seleccionar otro color del documento, simplemente use la pipeta. El color elegido de esa manera se asignará al atributo CSS como un nuevo valor.

Elección de colores de una paleta o a través de una pipeta

Puede agregar rápidamente un canal alfa a un color de cobertura usando un control deslizante. Esto convierte automáticamente una información „rgb()“ en una información „rgba()“ con el valor alfa respectivo.

Edición de reglas CSS y HTML dentro del navegador

Lo mismo que funciona para animaciones, filtros y colores también funciona para todas las demás reglas CSS de un sitio web. Puede acceder y modificar todas las reglas CSS directamente en el navegador. Si bien existen interfaces visuales particulares disponibles para animaciones, transiciones, filtros y colores, la única opción para todas las demás reglas es modificarlas directamente en el inspector a través de la entrada de teclas.

Para hacerlo, elija una regla y sobrescríbala con nuevos valores. También puede desactivar fácilmente cualquier regla eliminando la marca de verificación que se encuentra delante de ella.

El texto fuente HTML también se puede editar directamente en el navegador. Aquí, es posible modificar atributos individuales o elementos completos a la vez. Por supuesto, todos los cambios realizados solo están disponibles durante una sesión. Al recargar una página, desaparecen.

Guardar volcado de almacenamiento

Si bien las herramientas nombradas hasta este punto también están disponibles en Firefox normal, hay algunas cosas que solo proporciona Developer Edition a partir de ahora. Uno de ellos es una nueva herramienta de ahorro que primero debe activarse en la configuración. Posteriormente, el navegador puede crear un volcado de almacenamiento de cualquier sitio web.

Visualización del volcado de almacenamiento

Después de crear el volcado, se mostrará una lista que le muestra cuánto almacenamiento ocupa cada parte del sitio. De esta manera, puede reconocer qué objeto necesita cuánto almacenamiento. A partir de Firefox 44, esta herramienta de almacenamiento también estará disponible allí.

Pistas de medición

Otra característica nueva solo disponible en Developer Edition es la medición de pistas en el navegador. Esta función también debe activarse en la configuración. Posteriormente, la herramienta de medición está disponible como un icono en la barra de menú de las herramientas de desarrollo.

Medición en el navegador

Una vez seleccionado, puede usar la herramienta de medición para dibujar cualquier rectángulo deseado en la ventana del navegador. Posteriormente, se mostrarán el ancho, el alto y la diagonal. Las guías también ayudan a comparar la posición del rectángulo con otros elementos en la línea horizontal y vertical.

Probando otros navegadores con Valence

Si desea que un sitio web funcione correctamente en tantos navegadores como sea posible, también debe probarlos allí. Valence le permite probar sitios web en otros navegadores y en dispositivos móviles. Mientras accede a un sitio web en Mobile Firefox en su dispositivo Android, puede probarlo simultáneamente en Firefox Developer Edition.

Las pruebas en dispositivos móviles son un desafío particular, ya que no hay herramientas de desarrollo en estos dispositivos y sus navegadores móviles. Valence se ejecuta en WebIDE, que está disponible en Developer Edition. WebIDE es, entre otras cosas, un área de desarrollo para aplicaciones de Firefox OS.

Uso de WebIDE para verificar sitios web que están cargados en otros navegadores

Pero no estás restringido a Firefox en dispositivos móviles. Chrome y Safari también son compatibles. En dispositivos Android, por ejemplo, la depuración de USB debe estar activada para asegurarse de que el navegador se muestre en WebIDE. Posteriormente, WebIDE transfiere los sitios web cargados en el dispositivo móvil a Firefox Developer Edition, donde se lleva a cabo la prueba real. Allí, tiene acceso al inspector, la consola y el depurador.

DevTools Challenger para probar nuevas posibilidades

El Retador de herramientas de desarrollo es un sitio web de Mozilla, que puede utilizar para probar las nuevas posibilidades de las herramientas de desarrollo. El sitio web tiene un diseño atractivo y le brinda una descripción general de las nuevas funciones en párrafos breves. Los videos cortos explican cómo acceder y usar cada herramienta.

Sitio web: DevTools Challenger

De esta manera, puede aprender de forma divertida cómo controlar animaciones, cambiar y agregar filtros, así como sobrescribir cualquier regla CSS con nuevos valores.

Conclusión

Las nuevas herramientas para desarrolladores de Firefox Developer Edition simplifican el trabajo de los desarrolladores web. Especialmente cuando se trata de probar animaciones y efectos complejos, ahorra tiempo, porque no necesita cambiar entre el navegador y el editor HTML, ya que puede verificar y editar todo en el navegador.

Además, el Edición para desarrolladores proporciona muchas funciones que aún no están incluidas en el Firefox «normal». Esto te da una idea de lo que será posible con Firefox en el futuro. Como es habitual en Mozilla, Firefox Developer Edition es de uso totalmente gratuito.

(dpe)