Firefox Developer Edition 6 las 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 para desarrolladores en la edición estándar aparecen primero en la edición para desarrolladores y hay herramientas en la edición para desarrolladores que no están disponibles 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 puede encontrar en la edición para desarrolladores..
Si eres alguien que nunca ha usado o que no está muy familiarizado con las herramientas de desarrollo, incluso las de la edición estándar, primero revisa este genial "DevTools Challenger" de Mozilla. Aquí puede practicar con algunas de las herramientas que se mencionan 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 tutorial de video..
1. Herramienta inspector de animación.
Las animaciones CSS son 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 de seguir e inspeccionar cada paso de la animación creada. Puedes pausar, reproducir y revertir cualquier animación; También puede verlo sucediendo fotograma a fotograma a través de la limpieza.
Para acceder a la herramienta, abra la Inspector herramienta haciendo clic derecho en el elemento animador y seleccionando "inspeccionar elemento", luego en el lado derecho de la ventana de la herramienta dev, haga clic en "Animaciones".
2. Editor de funciones de sincronización de animación.
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 Reglas sección de la Inspector Se abre una herramienta y una ventana emergente que muestra las curvas de función. Puede arrastrar y modificar esto para ajustar su tiempo de animación. Una vez que haya realizado los cambios en las curvas, su velocidad de animación cambiará en consecuencia.
Si aún no está familiarizado con la función de animación de Bezier cúbico, recomiendo esta publicación para obtener más información..
3. Selector de color para propiedades CSS
Ya hay un selector de color disponible en la edición estándar de Firefox (lea más sobre esto en esta publicación), que selecciona un color de la página y lo copia en el portapapeles. El selector de color que menciono ahora sin embargo es Específico para los valores de color CSS de las propiedades..
Al lado de cada valor de color CSS en el Reglas sección de la Inspector herramienta, hay un icono que abrirá una rueda de color emergente cuando se haga clic. Puedes seleccionar qué color quieres de la rueda..
Si ya tiene un color que desea y que está en la página, simplemente haga clic en la herramienta Cuentagotas en la parte inferior de la ventana emergente para abrir el selector de color, luego arrastre el selector hasta el color que desee y haga clic en él. . El valor del color CSS se cambiará al del color seleccionado..
4. Herramienta de medición.
Esta herramienta le permite ver la posición XY del cursor y la medida de altura, anchura y diagonal en píxeles de una parte seleccionada. Para usar la herramienta, primero debes habilitarla en el desarrollador. Opciones de la caja de herramientas, marcando la casilla de verificación llamada "Medir una parte de la página" en "Botones de la caja de herramientas disponibles".
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ás las posiciones XY cerca del cursor. Para medir el ancho, la altura y la diagonal, haga clic y arrastre para seleccionar la parte que desea medir.
5. editor de filtro CSS
Si ha aplicado el filtro CSS a un elemento de la página, verá un icono junto a él en la Reglas sección de la Inspector herramienta, 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, seleccione el que desea agregar y haga clic en + firmar. También puede reorganizar los filtros en cualquier orden arrastrando cada elemento.
6. Herramienta de memoria.
Con la ayuda de esta herramienta, puede averiguar qué ocupa la memoria en su página web. Esto le ayuda a tomar medidas para reducir el uso de la memoria y mejorar la velocidad de la página..
Para utilizar la herramienta, primero deberá habilitarla desde la Opciones de la caja de herramientas marcando la casilla de verificación llamada "Memoria" en "Herramientas de desarrollo de Firefox predeterminadas". Una vez que esté marcado, verá la sección "Memoria" en la parte superior de la ventana de la herramienta dev justo después de "Rendimiento". Selecciona eso.
Para utilizar 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 están ocupando memoria .
