Este artículo es una traducción del original publicado en el blog de Mozilla Hacks.
Este mes se cumple el primer aniversario de la versión de Firefox para desarrolladores. Para celebrarlo, te presentamos nuevas herramientas y algunas mejoras a las existentes, que te permitirán trabajar con la Web de forma intuitiva y más visual.
A medida que la Web se vuelve mas dinámica, interactiva y enfocada a experiencias móviles, los diseñadores gráficos están experimentando con animaciones como nunca, y la última versión de Firefox Developer Edition posee una serie de utilidades para trabajar con animaciones de una forma mas rápida y fácil. Firefox Developer Edition ahora da a los diseñadores y animadores, un conjunto de herramientas de edición visual que trabajan como ellos lo esperan. Aunque fue un proceso difícil y se abordaron aspectos desafiantes de la animación, se consiguió crear herramientas poderosas, interactivas y cómodas para ser usadas por los diseñadores, pues éstas deben ser atractivas para ellos y no sólo para programadores.
DevTools Challenger
Leer sobre nuestras nuevas herramientas está bien, ¡pero probarlas es inclusive mejor! Para ayudarte a comenzar, nos asociamos con la aclamada ingeniera de animación web y promotora Rachel Nabors, para crear DevTools Challenger. Chequea el sitio web para ejercicios prácticos sobre todas nuestras nuevas herramientas de diseño visual. ¡Recuerda seguir desplazándote en la página hasta que llegues al suelo oceánico!
Herramientas de animación y filtros CSS
El panel de animación del Inspector de Página facilita depurar, pausar y visualizar cada animación en una página web. Gracias a su fuerte integración con el inspector DOM, puedes intercambiar entre una vista global de cada animación y profundizar niveles para ver unos pocos nodos.
Una vez encontrada la animación deseada, nuestro editor de cúbicas de Bezier (cubic-bezier) se encuentra a un clic de distancia, el cual cuenta con un conjunto de valores predeterminados que permiten asegurar que tu animación se reproducirá fluidamente.
También hemos construido un editor de filtros CSS, permitiéndote visualmente añadir, remover, re-ordenar y ajustar visualmente filtros en tiempo real, y a su vez, observar los cambios aplicados sin recargar el sitio.
Colores & Mediciones
Firefox Developer Edition también ofrece dos nuevas herramientas para el ajuste fino del diseño: ahora puedes activar reglas de pixel a lo largo de los márgenes de las páginas, o usar nuestra herramienta de medición para arrastrar y medir regiones arbitrarias de la página.
Ahora el inspector por defecto muestra los colores CSS como “se definieron”, pero al hacer clic con la tecla shift presionada en un color, se intercambia entre estilos definidos y valores equivalentes en hexadecimales, rgb, y hsl. Inclusive, existe una herramienta de selección de color para obtener los colores directamente desde la página.
Instantáneas de Memoria
La nueva Herramienta de Memoria ayuda a los ingenieros de front-end a entender mejor y optimizar la forma en que las páginas son asignadas y retenidas en memoria. La utilidad trabaja tomando un instantánea de la pila, luego ésta te permite analizar la memoria retenida por cada tipo de objeto, pila de asignación o representación interna. ¡Creemos que te gustará y ya tenemos planificado muchas funcionalidades y mejoras en camino!
API de depuración de WebSocket
Por último, estamos extremadamente felices de anunciar que ahora Firefox posee un API para monitoreo de paquetes WebSocket (Bug 1203802), el cual es el primer paso para el desarrollo de una herramienta de inspección de WebSockets. El ingeniero de Developer Tools Jan Odvarko ha construido un complemento experimental para inspeccionar tráfico de WebSocket. Instala el complemento y dale una probada, nos gustaría recibir tus opiniones.
Firefox Developer Edition está disponible en firefox.com/developer. Permítenos conocer tu opinión sobre estas funcionalidades dejando un comentario o siguiendo la cuenta @FirefoxDevTools en Twitter. Y recuerda compartir este conocimiento a los demás.
Latest posts by Miguel Useche (see all)
Artículos relacionados
Firefox edición para desarrolladores 45 – Animaciones, Herramientas de memoria y más
Firefox edición para desarrolladores 46: mejores herramientas de memoria, barra lateral de @media y más
Edición para desarrolladores 50: consola, herramienta de memoria, monitor de red y más
Soporte para WebM/VP9, más seguridad y nuevas herramientas para desarrolladores en el nuevo Firefox
Start the discussion at foro.mozilla-hispano.org