Edición para Desarrolladores 44: Nuevo editor visual y herramientas para el manejo de memoria

17 noviembre, 2015 2:01 por

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!

DevTools challenger

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.

Animation toolsUna 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.

Editor de cubos de Bezier

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.

Editor de filtros CSS

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.

Herramientas de medición de FirefoxAhora 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!

Screenshot of the DevTools memory panel

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.

websocket-demo-500x202

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.

The following two tabs change content below.
Colaborador de Mozilla Venezuela e Hispano en las áreas de desarrollo y medios sociales, entre otros. También soy desarrollador Web, Skateboarder, Profesor universitario, jugador de Playstation y PC, usuario Linux, Blogger, Geek, entre otros.

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