Categorías: Guarida Sin categoría

Herramientas de desarrollo para crear complementos

En el último año se han dado avances importantes en las herramientas de desarrollo que están incluidas en el Firefox. En noviembre hice un video que explica la mayoría de estas herramientas, especialmente para desarrolladores web. El video sigue siendo válido, aunque algunas de ellas se han movido de lugar y tienen algunas funciones adicionales. En este artículo voy a mencionar la utilidad que tienen estas herramientas para el desarrollo de complementos.

Primero, hay que activar las utilidades avanzadas de estas herramientas. Para ello, hay que abrir about:config y cambiar el valor de las preferencias devtools.chrome.enableddevtools.debugger.remote-enabled a true. Esto activa algunas opciones que vamos a ver más adelante.

Inspección

La visualización de la interfaz gráfica con la herramienta Inspeccionar por el momento está limitada al contenido web. Sin embargo, esta herramienta sigue siendo muy valiosa a la hora de inspeccionar contenido web que es modificado o creado desde el código de la extensión. Por el momento no se puede inspeccionar el contenido XUL de la ventana principal o ventanas de extensiones, pero esto va a cambiar en el futuro.

La mejor manera de inspeccionar el DOM del navegador sigue siendo la extensión DOM Inspector. Su apariencia es algo anticuada, pero su funcionalidad sigue siendo única y sumamente útil para analizar y crear complementos.

Pruebas

La herramienta Borrador es una de las más útiles para crear complementos y ejecutar fragmentos de código para pruebas rápidas. Esto siempre se ha podido hacer con la Consola de Errores, pero el Borrador tiene muchas más ventajas.

Borrador con código de navegadorEl Borrador por defecto solo ejecuta código en el entorno web. Para activar las opciones del navegador, hay que abrir el Borrador, y en el menú de Entorno escoger Navegador. Una vez seleccionado esto, se puede ejecutar cualquier código con privilegios avanzados, igual que en un complemento o en la Consola de Errores. Las ventajas del Borrador es que el texto del código está decorado y se pueden tener cuantas líneas se desee, además que se pueden ejecutar fragmentos del código y guardar el código resultante.

Depuración

El depurador funciona con el código de las extensiones y el navegador, pero con algunas limitaciones.

Depurador de navegador

Luego de cambiar las preferencias mencionadas anteriormente y reiniciar el navegador, aparece un nuevo elemento en el menú de herramientas de desarrollo: Depurador del navegador. Esta opción abre un nuevo proceso que es el que se encarga de la depuración por medio de un protocolo de depuración remota, que se utiliza también para depurar código ejecutándose en dispositivos móviles. En esta ventana nueva se pueden ver los scripts que se están ejecutando en la ventana principal, y con suerte se pueden depurar correctamente.

Las limitaciones con la depuración todavía son grandes.  Algunos scripts en el chrome y elementos generados con XBL no se pueden depurar. Tampoco se han incorporado los scripts bootstrap que se utilizan para las extensiones que no requieren reinicio. La depuración de scripts de módulos JS sí funciona correctamente.

En resumen, tenemos algunas herramientas nuevas que podemos utilizar para crear complementos, y mucho trabajo viene adelante para que haya más con lo que podamos jugar. Las herramientas de desarrollo son un foco de atención grande para Mozilla, y con cada versión nueva de Firefox vienen mejoras en esta área. Esperemos que llegue pronto el día en que podamos trabajar en nuestros complementos sin tener que cambiar de aplicación :).

The following two tabs change content below.

jorgev

Add-ons Developer Relations Lead at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.