Depuraci贸n

Las t茅cnicas descritas aqu铆 funcionan en Firefox 50 y versiones sucesivas. Si necesitas usar una versi贸n anterior de Firefox, por favor ve al art铆culo debugging extensions using WebExtension APIs before Firefox 50.

Este art铆culo explica c贸mo se pueden usar las herramientas de desarrollo de Firefox para depurar extensiones creadas con las WebExtension APIs.

Una WebExtension puede consistir en varias partes distintas 鈥 scripts en segundo plano, popups, options pages, content scripts 鈥 y se tendr谩 que usar un proceso ligeramente distinto para depurar cada parte. As铆, cada parte tendr谩 una secci贸n principal en este art铆culo, y el objetivo es que esas secciones se puedan leer de forma independiente. Empezaremos presentando el Depurador de Add-on, que ser谩 usado para depurar la mayor铆a de las partes de un complemento.

Para la mayor parte de este art铆culo utilizaremos el Depurador de Add-on. Para abrir el Depurador de Add-on:

  • abrir Firefox

  • escribir "about:debugging" en la barra de direcciones

  • marcar la casilla en la que pone "Activar depuraci贸n de complementos"

  • hacer click en el bot贸n "Depurar" al lado del complemento

  • hacer click en "Aceptar" en el cuadro de alerta

Se abrir谩 entonces una nueva ventana. La ventana principal de Firefox se pondr谩 en primer plano, as铆 que se tendr谩 que hacer click en la nueva ventana para que aparezca en primer plano.

Esta nueva ventana se llama "Herramientas de desarrollo" y contiene las herramientas de depuraci贸n que se usar谩n. La interfaz tiene varias pesta帽as en la parte de arriba que permiten moverse por las herramientas disponibles:

En este art铆culo usaremos tres herramientas de depuraci贸n:

  • La Consola: muestra mensajes registrados por la extensi贸n as铆 como mensajes de error registrados por el navegador mientras ejecuta la extensi贸n. Tambi茅n proporciona una l铆nea de comandos, habilitando la ejecuci贸n de JavaScript en el contexto de la extensi贸n.

  • El Depurador: habilita el uso de breakpoints y watchpoints en el c贸digo JavaScript de la extensi贸n, y examina y modifica su estado interno.

  • El Inspector: habilita la revisi贸n y modificaci贸n del HTML y CSS usado para construir las p谩ginas de la extensi贸n.

Los ejemplos de esta secci贸n usan la extensi贸n de ejemplo "notify-link-clicks-l10n". Para explorar las opciones, se puede encontrar este ejemplo en el repositorio webextensions-examples.

Los scripts en segundo plano permanecen cargados durante el tiempo de vida de la extensi贸n. Se cargan dentro de una 鈥減谩gina en segundo plano鈥 invisible: por defecto, es un documento HTML vac铆o, pero se puede especificar contenido HTML propio usando la palabra clave "background" en 鈥渕anifest.json鈥.

Se pueden depurar scripts en segundo plano usando el Depurador de Add-ons.

En la Consola del Depurador de Add-ons se puede ver un registro de las salidas, incluidas las llamadas a console.log() desde los propios scripts en segundo plano y cualquier error que el navegador encuentre al ejecutarlos. Es importante mencionar que la consola muestra todos los errores detectados por el navegador, no s贸lo los errores relacionados con el c贸digo de la extensi贸n.

Por ejemplo, la extensi贸n de ejemplo notify-link-clicks-i18n registra un mensaje de su script en segundo plano cuando recibe un mensaje de uno de sus otros scripts:

Usando la l铆nea de comandos de la Consola, se pueden acceder y modificar los objetos creados por los scripts en segundo plano.

Por ejemplo, aqu铆 se hace un allamada a la funci贸n notify() definida en el script en segundo plano de la extensi贸n:

Si se mira la ventana del Depurador, se pueden ver todos los scripts en segundo plano de la extensi贸n. Se pueden definir breakpoints, ver el c贸digo paso a paso y hacer todo lo que es posible hacer en un depurador.

Si se pulsa la tecla de Escape mientras se est谩 en el Depurador, la ventana de Herramientas de desarrollo se dividir谩 en dos, con la parte de abajo ocupada ahora por la Consola. Ahora, mientras se est茅 en un breakpoint, se puede modificar el estado del programa usando la consola. Ver Dividir la Consola para m谩s informaci贸n.

Las p谩ginas de opciones son p谩ginas HTML que pueden ser proporcionadas por la persona que desarrolle la extensi贸n y contienen opciones para la misma. Se muestran normalmente en un iframe en el Add-ons Manager (para ver el Add-ons Manager, visita la p谩gina "about:addons").

Para depurar p谩ginas de opciones:

  • abrir el Depurador de Add-on para la add-on en cuesti贸n

  • abrir la p谩gina de opciones de la add-on.

Cualquier archivo fuente en JavaScript que incluya ser谩 listado en el Depurador:

Este v铆deo usa el ejemplo de WebExtension favourite-colour.

Tambi茅n se ver谩 cualquier mensaje registrado por el c贸digo en la Consola del Depurador de Add-on.

Tambi茅n se puede usar el Depurador de Add-on para depurar el c贸digo HTML y CSS de la p谩gina. Pero primero se necesita dirigir las herramientas al iframe que alberga la p谩gina de opciones. Para hacer esto: abre la p谩gina de opciones, haz clic en el icono indicado en la captura de pantalla mostrada a continuaci贸n y selecciona la p谩gina de opciones del men煤 desplegable:

Ahora al cambiar a la pesta帽a Inspector se podr谩 examinar y editar el HTML y CSS para la p谩gina:

 

Las ventanas emergentes son cuadros de di谩logo unidos a acciones del navegador o de la p谩gina. Se especifican usando un documento HTML que puede incluir fuentes CSS y JavaScript para determinar el estilo y el funcionamiento. Cuando la ventana emergente es visible, se puede usar el Depurador de Add-on para depurar su c贸digo.

Un problema con las ventanas emergentes es que si una ventana emergente est谩 abierta y se hace clic fuera de ella, esta se cierra y su c贸digo se descarga. Obviamente, esto hace que sea imposible depurarlas. Para eliminar este comportamiento, se debe hacer clic en el bot贸n del Depurador de Add-on destacado en la captura de pantalla mostrada a continuaci贸n:

Ahora, al abrir una ventana emergente esta continuar谩 abierta hasta que se pulse Escape.

 

Es importante se帽alar que esta opci贸n est谩 disponible para ventanas emergentes desarrolladas para el navegador, como el men煤 de hamburguesa ( ), as铆 como a ventanas emergentes propias de la add-on.

Tambi茅n es importante notar que el cambio es persistente, incluso aunque el navegador se reinicie. Estamos trabajando en solucionar esto en el bug 1251658, pero hasta entonces puede ser mejor permitir de nuevo la ocultaci贸n autom谩tica volviendo a hacer clic en el bot贸n antes de cerrar la Caja de Herramientas del Navegador.

Internamente, este bot贸n simplemente cambia la preferencia ui.popup.disable_autohide, lo que se puede hacer manualmente usando about:config.

Cuando la ventana emergente est谩 abierta, sus fuentes de JavaScript se listar谩n en el Depurador. Se pueden colocar breakpoints y modificar el estado interno del programa:

Este v铆deo usa la extensi贸n de ejemplo beastify.

Tambi茅n se puede usar el Depurador de Add-on para depurar el c贸digo HTML y CSS de la ventana emergente. Pero primero se necesita dirigir las herramientas al documento de la ventana emergente. Para hacer esto: abre la ventana emergente, haz clic en el icono indicado en la captura de pantalla mostrada a continuaci贸n y selecciona la p谩gina de la ventana emergente del men煤 desplegable:

Ahora al cambiar a Inspector se podr谩n examinar y editar el HTML y el CSS de la ventana emergente:

Se puede usar el Depurador de Add-on para depurar p谩ginas en segundo plano, p谩ginas de opciones y ventanas emergentes. Sin embargo, no se puede usar para depurar scripts de contenido. Esto es debido a que, en Firefox multiproceso, los scripts de contenido se ejecutan en un proceso distinto del de otras partes de la add-on.

Para depurar scripts de contenido adjuntos a una p谩gina web, se deben usar las herramientas de desarrollo web normales para esa p谩gina:

  • selecciona 鈥淎lternar herramientas鈥 del submen煤 Desarrollador Web en el men煤 Firefox (o el men煤 de herramientas si se muestra la barra de men煤 o se est谩 utilizando Mac OS X)

  • o presiona el m茅todo abreviado del teclado CtrlShiftI (CommandOptionI en OS X).

Por defecto, las herramientas se muestran al pie de la pesta帽a de desarrollo, para reflejar que est谩n relacionadas con esa pesta帽a. Cualquier salida de las instrucciones console.log() de los scripts de contenido ser谩 mostrada all铆. Tambi茅n se ver谩n los scripts de contenido listados en el Depurador, donde se podr谩n colocar breakpoints, avanzar en el c贸digo, etc.

Este video usa el ejemplo notify-link-clicks-i18n de WebExtension.

Si la pesta帽a de Herramientas de Desarrollo no estaba abierta cuando el scripts de contenido se introdujo, puede ocurrir que el scripts de contenido no aparezca en el panel de depuraci贸n. Si esto ocurre, recargar la p谩gina que contiene la pesta帽a de Herramientas de Desarrollo deber铆a solucionar el problema.