1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
---
title: Depuración
slug: Mozilla/Add-ons/WebExtensions/Depuración
tags:
- WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/Debugging
---
<div>{{AddonSidebar}}</div>
<div class="note">
<p>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 <a href="/en-US/Add-ons/WebExtensions/Debugging_(before_Firefox_50)">debugging extensions using WebExtension APIs before Firefox 50</a>.</p>
</div>
<p>Este artículo explica cómo se pueden usar las herramientas de desarrollo de Firefox para depurar extensiones creadas con las WebExtension APIs.</p>
<p>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.</p>
<ul>
</ul>
<h2 class="western" id="El_Depurador_de_Add-on">El Depurador de Add-on</h2>
<p>Para la mayor parte de este artículo utilizaremos el Depurador de Add-on. Para abrir el Depurador de Add-on:</p>
<ul>
<li>
<p style="margin-bottom: 0cm;">abrir Firefox</p>
</li>
<li>
<p style="margin-bottom: 0cm;">escribir "about:debugging" en la barra de direcciones</p>
</li>
<li>
<p style="margin-bottom: 0cm;">marcar la casilla en la que pone "Activar depuración de complementos"</p>
</li>
<li>
<p style="margin-bottom: 0cm;">hacer click en el botón "Depurar" al lado del complemento</p>
</li>
<li>
<p>hacer click en "Aceptar" en el cuadro de alerta</p>
</li>
</ul>
<p>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.</p>
<p>{{EmbedYouTube("HMozipAjrYA")}}</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13861/toolbox-tabs.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>
<p>En este artículo usaremos tres herramientas de depuración:</p>
<ul>
<li>
<p style="margin-bottom: 0cm;"><a href="https://developer.mozilla.org/es/docs/Tools/Web_Console">La Consola</a>: 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.</p>
</li>
<li>
<p style="margin-bottom: 0cm;"><a href="https://developer.mozilla.org/es/docs/Tools/Debugger">El Depurador</a>: habilita el uso de breakpoints y watchpoints en el código JavaScript de la extensión, y examina y modifica su estado interno.</p>
</li>
<li>
<p><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector">El Inspector</a>: habilita la revisión y modificación del HTML y CSS usado para construir las páginas de la extensión.</p>
</li>
</ul>
<h2 class="western" id="Depurando_scripts_en_segundo_plano">Depurando scripts en segundo plano</h2>
<div class="note">
<p>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 <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a>.</p>
</div>
<p>Los <a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#Scripts_en_segundo_plano">scripts en segundo plano</a> permanecen cargados durante el tiempo de vida de la extensión. Se cargan dentro de una “página en segundo plano” invisible: por defecto, es un documento HTML vacío, pero se puede especificar contenido HTML propio usando la palabra clave <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/background">"background"</a> en “manifest.json”.</p>
<p>Se pueden depurar scripts en segundo plano usando el <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Depurador de Add-ons</a>.</p>
<p>En la Consola del Depurador de Add-ons se puede ver un registro de las salidas, incluidas las llamadas a <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> 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.</p>
<p>Por ejemplo, la extensión de ejemplo <a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a> registra un mensaje de su script en segundo plano cuando recibe un mensaje de uno de sus otros scripts:</p>
<p>{{EmbedYouTube("WDQsBU-rpN0")}}</p>
<p>Usando la línea de comandos de la Consola, se pueden acceder y modificar los objetos creados por los scripts en segundo plano.</p>
<p>Por ejemplo, aquí se hace un allamada a la función <code>notify()</code> definida en el script en segundo plano de la extensión:</p>
<p>{{EmbedYouTube("g-Qgf8Mc2wg")}}</p>
<p>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 <a href="https://developer.mozilla.org/es/docs/Tools/Debugger">todo lo que es posible hacer en un depurador</a>.</p>
<p>{{EmbedYouTube("MNeaz2jdmzY")}}</p>
<p>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 <a href="/en-US/docs/Tools/Web_Console/Split_console">Dividir la Consola</a> para más información.</p>
<h2 class="western" id="Depurando_páginas_de_opciones">Depurando páginas de opciones</h2>
<p>Las <font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/es/Add-ons/WebExtensions/Anatomia_de_una_WebExtension#P%C3%A1gina_de_opciones">páginas de opciones</a></u></span></font> 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").</p>
<p>Para depurar páginas de opciones:</p>
<ul>
<li>
<p style="margin-bottom: 0cm;">abrir el <font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging#The_Add-on_Debugger">Depurador de Add-on</a></u></span></font> para la add-on en cuestión</p>
</li>
<li>
<p>abrir la página de opciones de la add-on.</p>
</li>
</ul>
<p>Cualquier archivo fuente en JavaScript que incluya será listado en el Depurador:</p>
<p>{{EmbedYouTube("BUMG-M8tFF4")}}</p>
<div class="note">
<p>Este vídeo usa el ejemplo de WebExtension <font color="#000080"><span lang="zxx"><u><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colourbeastify">favourite-colour</a></u></span></font>.</p>
</div>
<p>También se verá cualquier mensaje registrado por el código en la Consola del Depurador de Add-on.</p>
<p>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:</p>
<p class="western" style="margin-bottom: 0cm; line-height: 100%;"><img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;">Ahora al cambiar a la pestaña Inspector se podrá examinar y editar el HTML y CSS para la página:</p>
<p class="western" style="margin-bottom: 0cm; line-height: 100%;"> </p>
<p>{{EmbedYouTube("-2m3ubFAU94")}}</p>
<h2 class="western" id="Depurando_ventanas_emergentes">Depurando ventanas emergentes</h2>
<p><font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Popups">Las ventanas emergentes</a></u></span></font> 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 <a href="/en-US/Add-ons/WebExtensions/Debugging_(Firefox_50_onwards)#The_Add-on_Debugger">Depurador de Add-on</a> para depurar su código.</p>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13877/toolbox-popup.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>
<p class="western" style="margin-bottom: 0cm; line-height: 100%;">Ahora, al abrir una ventana emergente esta continuará abierta hasta que se pulse Escape.</p>
<p class="western" style="margin-bottom: 0cm; line-height: 100%;"> </p>
<div class="note">
<p>Es importante señalar que esta opción está disponible para ventanas emergentes desarrolladas para el navegador, como el menú de hamburguesa (<img style="height: 20px; width: 22px;"> ), así como a ventanas emergentes propias de la add-on.</p>
<p>También es importante notar que el cambio es persistente, incluso aunque el navegador se reinicie. Estamos trabajando en solucionar esto en el <font color="#000080"><span lang="zxx"><u><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1251658">bug 1251658</a></u></span></font>, pero hasta entonces puede ser mejor permitir de nuevo la ocultación automática<strong> </strong>volviendo a hacer clic en el botón antes de cerrar la Caja de Herramientas del Navegador.</p>
<p>Internamente, este botón simplemente cambia la preferencia <code class="western">ui.popup.disable_autohide</code>, lo que se puede hacer manualmente usando about:config.</p>
</div>
<p>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:</p>
<p>{{EmbedYouTube("hzwnR8qoz2I")}}</p>
<div class="note">
<p>Este vídeo usa la extensión de ejemplo <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a>.</p>
</div>
<p>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:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13863/toolbox-iframe.png" style="display: block; height: 417px; margin-left: auto; margin-right: auto; width: 876px;"></p>
<p>Ahora al cambiar a Inspector se podrán examinar y editar el HTML y el CSS de la ventana emergente:</p>
<p>{{EmbedYouTube("6lvdm7jaq7Y")}}</p>
<h2 class="western" id="Depurando_scripts_de_contenido">Depurando scripts de contenido</h2>
<p>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 <font color="#000080"><span lang="zxx"><u><a href="https://developer.mozilla.org/es/Firefox/Multiprocess_Firefox">Firefox multiproceso</a></u></span></font>, los scripts de contenido se ejecutan en un proceso distinto del de otras partes de la add-on.</p>
<p>Para depurar scripts de contenido adjuntos a una página web, se deben usar las herramientas de desarrollo web normales para esa página:</p>
<ul>
<li>
<p style="margin-bottom: 0cm;">selecciona “Alternar 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)</p>
</li>
<li>
<p>o presiona el método abreviado del teclado <kbd>CtrlShiftI</kbd> (<kbd>CommandOptionI</kbd> en OS X).</p>
</li>
</ul>
<p>{{EmbedYouTube("f46hMLELyaI")}}</p>
<p>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 <code class="western"><a>console.log()</a></code> 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.</p>
<p>{{EmbedYouTube("Hx3GU_fEPeo")}}</p>
<div class="note">
<p>Este video usa el ejemplo <font color="#000080"><span lang="zxx"><u><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></u></span></font> de WebExtension.</p>
</div>
<div class="note">
<p style="line-height: 120%;">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.</p>
</div>
|
