Nuevo en Firefox 58: Developer Edition

15 enero, 2018 1:35 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado.

Firefox Quantum ha vuelvo a hacer rápido a Firefox, pero la velocidad es solo una parte de la historia. Se ha trabajado muchísimo para que Firefox sea una herramienta excepcional para crear en la Web. Sumérgete en los cambios que vienen en Firefox 58, actualmente disponibles para una vista previa en Firefox Developer Edition.

Más control para los autores de CSS

Tras el éxito del poderoso CSS Grid Inspector de Firefox, nos complace presentar Shape Path Editor para los elementos con la propiedad clip-path.

Pruébalo tú mismo con este CodePen de Chris Coyier.

También implementamos la propiedad CSS font-display, permitiendo a los autores especificar cuanto tiempo debe esperar el navegador para obtener una fuente, y cuando debería considerar el intercambio de una fuente una vez esté cargada.

Firefox Quantum también introdujo un nuevo motor de CSS (“Quantum CSS”) que solucionó numerosos errores e inconsistencias con CSS en Firefox. Por ejemplo, calc() ahora funciona en todas las partes que la especificación dice que debería.

Un depurador aún mejor

Pieza a pieza, hemos estado reescribiendo nuestras herramientas de desarrollador en tecnologías Web estándar. En Developer Edition, la Consola, el Depurador, el Monitor de Red y el modo de diseño adaptable han sido implementadas en HTML plano, JavaScript y CSS sobre bibliotecas comunes como React y Redux. Esto significa que puedes utilizar tus conocimientos sobre desarrollo web para hackear en las herramientas de desarrollador. El código fuente para el debugger.html está en GitHub, y hacemos nuestro mejor esfuerzo para etiquetar bugs para principiantes y asesorar a nuevos contribuyentes.

Hemos implementado toneladas de nuevas características durante la reescritura, pero el depurador merece una mención especial. En primer lugar, los mapas de fuente (source maps) finalmente funcionan en todas partes, e incluso incluyen resaltado de sintaxis para el marcado como JSX:

JSX Webpack

También puedes observar que el depurador reconoce Webpack y lo etiqueta adecuadamente en el árbol de códigos fuente.

De forma similar, el depurador puede reconocer dos docenas de bibliotecas de JavaScript y agrupar sus stack frames en la pila de llamadas. Esto hace que sea fácil separar el código que has escrito del código proporcionado por un framework cuando estás rastreando un error:

Stacks de biblioteca, antes y ahora

Stacks de biblioteca, antes y ahora

Incluso implementamos puntos de ruptura “pegajosos” que se mueven de manera inteligente con tu código cuando lo refactorizas o reorganizas las declaraciones en un archivo.

Las otras herramientas también han mejorado: los grupos de consola ahora pueden colapsarse, el monitor de red puede pausarse, etc.

La mejor forma de descubrir las nuevas herramientas de desarrollo es descargar Developer Edition y probarlas tú mismo.

WebVR, FLAC y otras cositas

Firefox está impulsando capacidades nuevas y fundamentales de la Web. Firefox 55 introdujo el soporte para WebVR en Windows e incluyó soporte experimental en macOS. Con Firefox 58, WebVR está soportado por defecto tanto en Windows como en macOS.

Si estás interesado en crear experiencias de realidad virtual en la Web, revisa la librería A-Frame, o lee nuestro artículo en cómo Firefox Quantum ofrece un rendimiento uniforme a 90 fps en WebVR.

En otras primicias, Firefox 51 fue el primer navegador web en soportar FLAC,un formado de audio sin pérdida, en la Web. Hasta ahora, el soporte estaba limitado a Firefox en plataformas de escritorio (Windows, macOS y GNU/Linux), pero Firefox 58 añade soporte FLAC a Android. Esto significa que Firefox, Chrome y Edge soportan FLAC en todas las plataformas, a excepción de iOS.

También introdujimos algunos cambios para ayudar a medir y mejorar el rendimiento de Firefox:

  • El API PerformanceNavigationTiming proporciona acceso a las métricas de rendimiento relacionadas con la carga de la página.
  • Off Main Thread Painting (“OMTP”) se ha habilitado de forma predeterminada en Windows, lo que mejora la capacidad de respuesta de Firefox al reducir la carga de trabajo en el hilo principal.
  • Hemos habilitado limitación de temporizadores de fondo basada en presupuesto, lo cual reduce la velocidad de los scripts que están corriendo en pestañas inactivas, para economizar los recursos del CPU.

Por último, Content Security Policies (CSPs) ahora son compatibles con la directiva worker-src .

Adiciones al API de WebExtensions

Firefox Quantum eliminó el soporte para complementos legados (legacy) y agregó docenas de nuevas APIs de WebExtensions. Firefox 58 añade aún mas APIs, incluidas algunas para:

Por ejemplo, Tree Style Tab ahora puede adoptar colores del tema a partir de WebExtensions como VivaldiFox:

Tree Style Tab y VivaldifoxActualmente estamos planificando capacidades adicionales en WebExtensions para 2018, incluyendo la posibilidad para ocultar pestañas de forma individual o la barra de pestañas completa.

Terminando

Estos son solo los aspectos más destacados. Para obtener más información acerca de qué esperar en Firefox 58, actualmente disponible en Beta y Developer Edition, consulta las notas de la versión y Firefox 58 para Desarrolladores en MDN.

The following two tabs change content below.

jorgev

Add-ons Developer Relations Lead at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa