Firefox Developer Edition es el único navegador actual que está desarrollado especialmente para los desarrolladores. Las herramientas de desarrollo de la edición estándar se lanzarán primero en la edición para desarrolladores, aparte de contar con otras herramientas de edición que no aparecen en la edición estándar que son muy jugosas para aquellos que quieren depurar sus códigos en el navegador. En este artículo vamos a echar un vistazo a algunas de estas herramientas que, solamente están en la edición de desarrollador.
Si nunca has utilizado esta versión del navegador o no estás muy familiarizado con las herramientas de desarrollo, incluso las de la edición estándar, dale un vistazo a este página de Mozilla primero. Ahí puedes practicar con algunas de las herramientas anteriormente mencionadas con el navegador para desarrolladores de Firefox. Los ejemplos son divertidos y fáciles de seguir, las instrucciones directas y si te enteras muy bien con los ejemplos, sólo tienes que seguir el video-tutorial.
1. Inspeccionador de animaciones
Las animaciones de CSS son cada vez más comunes, y las herramientas para animación con CSS proporcionadas por Firefox Developer Edition son fáciles de entender y, con ellas, puedes inspeccionar cada paso de la animación en cuestión. Puedes hacer una pausa, reproducir y revertir cualquier animación; también se puede ver la animación frame por frame vía scrubbing.
Para acceder a esta herramienta, abre la herramienta "Inspeccionador" haciendo clic derecho sobre el elemento animado y selecciona "Inspeccionar elemento". A continuación, en la parte derecha de la ventana de herramientas para desarrolladores, haz clic en "Animaciones".
2. Editor de timing para animaciones
El timing de la animación puede ser editado con las herramientas para desarrolladores, simplemente haz clic en el icono de al lado de la función en la sección Reglas, dentro del Inspector, y se mostrará un pop-up que indicará las curvas de la animación. Puede arrastrar y modificar todo lo que ves para ajustar el timing de una animación concreta. Una vez hayas realizado los cambios en las curvas, la velocidad de la animación cambiará en consecuencia.
Si no estás familiarizado con la función de animación Bezier cúbica, consulta algún tutorial en Internet.
3. Selector de color para las propiedades CSS
Existe un selector de color en la edición estándar de Firefox. Este captura un color concreto de una página web y lo copia en el portapapeles. El selector de color de Firefox Developer Edition. sin embargo, esta desarrollado aposta para modificar los valores de color de los archivos CSS.
Al lado de cada valor de color en CSS, dentro de la sección Reglas del Inspeccionador de código, hay un icono que abrirá una popup con una paleta de colores cuando hagas clic. Puedes seleccionar el color que desees dentro de la paleta.
Si ya cuentas con el color que desees, y que vas a establecer en la página, simplemente haz clic en la herramienta Cuentagotas, en la parte inferior de la ventana emergente que está dentro de la paleta. A continuación, arrastra el selector al color que desees y haz clic en él . El valor de color en CSS cambiará al del color seleccionado.
4. Herramienta de Medición
Esta herramienta te permite ver la posición XY del cursor, además de la altura, anchura y diagonal en píxeles de una parte seleccionada. Para utilizar la herramienta, primero tendrás que habilitarlo en el Toolbox del navegador, marcando la casilla denominada "Medida de una parte de la página" en "Botones disponibles del Toolbox".
Una vez activado, aparecerá el icono de una regla en la parte superior de la ventana de herramientas para desarrolladores. Haz clic en el icono y mueve el cursor sobre la página. Verás las posiciones XY cerca del cursor. Para medir la anchura, altura y diagonal de una selección, simplemente haz clic y arrastra el ratón para seleccionar la parte que desees medir.
5. Editor de filtros CSS
Si has aplicado filtros de CSS a un elemento de la página, verás un icono al lado de él en la sección Reglas, de la herramienta Inspector, la cual abrirá un editor de filtros de CSS al hacer clic.
Para eliminar un filtro, haz clic en la marca × en el extremo derecho del nombre del filtro. Para agregar un filtro, haz clic en la caja de filtros de la parte inferior y selecciona el que desees añadir. Una vez escogido, haz clic en el signo +. También puedes reorganizar los filtros en cualquier orden arrastrando cada elemento.
6. Herramienta para gestionar memoria
Puedes averiguar lo que está consumiendo memoria en tu página web con la ayuda de esta herramienta. Esto te ayudará a tomar medidas para reducir el uso de memoria y mejorar la velocidad de tu página en consecuencia.
Para utilizar esta herramienta, tendrás que habilitar la primera de las opciones del cuadro de herramientas marcando la casilla denominada "Memoria" en "Herramientas de Desarrollo por defecto de Firefox". Una vez registrado, verás la sección "Memoria" en la parte superior de la ventana de herramientas para desarrolladores justo al lado de "Rendimiento". Haz clic ahí.
Para utilizar esta herramienta, haz clic en "Tomar instantánea" o en el botón de la cámara. Verás una lista de items, como objetos y scripts que están consumiendo memoria.