Categorías: Labs

Revisión de las herramientas de desarrollo de Firefox

Esta es una traducción del artículo original publicado en Smashing Magazine. Traducción por Patricia Argüello.

Si realizas cualquier clase de desarrollo en la web, entonces sabrás qué tan importantes son las herramientas de desarrollo, y te gustará encontrar herramientas que hacen tu vida más fácil. Desarrollar y probar nuevas características en un navegador, sin embargo, lleva su tiempo. Desde que una herramienta útil aparece por primera vez en un build nocturno experimental y está disponible para todo el mundo para su uso en Firefox, pasa una etapa de tiempo.

Esa es una de las razones por las que Mozilla lanzó Firefox Developer Edition en Noviembre de 2014 como el navegador Firefox recomendado para los desarrolladores. Esta versión obtiene las nuevas actualizaciones más rápidamente así que puedes usar las últimas herramientas.

Por supuesto, probar nuestros sitios web en la edición estándar de Firefox es todavía fundamental. Afortunadamente, Developer Edition hace esto más fácil permitiendo ejecutar ambos programas juntos. Además, Developer Edition viene con un team elegante que se adapta a las herramientas.

Un poco de historia

¿Cuánto tiempo atrás nos remontaremos? Allá en 2001, un depurador llamado “Venkman” estaba disponible para la version 7 de Netscape Navigator. La compañía Netscape tenía un sistema para UIs llamado Lenguaje de Interfaz de Usuario XML (XUL). También había entusiasmo por la película “Cazafantasmas” y su personaje demoníaco Zuul; así que, Rob Ginder, quien creó aquel inicial depurador, tenía cuatro opciones para llamar a su nuevo depurador, y Venkman venció a Stantz, Spengler y Zeddemore.

Venkman

Venkman, el depurador JavaScript.

Venkman era solo un depurador JavaScript. No podía examinar el DOM o mostrar el tráfico de red. Netscape tenía una consola integrada, pero hasta ahí llegaban las herramientas de depuración.

La siguiente pieza del rompecabezas fue el DOM Inspector, el cual fue lanzado sobre el 2004 o 2005. No era amigable para desarrolladores web, y trataba sobre la depuración tanto para XUL como para HTML.

DOM Inspector

Complemento DOM Inspector.

Así que, a principios de 2006 Firefox tenía tres piezas: una consola integrada, un depurador y un analizador de DOM — cada una de forma separada y no todas integradas.

A finales de 2006 Joe Hewitt, quien trabajó en el lanzamiento inicial de Firefox, publicó la versión Firebug 1.0. Firebug dio paso a permitir a los desarrolladores visualizar el DOM y proveer una consola y depurador JavaScript y analizador de DOM todo en la misma herramienta.

Firebug

Firebug, una herramienta de desarrollo todo-en-una.

Pero Firebug nunca fue un proyecto oficial de Mozilla, y con la marcha de Joe a Parakey y más tarde a Facebook, el desarrollo de Firebug fue retomado por un grupo de voluntarios liderados por John J.Barton. Mozilla contribuyó al proyecto, con el respaldo de Honza Odvarko, quien lideró el proyecto luego que John se marchó.

En 2011 Mozilla decidió que necesitaba incorporar más esfuerzo en sus herramientas de desarrollo y comenzar una nueva página en blanco construyendo algunas herramientas de la próxima generación, mientras se continuaba el soporte al mantenimiento de Firebug.

Uno de los retos con las herramientas de desarrollo es que necesitan profundizar en la plataforma para comprender cómo funciona el sistema. Necesitan ser parte del navegador y no pueden ser construidas fácilmente como complementos.

Así que, mientras Firefox se actualizaba, mantener Firebug ejecutándose como un complemento separado era cada vez más difícil. Actualizar las APIs del depurador, las cuales necesitaba Firebug para mantenerse al día, era un trabajo significativo, y cuando se anunció la iniciativa de tener separados el navegador y los procesos de contenido, Mozilla decidió reconstruir Firebug sobre las herramientas integradas.

Un conjunto sólido de funcionalidades estándar

Las herramientas de desarrollo de Firefox han recorrido un largo camino desde sus inicios, rápidamente llenando el vacío entre Firebug y otras herramientas de desarrollo de los navegadores. Ahora tienes todas las herramientas que tu esperarías de un navegador. Repasemos algunas de las principales.

El inspector de página tiene un marcador para el modelo de caja, un editor de CSS, un visor para estilos, fuentes y composición, soporte para pseudo-elementos, y una herramienta de búsqueda.

Inspector de página

Inspector de página.

La consola web enumera registros de JavaScript, CSS, de red y seguridad. Soporta edición personalizada, así como pre-visualizar y analizar los nodos DOM, objetos y arrays, permitiéndote buscar y filtrarlos.

La consola web

La consola web.

La herramienta de depuración de JavaScript te permite detener la ejecución de scripts en cualquier punto, navegar la pila de llamadas e inspeccionar variables. Soporta mapas de código fuente, visualización de fuentes minificadas, y la caja negra para ficheros de librerías. Y soporta la evaluación de scripts dinámicamente.

El depurador de JavaScript

El depurador de JavaScript.

El monitor de red lista todas las peticiones que Firefox hace para una página web. Muestra las cabeceras, respuestas y cookies, permitiéndote buscar a través de ellas. También muestra un análisis de rendimiento de la carga de la página.

Monitor de red - lista de peticiones

Monitor de red – lista de peticiones.

Monitor de red - análisis de rendimiento

Monitor de red – análisis de rendimiento.

Las herramientas de rendimiento te da una vista dentro del JavaScript de una página web y el plan de rendimiento mediante el registro de la actividad del navegador suplementario y la exposición de datos de frecuencia, uso de memoria, llamadas JavaScript y eventos de renderización en el navegador tales como estilos, layout y colores.

Herramienta de rendimiento - cascada

El gráfico en cascada de la herramienta de rendimiento.

Herramienta de rendimiento - vista JS

Herramienta de rendimiento – vista JavaScript.

Algunas diferencias clave

Por encima del conjunto de herramientas convencionales, Firefox tiene un número de características que hacen que tu vida más fácil como desarrollador o diseñador. Repasemos algunas de ellas ahora, pero descarga Firefox Developer Edition y pruébalas tú mismo.

Trabajar con animaciones

Las animaciones y transiciones con CSS son una buena manera de mejorar la experiencia de usuario de un sitio web, pero también son muy difíciles de lograr, y pueden fácilmente entorpecer en lugar de guiar el flujo del usuario. Si quieres que el aspecto de tus animaciones sea el correcto, entonces necesitarás  pasar tiempo ajustando los cuadros clave, duraciones y funciones de tiempo. Firefox viene con un conjunto de herramientas para mejorar con solo eso. Repasemos algunos.

Función de tiempo

La función de tiempo maneja la manera en la que una animación o transición progresa a través del tiempo. Las funciones de tiempo a menudo son descritas con una curva de Bézier en un cubo.  Concebir la curva perfecta no es sencillo; así que , las herramientas de desarrollo de Firefox vienen con una herramienta tooltip que te permite modificar una curva visualmente o incluso elegir de una lista predefinida.

Las animaciones CSS son descritas con un conjunto de reglas @keyframe. Firefox muestra estas reglas de cuadros clave en la vista para reglas CSS cuando se selecciona un elemento con animación, así que puedes directamente editarlo desde aquí, en el sitio previsto. Puedes incluso editar las propiedades del cuadro clave mientras una animación está ejecutándose.

El inspector de animaciones

El inspector de animaciones te permite ver todas las animaciones individuales en una página, detectar cuando fueron añadidas o borradas, así como también pausarlas en cualquier punto, desacelerarlas o acelerarlas. Es una característica de peso para examinar animaciones en detalle.

Probar en múltiples dispositivos, navegadores y pantallas

Cuando se refiere a asegurarnos que una página web se muestra correctamente para todos, las cosas son un poco más complejas de lo que solían ser. Ahora tenemos que tratar con muchos aspectos de densidad y proporciones de píxel así como  muchos navegadores con toda clase de sistemas operativos y dispositivos. Afortunadamente, Firefox viene con herramientas solo para esto.

Vista de diseño responsivo

La vista de diseño responsivo hace muy fácil explorar como un sitio web se ve en diferentes tamaños de pantalla. Podemos elegir un tamaño desde desde la lista predefinida o ajustamos el tamaño a cualquiera que quieras mediante la introducción de dimensiones personalizadas o arrastrando la ventana gráfica. La vista de diseño responsivo puede rápidamente ser cambiada desde el teclado (Command +Alt+M o Control +Shift+M) o mediante selección de el icono correspondiente en la barra de herramientas de desarrollo.

Valence

Valence es un complemento que viene preinstalado con el WebIDE de Firefox. WebIDE ya te permite conectar las herramientas de desarrollo de Firefox a cualquier sitio web o app en Firefox OS y en Firefox por Android. Ahora, con Valence, puedes también conectar las herramientas a Chrome en Android y el escritorio para Safari en iOS y Mac OS X. Valence ofrece prácticamente todo lo que necesitas para las pruebas en múltiples navegadores sin tener que dejar las herramientas de desarrollo a las que estás acostumbrado.

Barra de desarrollador

La barra de desarrollador tiene unos prácticos comandos que son útiles para la emulación de cualquier tipo de medio en el navegador. Es muy útil para pruebas de cómo tu sitio web mostrará CSS, por ejemplo.

Descubrir, usar y comprender las características complejas de CSS

CSS puede ser complejo. Algunas cadenas de sintaxis son difíciles de recordar, algunas puede que no las conozcas, y otras, incluso aquellas que conoces, tienen efectos que son difíciles de predecir. Las herramientas de desarrollo de Firefox, estando integradas en el navegador, están colocadas idealmente para darte toda la información necesaria para trabajar con la sintaxis. Veamos algunos ejemplos.

Información sobre propiedades CSS

Las herramientas de información sobre propiedades CSS  te ayudan a recordar los diferentes valores y construcciones sintácticas que las propiedades pueden tener. Firefox hace súper sencillo obtener la documentación para cualquier propiedad CSS directamente en las herramientas donde lo necesitas. Haciendo click en el botón derecho sobre cualquier nombre de propiedad en el editor de reglas CSS para obtener la documentación en un tooltip, con una lista de posibles valores y documentación sobre ellas también.

Visualizador previo de transforms CSS

El visualizador previo de transforms CSS te ayuda a comprender como un conjunto dado de funciones transform ha cambiado un elemento. La propiedad transform es la clase de propiedad CSS que es difícil de conseguir correctamente únicamente mirando el código; una muestra visual de lo que ha sucedido es generalmente mucho mejor. El previsualizador de transforms CSS señala el elemento como estaba antes y después de ser transformado, así que puedes ver fácilmente el efecto de la transformación.

Filtros CSS

Los filtros son una relativamente nueva característica en CSS y realmente potente. Con ello, puedes difuminar, añadir sombra o rotar los colores de cada elemento de manera simple. Escribiendo una función de filtro CSS no es lo más sencillo del mundo, y puedes concatenar tantas funciones como quieras, así que las herramientas de desarrollo de Firefox tiene una herramienta útil que permite crear filtros en una manera simple y visual.

Varios consejos y trucos

¿Alguna vez necesitaste una captura de pantalla de todo o parte de la página? Capturar páginas web o partes de páginas web como imágenes es una manera convincente de mostrar un diseño o un error a otras personas. Haciendo esto en Firefox es sencillo, bien mediante click derecho en cualquiera de los nodos en el inspector de página o bien usando el botón de captura de pantalla completa en la barra de herramientas (asegurándose primero de que está habilitada en las opciones de panel).

Pipeta de color

La herramienta pipeta de color es útil para muestras de cualquier color desde una página. Si necesitas copiar el color de cualquier parte de una página web o quieres cambiar el color en elementos de CSS, entonces usa la pipeta. En la vista de reglas CSS, con un elemento seleccionado, haz click sobre la muestra de color próxima a cualquier propiedad de valor de color y cámbiala. O, en la barra de menú de desarrollo, elige el elemento pipeta de color para copiar colores desde la página.

Señala todos los elementos que coincidan con un selector mediante click en el icono de selección en la vista de reglas CSS.

La barra de búsqueda en la vista de reglas CSS

Filtrar estilos usando la barra de búsqueda en la vista de reglas CSS. Esto podría ser útil si no estas seguro de que propiedad ha anulado otra.

Palabras finales

Las herramientas de desarrollo de Firefox han evolucionado bastante rápidamente en los últimos años, y las nuevas versiones repletas de funciones están siendo lanzadas cada seis semanas. El proyecto está siendo impulsado por una comunidad activa, ¡de la cual puedes formar parte!

No dudes en descargar Firefox Developer Edition para probar las últimas versiones de las herramientas. Y mantente al día con las nuevas funcionalidades en Mozilla Hacks.

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.