Firefox Developer Edition: 6 mejores herramientas para probar
La edición para desarrolladores de Firefox es el único navegador de hoy que está hecho especialmente para desarrolladores. Las herramientas de desarrollador en la edición estándar aparecen primero en la edición del desarrollador y hay herramientas en la edición de desarrollador que no están y no estarán disponibles en la edición estándar. Hoy vamos a echar un vistazo a algunas de las herramientas que en este momento solo se pueden encontrar en la edición para desarrolladores .
Si eres una persona que nunca ha usado o que no está muy familiarizada con las herramientas de desarrollo, incluso las de la edición estándar, primero echa un vistazo a este genial "DevTools Challenger" de Mozilla. Aquí puedes practicar con algunas de las herramientas mencionadas a continuación en el navegador de la edición para desarrolladores de Firefox. Los ejemplos son divertidos y fáciles de seguir, las instrucciones son sencillas y, si no puede ponerse al día, simplemente siga el video tutorial.
1. Herramienta de inspector de animación
Las animaciones CSS se están volviendo cada vez más comunes, y las herramientas de animación CSS proporcionadas por la edición para desarrolladores de Firefox hacen que sea fácil seguir e inspeccionar cada paso de la animación creada. Puede pausar, reproducir e invertir cualquier animación; también puede verlo pasando fotograma por foto a través de la depuración.
Para acceder a la herramienta, abra la herramienta Inspector haciendo clic con el botón derecho en el elemento animado y seleccionando "inspeccionar elemento", luego en el lado derecho de la ventana de la herramienta dev, haga clic en "Animaciones".
![](http://hideout-lastation.com/img/tech-design-tips/263/firefox-developer-edition.gif)
El tiempo de animación se puede editar en la herramienta de desarrollo, simplemente haga clic en el icono junto a la función en la sección Reglas de la herramienta Inspector y se abrirá una ventana emergente que muestra las curvas de función. Puede arrastrar y modificar esto para ajustar el tiempo de su animación. Una vez que haya realizado los cambios en las curvas, la velocidad de su animación cambiará en consecuencia.
![](http://hideout-lastation.com/img/tech-design-tips/263/firefox-developer-edition-2.gif)
3. Selector de color para propiedades de CSS
Ya hay un selector de color disponible en la edición estándar de Firefox (lea más al respecto en esta publicación), que selecciona un color de la página y lo copia en el portapapeles. Sin embargo, el selector de color que menciono ahora es específico para los valores de color CSS de las propiedades .
Además de cada valor de color CSS en la sección Reglas de la herramienta Inspector, hay un icono que abrirá una rueda de color emergente al hacer clic. Puede seleccionar el color que desea de la rueda.
![](http://hideout-lastation.com/img/tech-design-tips/263/firefox-developer-edition-3.gif)
4. Herramienta de medición
Esta herramienta le permite ver la posición XY del cursor, y la altura, el ancho y la medición diagonal en píxeles de una porción seleccionada. Para usar la herramienta, primero deberá habilitarla en Opciones de Toolbox para desarrolladores marcando la casilla "Medir una parte de la página" debajo de "Botones de la Caja de herramientas disponible".
Una vez habilitado, aparecerá un icono de regla en la parte superior de la ventana de la herramienta de desarrollo, haga clic en ese icono y mueva el cursor sobre la página. Verá las posiciones XY cerca del cursor. Para medir el ancho, alto y diagonal simplemente haga clic y arrastre para seleccionar la parte que desea medir.
![](http://hideout-lastation.com/img/tech-design-tips/263/firefox-developer-edition-4.gif)
Si ha aplicado el filtro CSS a un elemento en la página, verá un ícono al lado en la sección Reglas de la herramienta Inspector, que abre un editor de filtro CSS al hacer clic.
Para eliminar un filtro, haga clic en la marca × en el extremo derecho del nombre del filtro. Para agregar un filtro, haga clic en el cuadro de filtro en la parte inferior y seleccione el que desea agregar y haga clic en & amp;; firmar. También puede reorganizar los filtros en cualquier orden arrastrando cada elemento.
![](http://hideout-lastation.com/img/tech-design-tips/263/firefox-developer-edition-5.gif)
Puede averiguar qué está ocupando la memoria en su página web, con la ayuda de esta herramienta. Esto le ayuda a tomar medidas para reducir el uso de memoria y, en consecuencia, mejorar la velocidad de su página.
Para usar la herramienta, primero deberá habilitarla desde las Opciones del Cuadro de herramientas marcando la casilla "Memoria" en "Herramientas predeterminadas para desarrolladores de Firefox". Una vez marcado, verá la sección "Memoria" en la parte superior de la ventana de la herramienta de desarrollo justo después de "Rendimiento". Seleccione eso.
Para usar la herramienta, haga clic en "Tomar instantánea" o en el botón de la cámara. Verá una lista de elementos, como objetos y scripts que ocupan memoria.
![](http://hideout-lastation.com/img/tech-design-tips/263/firefox-developer-edition-6.gif)
![Más de 150 teclas rápidas de teclado de Windows 10 para cohesionar tu productividad](http://hideout-lastation.com/img/tech-design-tips/884/150-windows-10-keyboard-shortcuts-rocket-your-productivity.jpg)
Más de 150 teclas rápidas de teclado de Windows 10 para cohesionar tu productividad
¿Desea aumentar su productividad y comenzar a hacer más en menos tiempo? Uno de los trucos para los usuarios avanzados es hacer uso de la extensa lista de atajos de teclado que ofrece Windows 10.El hecho es que cambiar al mouse, una y otra vez, para hacer pequeñas tareas altera su estado de trabajo y, por lo tanto, degrada la productividad. A
![¡40 anuncios de cartelera absolutamente brillantes!](http://hideout-lastation.com/img/tech-design-tips/272/40-absolutely-brilliant-billboard-ads.jpg)
¡40 anuncios de cartelera absolutamente brillantes!
¿Cuántas vallas publicitarias echó un vistazo durante su paseo o conducción en su vida? Lamento no poder recordar muchos de ellos, pero sinceramente creo que no es mi problema, ¡ya que el cartel en sí debería ser lo suficientemente bueno como para atraerme!¿Qué hace una gran valla publicitaria entonces? O hágas