mozilla

Revision 521423 of Depuración remota en Firefox para Android

  • Enlace amigable (slug) de la revisión: Tools/Remote_Debugging/Firefox_para_Android
  • Título de la revisión: Depuración remota en Firefox para Android
  • Id de la revisión: 521423
  • Creada:
  • Creador: pacommozilla
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

Esta guía explica como usar la depuración remota para inspeccionar o depurar código funcionando en Firefox para Android conectado por USB.

Esta guía se divide en dos partes: la primera parte, "Requisitos previos" cubre la materia que solo hay que hacer una vez, mientras que la segunda parte, "Conectando", cubre la materia que hay que hacer cada vez que conectas el dispositivo. 

Requisitos previos

Primero, lo que necesitará:

  • un ordenador de sobremesa o un portátil con Firefox funcionando
  • un dispositivo Android con capacidad de arrancar Firefox para Android con Firefox para Android funcionando en él
  • un cable USB que conecte ambos dispositivos

Configuración ADB

A continuación, necesitarás que el ordenador de sobremesa y el dispositivo Android hablen entre si utilizando la herramienta de la línea de comandos del adb.

En el dispositivo Android

En el ordenador de sobremesa

  • Instala la versión correcta del SDK de Android para tu dispositivo.
  • Utilizando el SDK de Android, instala las herramientas de la plataforma Android.
  • Las herramientas de la plataforma Android instalan adb en un subdirectorio llamado "platform-tools" dentro del directorio donde hayas instalado el Android SDK. Asegúrate que el directorio "platform-tools" aparece en la variable "path" de tu sistema operativo.

Para comprobar que funciona, abre en tu ordenador de escritorio la aplicación que te deja escribir comandos en línea del sistema operativo y teclea:

adb devices

Deberías ver una respuesta parecida a esta:

List of devices attached
51800F220F01564 device

(La cadena de texto hexadecimal será diferente.)

Si obtienes esto, entonces adb ha encontrado tu dispositivo y ha configurado correctamente el ADB.

Habilitar la depuración remota

A continuación, tienes que activar la depuración remota en el ordenador de escritorio y en el dispositivo Android.

Firefox para Android 24 y anteriores

Para habilitar la depuración remota en el dispositivo, tienes que ajustar la preferencia devtools.debugger.remote-enabled al valor true.

Ves a la dirección about:config con Firefox para Android, escribe "devtools" dentro del cuadro de búsqueda y pulsa la tecla Search. Verás todas las preferencias de DevTools. Busca la preferencia devtools.debugger.remote-enabled preference, y pulsa "Toggle".

Firefox para Android 25 y posteriores

En Firefox para Android 25 y posteriores, hay un elemento de menú para habilitar la depuración remota. Abre el menú, selecciona "Settings", luego "Developer tools" (en algunos dispositivos Android puede que necesites seleccionar "More" para ver la opción "Settings"). Marca la casilla "Remote debugging":

El navegador mostrará una notificación para recordarte que debes configurar el redireccionamiento de puertos, lo cuál haremos más adelante.

En el ordenador de escritorio

En el ordenador, la depuración remota se habilita  a través de un ajuste en la caja de herramientas. Abre la caja de herramientas, haz clic en el botón "Settings"  de la barra de herramientas, y marca "Enable remote debugging" en la pestaña de Settings:

Si estás utilizando una versión de Firefox anterior a la 27, tendrás que reiniciar el navegador para que se aplique la nueva configuración.

Verás una nueva opción en el menú "Web Developer" con la etiqueta  "Connect...":

Conectando

Ahora puedes conectar la herramienta de depuración remota con el dispositivo. En primer lugar, conecta el dispositivo al ordenador con un cable USB, si no lo has hecho todavía.

En el ordenador de escritorio

Ves al símbolo del sistema y teclea:

adb forward tcp:6000 tcp:6000

(Si has cambiado el valor que el dispositivo Android usa para el puerto de depuración, deberás modificarlo a este valor.)

Para Firefox OS, teclea:

adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

Tendrás que volver a ejecutar este comando cada vez que conectes físicamente el ordenador de escritorio y el dispositivo con el cable USB.

A continuación, ves al menú Web Developer menu del Firefox, y selecciona  "Connect...". Verás una página similar a la siguiente:

Si no has cambiado los números de puerto, elige 6000 y pulsa el botón 'Connect'.

En el dispositivo Android

A continuación verás un cuadro de diálogo en el dispositivo Android pidiéndote  que  confirmes la conexión:

Haz click en "OK". El ordenador de escritorio espera unos segundos para darte tiempo para que confirmes en el cuadro de diálogo: si se agota el tiempo de espera, solo tienes que volver a hacer click en "Connect" en el cuadro de diálogo del ordenador de escritorio.

En el ordenador de escritorio

A continuación, el ordenador te muestra un cuadro de diálogo parecido a este:

Te pregunta si quieres depurar el contenido de la web que se ejecuta en alguna pestaña del navegador, o depurar el código del propio navegador.

  • Verás una entrada por cada pestaña abierta debajo de "Available remote tabs",  y haciendo click sobre una conectarás la herramienta de depuración al contenido web de la pestaña. Si quieres depurar el contenido de tu web, elige la pestaña pertinente.
  • Verás una entrada debajo de "Available remote processes": este es el propio proceso del navegador. Elige esta opción si quieres depurar el código del navegador.

Elegimos conectarnos al sitio web mozilla.org.  Se abrirá una ventana con la Caja de herramientas, vinculada a la pestaña del Firefox para Android que muestra el sito de mozilla.org:

La caja de herramientas y las herramientas que contiene, funcionan de la misma manera que lo hacen cuando están conectadas a un contenido local.

Fuente de la revisión

<p>Esta guía explica como usar la <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">depuración remota </a>para inspeccionar o depurar código funcionando en <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox para Android </a>conectado por USB.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>Esta guía se divide en dos partes: la primera parte, "Requisitos previos" cubre la materia que solo hay que hacer una vez, mientras que la segunda parte, "Conectando", cubre la materia que hay que hacer cada vez que conectas el dispositivo.&nbsp;</p>
<h2 id="Requisitos_previos">Requisitos previos</h2>
<p>Primero, lo que necesitará:</p>
<ul>
 <li>un ordenador de sobremesa o un portátil con Firefox funcionando</li>
 <li>un dispositivo Android con <a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capacidad de arrancar Firefox para Android</a> con Firefox para Android funcionando en él</li>
 <li>un cable USB que conecte ambos dispositivos</li>
</ul>
<h3 id="Configuraci.C3.B3n_ADB">Configuración ADB</h3>
<p>A continuación, necesitarás que el ordenador de sobremesa y el dispositivo Android hablen entre si utilizando la herramienta de la línea de comandos del adb.</p>
<h4 class="note" id="En_el_dispositivo_Android">En el dispositivo Android</h4>
<ul>
 <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">Habilita la depuración USB (solo el paso 2 de este enlace)</a>.</li>
 <li>Conecta el dispositivo con el ordenador mediante el cable USB.</li>
</ul>
<h4 class="note" id="En_el_ordenador_de_sobremesa">En el ordenador de sobremesa</h4>
<ul>
 <li>Instala la versión correcta del <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">SDK de Android</a> para tu dispositivo.</li>
 <li>Utilizando el SDK de Android, instala las <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">herramientas de la plataforma Android</a>.</li>
 <li>Las herramientas de la plataforma Android instalan adb en un subdirectorio llamado "platform-tools" dentro del directorio donde hayas instalado el Android SDK. Asegúrate que el directorio "platform-tools" aparece en la variable "path" de tu sistema operativo.</li>
</ul>
<p>Para comprobar que funciona, abre en tu ordenador de escritorio la aplicación que te deja escribir comandos en línea del sistema operativo y teclea:</p>
<pre>
adb devices</pre>
<p>Deberías ver una respuesta parecida a esta:</p>
<pre>
List of devices attached
51800F220F01564 device
</pre>
<p>(La cadena de texto hexadecimal será diferente.)</p>
<p>Si obtienes esto, entonces <code>adb</code> ha encontrado tu dispositivo y ha configurado correctamente el ADB.</p>
<h3 id="Habilitar_la_depuraci.C3.B3n_remota">Habilitar la depuración remota</h3>
<p>A continuación, tienes que activar la depuración remota en el ordenador de escritorio y en el dispositivo Android.</p>
<h4 id="Firefox_para_Android_24_y_anteriores">Firefox para Android 24 y anteriores</h4>
<p>Para habilitar la depuración remota en el dispositivo, tienes que ajustar la preferencia <code>devtools.debugger.remote-enabled</code> al valor <code>true</code>.</p>
<p>Ves a la dirección <code>about:config</code> con Firefox para Android, escribe "devtools" dentro del cuadro de búsqueda y pulsa la tecla Search. Verás todas las preferencias de DevTools. Busca la preferencia <code>devtools.debugger.remote-enabled</code> preference, y pulsa "Toggle".</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<h4 class="note" id="Firefox_para_Android_25_y_posteriores">Firefox para Android 25 y posteriores</h4>
<p>En Firefox para Android 25 y posteriores, hay un elemento de menú para habilitar la depuración remota. Abre el menú, selecciona "Settings", luego "Developer tools" (en algunos dispositivos Android puede que necesites seleccionar "More" para ver la opción "Settings"). Marca la casilla "Remote debugging":</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>El navegador mostrará una notificación para recordarte que debes configurar el redireccionamiento de puertos, lo cuál haremos más adelante.</p>
<h4 id="En_el_ordenador_de_escritorio">En el ordenador de escritorio</h4>
<p>En el ordenador, la depuración remota se habilita&nbsp; a través de un ajuste en la caja de herramientas. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Abre la caja de herramientas</a>, haz clic en el botón "Settings"&nbsp; de la <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">barra de herramientas</a>, y marca "Enable remote debugging" en la pestaña de <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings</a>:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<div class="Note">
 Si estás utilizando una versión de Firefox anterior a la 27, tendrás que reiniciar el navegador para que se aplique la nueva configuración.</div>
<p>Verás una nueva opción en el menú "Web Developer" con la etiqueta&nbsp; "Connect...":</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<h2 id="Conectando">Conectando</h2>
<p>Ahora puedes conectar la herramienta de depuración remota con el dispositivo. En primer lugar, conecta el dispositivo al ordenador con un cable USB, si no lo has hecho todavía.</p>
<h4 class="note" id="En_el_ordenador_de_escritorio">En el ordenador de escritorio</h4>
<p>Ves al símbolo del sistema y teclea:</p>
<pre>
adb forward tcp:6000 tcp:6000</pre>
<p>(Si has cambiado el valor que el dispositivo Android usa para el puerto de depuración, deberás modificarlo a este valor.)</p>
<p>Para Firefox OS, teclea:</p>
<pre>
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre>
<p>Tendrás que volver a ejecutar este comando cada vez que conectes físicamente el ordenador de escritorio y el dispositivo con el cable USB.</p>
<p>A continuación, ves al menú Web Developer menu del Firefox, y selecciona&nbsp; "Connect...". Verás una página similar a la siguiente:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;" />Si no has cambiado los números de puerto, elige 6000 y pulsa el botón 'Connect'.</p>
<h4 class="note" id="En_el_dispositivo_Android">En el dispositivo Android</h4>
<div class="mttextarea" dir="ltr" id="TranslationOutput">
 <div name="div[0]">
  <span>A </span><span _mstdst="0_2:13" _mstsrc="0_0:3" id="Dst[0][0:3:2:13]">continuación</span><span> </span><span _mstdst="0_15:24" _mstsrc="0_5:14" id="Dst[0][5:14:15:24]">verás</span><span> </span><span _mstdst="0_26:27" _mstsrc="0_16:16" id="Dst[0][16:16:26:27]">un</span><span> cuadro de </span><span _mstdst="0_39:45" _mstsrc="0_18:23" id="Dst[0][18:23:39:45]">diálogo</span><span> </span><span _mstdst="0_47:48" _mstsrc="0_25:26" id="Dst[0][25:26:47:48]">en</span><span> </span><span _mstdst="0_50:51" _mstsrc="0_28:30" id="Dst[0][28:30:50:51]">el</span><span> </span><span _mstdst="0_53:63" _mstsrc="0_40:45" id="Dst[0][40:45:53:63]">dispositivo</span><span> </span><span _mstdst="0_65:71" _mstsrc="0_32:38" id="Dst[0][32:38:65:71]">Android</span><span> pidiéndote&nbsp; que&nbsp;</span><span> </span><span _mstdst="0_87:95" _mstsrc="0_61:67" id="Dst[0][61:67:87:95]">confirmes</span><span> </span><span _mstdst="0_97:98" _mstsrc="0_69:71" id="Dst[0][69:71:97:98]">la</span><span> </span><span _mstdst="0_100:107" _mstsrc="0_73:82" id="Dst[0][73:82:100:107]">conexión</span>:</div>
</div>
<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;" />Haz click en "OK". El ordenador de escritorio espera unos segundos para darte tiempo para que confirmes en el cuadro de diálogo: si se agota el tiempo de espera, solo tienes que volver a hacer click en "Connect" en el cuadro de diálogo del ordenador de escritorio.</p>
<h4 class="note" id="En_el_ordenador_de_escritorio">En el ordenador de escritorio</h4>
<p>A continuación, el ordenador te muestra un cuadro de diálogo parecido a este:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;" />Te pregunta si quieres depurar el contenido de la web que se ejecuta en alguna pestaña del navegador, o depurar el código del propio navegador.</p>
<ul>
 <li>Verás una entrada por cada pestaña abierta debajo de "Available remote tabs",&nbsp; y haciendo click sobre una conectarás la herramienta de depuración al contenido web de la pestaña. Si quieres depurar el contenido de tu web, elige la pestaña pertinente.</li>
 <li>Verás una entrada debajo de "Available remote processes": este es el propio proceso del navegador. Elige esta opción si quieres depurar el código del navegador.</li>
</ul>
<p>Elegimos conectarnos al sitio web mozilla.org.&nbsp; Se abrirá una ventana con la Caja de herramientas, vinculada a la pestaña del Firefox para Android que muestra el sito de mozilla.org:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>La caja de herramientas y las herramientas que contiene, funcionan de la misma manera que lo hacen cuando están conectadas a un contenido local.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
Revertir a esta revisión