La versión pre-Beta de Firefox Aurora viene con nuevas herramientas para desarrolladores. He aquí cómo usar seis de ellos.
Firefox Aurora es la versión pre-Beta de Firefox y ahora está disponible para su descarga desde el canal de lanzamiento de Firefox Aurora. La descarga gratuita incluye nuevas funciones para las herramientas de FirefoxDeveloper Tools. Firefox implementó estas nuevas herramientas basadas en comentarios de desarrolladores web y posiblemente en un intento de ofrecer una alternativa a las herramientas de desarrollador web de Google.
Voy a revisar la mayoría de las nuevas características que fueron cubiertas en el artículo de Mozilla Hacks Firefox Developer Tools Edit as HTML, Codemirror & more: JavaScript Debugger, editar como HTML, seleccionar el formato de unidad de color predeterminado, vistas previas de muestras de color, CodeMirror y WebConsole Reflow Logging.
Nota: Este contenido también está disponible en formato de galería.
Instalación de Firefox Aurora
Para probar las funciones, necesitaba descargar e instalar Firefox Aurora. Así que hice clic en el botón Firefox Aurora Free Download, y luego en el archivo ejecutable firefox-27.0a2.en-US.win32.installer-stub.exe (.
Desmarqué la selección de MakeAurora My Default Browser y luego hice clic en el botón Options (), que resultó en el cuadro de diálogo Aurora Setup . Me aseguré de que la selección del navegador por defecto seguía sin estar seleccionada y también desmarcada para crear un acceso directo en mi escritorio. Luego hice clic en el botón Instalar.
Tardé unos minutos en descargar ontomy PC (tengo Time Warner Cable Turbo a 21M de velocidad de descarga) . Es posible que reciba una notificación de su software antivirus sobre un archivo desconocido después de ejecutar el archivo de instalación; esto se debe principalmente a la novedad del archivo, pero también al hecho de que es una versión pre-beta, por lo que tiene poco historial en este momento.
Una vez que la descarga y la instalación se hayan completado, se abrirá inmediatamente el navegador de Aurora y el cuadro Acerca de Aurora .
Durante la instalación, si selecciona la casilla de verificación para añadir un acceso directo a la barra de inicio rápido, verá el icono del globo Aurora tal y como se muestra en el extremo derecho de la .
Pruebe algunas de las nuevas herramientas
Para usar las nuevas herramientas para desarrolladores de Firefox, haz clic con el botón derecho en cualquier parte de la pantalla de Aurora y, a continuación, haz clic en Inspeccionar elemento (Q) .
El panel Herramientas para desarrolladores se abre de forma predeterminada en la ficha Inspector en la parte inferior de la pantalla .
Depurador de JavaScript: Pausa en los eventos de DOM
De acuerdo con el depurador de JavaScript, la nueva herramienta permite romper automáticamente una variedad de eventos DOM sin tener que preestablecer ningún punto de interrupción. Siga estos pasos para utilizar JavaScriptDebugger ):
1. Haga clic en la ficha Depurador en el panel Herramientas para desarrolladores.
2. Haga clic en el botón Expandir paneles, que se encuentra a la derecha del cuadro de texto de búsqueda.
3. Haga clic en la ficha Eventos. Puede hacer clic en cualquier evento la próxima vez que ocurra.
Herramienta Inspector: Editor HTML
De forma predeterminada, la herramienta Desarrollador se abre en la ficha Inspector. Desde allí, puede hacer ediciones al HTML haciendo clic con el botón derecho del ratón en cualquier elemento y seleccionando la opción Editar como HTML .
Y luego se abre la caja de contenido donde puede editar el HTML .
Seleccionar el formato de color predeterminado y las vistas previas de la muestra de color
Ahora tiene la opción de seleccionar el formato de unidad de color predeterminado para la fichaInspector. Las opciones de selección se encuentran en las opciones de ToolboxOptions, y pueden abrirse haciendo clic en el botón de rueda dentada situado en el extremo izquierdo del panel Herramientas para desarrolladores .
Las opciones de la unidad de selección de color son Hex, HSL(A), RGB(A) y Nombres de colores .
Las vistas previas de muestras de color están ahora disponibles en el panel de Reglas en el lado derecho y muestran los colores de los elementos seleccionados dentro del panel Inspector (Figura M), donde el «contenido» incluye la regla para un borde de 2 píxeles con un sólido #000 y un fondo con un color de #333.
Figura M
CodeMirror
El popular y versátil editor de texto basado en HTML5 CodeMirror está implementado en JavaScript para el navegador y ahora es el editor de componentes utilizado en las herramientas de desarrollo de Firefox. Se encuentra en StyleEditor, Debugger, Inspector como la opción Editar como HTML descrita anteriormente e inScratchpad. En la configuración de Opciones, puede seleccionar entre dos temas de herramientas de Dev: Clara u oscura .
La es un ejemplo del Light Theme con el panel StyleEditor abierto dentro del panel de Herramientas para Desarrolladores.
Consola Web: Registro de Reflujo
En el panel Herramientas para desarrolladores, haga clic en la ficha Consola, seleccione el menú CSS y, a continuación, haga clic en el elemento de menú Registro .
Con el inicio de sesión, cada vez que se produce un reflujo en la página web activa e inspeccionada, se imprimirá un registro con el nombre de la función JavaScript que desencadenó el reflujo registrado (Figura Q.
Figura Q
Resumen
Las nuevas características de las herramientas para desarrolladores de Firefox que se encuentran en la versión anterior a beta de Aurora son un buen campo de pruebas para futuras versiones del navegador Firefox. Demuestra que Mozilla está escuchando a la comunidad de desarrolladores web y respondiendo con grandes resultados.
¿Qué herramientas para desarrolladores de Firefox utiliza en su desarrollo web diario? Además, si has comprobado Aurora, comparte tus impresiones sobre el lanzamiento en la discusión.