Todo lo que necesita saber sobre las herramientas para desarrolladores de Firefox

Firefox Developer Edition es una versión especial de Firefox que ha sido hecha a medida para desarrolladores. Cuenta con todas las funciones más recientes de Firefox junto con una serie de herramientas de desarrollo especializadas. Aquí proporcionaré una guía de sus características para que sepa todo lo que hay que saber sobre las herramientas de desarrollo de Firefox.

Interfaz de usuario

Después de instalar Firefox Developer Edition, notará que se ve ligeramente diferente a la barra de herramientas estándar de Firefox. Firefox ciertamente ha adoptado un enfoque más centrado en el desarrollador al diseñar su barra de herramientas, haciéndola más estrecha en apariencia y decorada con muchos más botones por defecto.

El tema predeterminado para las herramientas de desarrollo de Firefox es oscuro, lo que probablemente sea el resultado de las pruebas del usuario. Sin embargo, si no le gusta el tema oscuro, siempre puede desactivar el tema de la edición para desarrolladores yendo a Menú> Personalizar .

Creando herramientas

Firefox Developer Edition viene con una serie de herramientas de creación, que están diseñadas para aquellos sitios web y aplicaciones web de creación. A continuación, proporcioné un resumen de las herramientas y sus beneficios para que no tenga que buscar esta información.

Bloc de notas

Esta herramienta brinda a los desarrolladores web la oportunidad de experimentar con código JavaScript. En el entorno proporcionado por Scratchpad, puede escribir, ejecutar y examinar los resultados del código que interactúa con la página actual.

Para abrir el Bloc de notas, simplemente presione Mayús F4 o vaya al menú Desarrollador web y haga clic en Bloc de notas. Esto abrirá la ventana donde puede escribir su código. Una vez que haya terminado, haga clic en Ejecutar> Ejecutar y el código se ejecutará en la pestaña actual.

Editor de estilo

El Editor de estilos permite a los desarrolladores web ver y editar todas las hojas de estilo con la página asociada. También podrá crear nuevas hojas de estilo desde cero y aplicarlas a una página, así como importar hojas de estilo existentes y aplicarlas a la página actual.

Para abrir el Editor de estilos, vaya al menú Desarrollador web y haga clic en Editor de estilos . La Caja de herramientas para desarrolladores de Firefox aparecerá en la parte inferior del navegador con el Editor de estilos listo para usar.

Editor de sombreado

Usar el Shader Editor en Firefox es simple. Los desarrolladores pueden ver y editar completamente los sombreadores de fragmentos y el vértice que utiliza WebGL. Y rápidamente para aquellos que no lo saben, WebGL utiliza de forma inteligente JavaScript (a través de una API) para renderizar gráficos 2D y 3D directamente a través del navegador Firefox, sin requerir el uso de complementos.

Para utilizar Shader Editor, es necesario habilitarlo primero. Para hacer esto, vaya a la configuración de Toolbox y luego marque la casilla junto a 'Shader Editor'. El Shader Editor se mostrará en la barra de herramientas de Firefox. Haz clic en él y podrás abrirlo.

Editor de audio web

La API de Web Audio Editor permite a los desarrolladores crear contexto de audio. Los desarrolladores deberán crear nodos de audio que proporcionen:

• Fuentes de audio
• Nodos que realizan transformaciones
• Notas que representan el destino elegido para la transmisión de audio.

Web Audio Editor examinará los aspectos de audio de una página y proporcionará una representación visual de la misma en un gráfico. Esto permite a los desarrolladores examinar la funcionalidad y el funcionamiento y comprobar que todos los nodos se conectan correctamente. Los desarrolladores pueden editar y examinar las propiedades del nodo AudioParam, así como también otras propiedades.

Al igual que el editor de sombreado, el editor de audio web debe habilitarse manualmente y no es una configuración predeterminada. Habilitar es fácil: simplemente regrese a la Configuración de la herramienta de desarrollo y luego marque la casilla junto a 'Web Audio'. Luego verá que hay una pestaña adicional que se muestra dentro de la barra de herramientas de la Caja de herramientas de Firefox. Simplemente haga clic en esta pestaña y se cargará una página desde la cual puede construir un contexto de audio.

Herramientas de depuración

Las herramientas de depuración de Firefox están diseñadas para examinar, explorar y depurar sitios web y aplicaciones web. A continuación, describo las características clave de algunas de estas herramientas y sus beneficios.

Inspector de página

La herramienta Page Inspector permite a los desarrolladores inspeccionar y editar la codificación HTML y CSS de una página web. Con esta herramienta, los desarrolladores pueden investigar páginas a través de la versión cargada localmente o mediante un objetivo remoto.

Abrir el Inspector de página es fácil. Si ha seleccionado un elemento, simplemente haga clic derecho en el elemento y luego seleccione 'Inspeccionar elemento'. Alternativamente, puede ir al Menú de desarrollador web y luego hacer clic en la opción Inspector. El inspector de página aparecerá en la parte inferior de su navegador.

Consola web

Esta herramienta registra toda la información asociada con una página web, como solicitudes de red, JavaScript, CSS, errores y advertencias de seguridad, advertencias de error y mensajes informativos. También le permite interactuar con una página web utilizando JavaScript.

La Consola web fue diseñada para reemplazar la antigua Consola de errores, que originalmente formaba parte de las Herramientas para desarrolladores de Firefox. Mientras que la Consola de errores proporcionó una lista enorme de errores de varias páginas, la Consola web solo mostrará información asociada con una página web específica, lo que la hace más útil.

Para abrir la Consola Web, vaya al submenú Desarrollador Web en el Menú de Firefox y haga clic en 'Consola Web'. También puede usar el atajo Ctrl Shift K. La caja de herramientas aparecerá en la parte inferior del navegador con 'Consola' activada.

Depurador

La herramienta Firefox Debugger brinda a los desarrolladores web la oportunidad de examinar y modificar su código JavaScript. También se puede utilizar para identificar errores. Con el depurador, puede depurar código localmente en Firefox o de forma remota en un dispositivo Firefox OS o Firefox para Android.

Para abrir el depurador, vaya al submenú Desarrollador web en el menú principal de Firefox y haga clic en 'Depurador'. Alternativamente, puede presionar Ctrl Shift S y la caja de herramientas aparecerá en la parte inferior de su navegador con el depurador activado y listo para usar.

Monitor de red

El Monitor de red está diseñado para mostrarle todas las diferentes solicitudes de red realizadas por Firefox, cuánto tiempo toma cada solicitud y los detalles de cada solicitud. Vaya a Menú de desarrollador web> Red para activar la herramienta. Deberá actualizar la página para ver las solicitudes.

En el Monitor de red, podrá ver una línea de tiempo de las solicitudes y filtrar el contenido por tipo. También hay una herramienta de análisis de rendimiento, que puede utilizar para ver cuánto tiempo tarda el navegador en descargar diferentes partes de su sitio web. Para ejecutar esta herramienta, simplemente haga clic en el icono del cronómetro en la barra de herramientas en la parte inferior del Monitor de red.

Inspector de almacenamiento

Si desea conocer los diferentes tipos de almacenamiento que puede utilizar una página web, deberá habilitar la herramienta Inspector de almacenamiento. Tal como está actualmente, el Inspector de almacenamiento se puede utilizar para inspeccionar cookies, almacenamiento local, almacenamiento de sesión e IndexedDB.

El Inspector de almacenamiento proporciona una vista de almacenamiento de solo lectura. Sin embargo, Firefox ha dicho que está trabajando en el desarrollo de la herramienta para que los desarrolladores puedan editar sus contenidos de almacenamiento en el futuro.

Para abrir el Inspector de almacenamiento, vaya al Submenú Desarrollador web y haga clic en Inspector de almacenamiento. Alternativamente, puede presionar Shift + F9 para usar el atajo de teclado.

Barra de herramientas para desarrolladores

La barra de herramientas para desarrolladores está diseñada para dar acceso a la línea de comandos del desarrollador web a varias de las herramientas para desarrolladores de Firefox. Además de usar los comandos configurados por Firefox, que puede encontrar aquí, también puede agregar sus propios comandos usando Scratchpad. Estos se pueden convertir en complementos para que otras personas también puedan usarlos.

Abra la barra de herramientas del desarrollador presionando Mayús + F2. Alternativamente, puede ir al menú del desarrollador web y hacer clic en la barra de herramientas del desarrollador.

Otras herramientas de depuración: vista 3D, cuentagotas, iFrames

Otras herramientas de depuración incluidas en el paquete de herramientas para desarrolladores de Firefox incluyen:

• Vista 3D: esto le brinda una vista 3D de sus bloques anidados de HTML y contenido
• Cuentagotas: esto le permite seleccionar un color particular de la página y copiarlo al portapapeles)
• Seleccionar iFrames: esto le permite apuntar sus herramientas de desarrollador a iFrames específicos dentro de un documento.

Herramientas móviles

Además de las herramientas de creación y depuración de Firefox, también hay una serie de herramientas móviles que los desarrolladores pueden utilizar para desarrollos móviles. Revisaré estos en su totalidad a continuación.

Control de aplicaciones

Esta herramienta permite a los desarrolladores probar, implementar y depurar aplicaciones HTML5 en dispositivos Firefox OS. También actúa como un simulador, por lo que las pruebas se pueden realizar directamente desde el navegador de escritorio Firefox.

El Administrador de aplicaciones se entrega con un panel de aplicaciones, donde los desarrolladores pueden administrar aplicaciones locales y aplicaciones alojadas externamente; un panel de dispositivos, que proporciona información sobre un dispositivo conectado, como su versión del sistema operativo y las aplicaciones instaladas; y Toolboxes, que son un conjunto de herramientas de desarrollo de Firefox que se pueden utilizar en la aplicación en ejecución.

WebIDE

Esta herramienta móvil permite a los desarrolladores crear, editar, ejecutar y depurar sus aplicaciones web a través del Simulador de Firefox OS o mediante un dispositivo Firefox OS. Puede usarlo para conectarse a las herramientas de desarrollo de Firefox con otros navegadores como Firefox para Android y Chrome para Android.

Otras herramientas móviles

Otras herramientas móviles incluyen:

• Depuración remota para Firefox para Android
• Simulador de Firefox OS: simula un dispositivo Firefox OS pero se ejecuta en el escritorio
• Vista de diseño receptivo: esto le permite ver cómo se ve su sitio web o aplicación web en diferentes dispositivos con diferentes tamaños de pantalla.

Herramientas de rendimiento

El rendimiento es fundamental en el desarrollo web, por lo que Firefox proporciona a los desarrolladores web una serie de herramientas que se pueden utilizar para diagnosticar y solucionar cualquier problema de rendimiento con sus sitios web y aplicaciones web.

Herramienta de rendimiento

La herramienta de rendimiento reemplazó al generador de perfiles de muestreo de JavaScript original de Firefox. Todavía contiene una versión actualizada del perfil de muestreo; sin embargo, también tiene una línea de tiempo de velocidad de fotogramas. Se esperan más funciones en el futuro.

La herramienta de rendimiento se puede utilizar para crear, analizar y muestrear perfiles.

Generador de perfiles de JavaScript

JavaScript Profiler está diseñado para ayudar a los desarrolladores a encontrar problemas en su código JavaScript. Lo hace muestreando la pila de llamadas JavaScript actual y proporcionando estadísticas sobre ella.

Herramienta de tapajuntas de pintura

Esta herramienta resaltará la parte de su página web que el navegador necesita volver a pintar en respuesta a una entrada. Permite a los desarrolladores web averiguar si su sitio web hace que el navegador se vuelva a pintar más de lo necesario. Recuerde que los repintes pueden tener un impacto negativo en su rendimiento, por lo que es una buena idea utilizar esta herramienta para eliminar repintados innecesarios y mejorar el rendimiento de su sitio web.

Perfil de desarrollador independiente

Tener que cambiar entre versiones de Firefox sería un verdadero dolor de cabeza. La buena noticia es que Firefox Developer Edition usa un perfil completamente separado de otras versiones de Firefox que haya instalado.

Notas de la versión para desarrolladores

Los desarrolladores que deseen leer las notas relacionadas con las versiones actuales e históricas de Firefox Developer Edition pueden hacerlo simplemente visitando este enlace.

Terminando

Si es un desarrollador web nuevo o experimentado, se beneficiará enormemente al hacer uso de las detalladas y variadas herramientas para desarrolladores de Firefox. Desde la creación de código hasta la depuración de HTML, las herramientas le permiten llevar a cabo una amplia gama de acciones necesarias para desarrollar un sitio web o una aplicación web. Las herramientas móviles también son muy útiles, sobre todo para aquellos que buscan crear sitios web sensibles con el fin de beneficiarse de los últimos (21 ^de abril de 2015) actualización del algoritmo de Google.

Para obtener más información sobre las herramientas para desarrolladores de Firefox, visite el sitio web de desarrolladores de Mozilla y únase a la comunidad de desarrolladores. Firefox Developer Edition se puede descargar y utilizar de forma gratuita.