diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/tools/remote_debugging | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/es/tools/remote_debugging')
3 files changed, 289 insertions, 0 deletions
diff --git a/files/es/tools/remote_debugging/debugging_over_a_network/index.html b/files/es/tools/remote_debugging/debugging_over_a_network/index.html new file mode 100644 index 0000000000..3eae277997 --- /dev/null +++ b/files/es/tools/remote_debugging/debugging_over_a_network/index.html @@ -0,0 +1,10 @@ +--- +title: Debugging over a network +slug: Tools/Remote_Debugging/Debugging_over_a_network +translation_of: 'Tools/about:debugging#Connecting_over_the_Network' +--- +<blockquote> +<h3 id="draft">{{draft}}</h3> +</blockquote> + +<p>Coming soon...</p> diff --git a/files/es/tools/remote_debugging/firefox_para_android/index.html b/files/es/tools/remote_debugging/firefox_para_android/index.html new file mode 100644 index 0000000000..497d026a34 --- /dev/null +++ b/files/es/tools/remote_debugging/firefox_para_android/index.html @@ -0,0 +1,132 @@ +--- +title: Depuración remota en Firefox para Android +slug: Tools/Remote_Debugging/Firefox_para_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +<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. </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ón_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 sobremesa 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 ésto, entonces <code>adb</code> ha encontrado tu dispositivo y has configurado correctamente el ADB.</p> + +<h3 id="Habilitar_la_depuración_remota">Habilitar la depuración remota</h3> + +<p>A continuación, tienes que activar la depuración remota en el ordenador de sobremesa y en el dispositivo Android.</p> + +<h4 id="Firefox_versión_24_y_anteriores_para_Android">Firefox versión 24 y anteriores para Android</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>Introduce la dirección <code>about:config</code> en 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_versión_25_y_posteriores_para_Android">Firefox versión 25 y posteriores para Android</h4> + +<p>En Firefox v.25 y posteriores para Android, 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_sobremesa_2">En el ordenador de sobremesa</h4> + +<p>En el ordenador, la depuración remota se habilita 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" 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 "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="Conectarse">Conectarse</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_sobremesa_3">En el ordenador de sobremesa</h4> + +<p>Ve 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><code>adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket</code></pre> + +<p>Tendrás que volver a ejecutar este comando cada vez que conectes físicamente el ordenador de sobremesa y el dispositivo con el cable USB.</p> + +<p>A continuación, ve al menú Web Developer del Firefox, y selecciona "Connect...". Verás una página parecida a ésta:</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_2">En el dispositivo Android</h4> + +<div class="mttextarea" dir="ltr" id="TranslationOutput"> +<div><span>A </span><span id="Dst[0][0:3:2:13]">continuación</span><span> </span><span id="Dst[0][5:14:15:24]">verás</span><span> </span><span id="Dst[0][16:16:26:27]">un</span><span> cuadro de </span><span id="Dst[0][18:23:39:45]">diálogo</span><span> </span><span id="Dst[0][25:26:47:48]">en</span><span> </span><span id="Dst[0][28:30:50:51]">el</span><span> </span><span id="Dst[0][40:45:53:63]">dispositivo</span><span> </span><span id="Dst[0][32:38:65:71]">Android que pide </span><span>que </span><span> </span><span id="Dst[0][61:67:87:95]">confirmes</span><span> </span><span id="Dst[0][69:71:97:98]">la</span><span> </span><span 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 sobremesa 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 sobremesa.</p> + +<h4 class="note" id="En_el_ordenador_de_sobremesa_4">En el ordenador de sobremesa</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", 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. 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> diff --git a/files/es/tools/remote_debugging/index.html b/files/es/tools/remote_debugging/index.html new file mode 100644 index 0000000000..4164a78241 --- /dev/null +++ b/files/es/tools/remote_debugging/index.html @@ -0,0 +1,147 @@ +--- +title: Depurado Remoto +slug: Tools/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +<p>You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a> (new in Firefox 26)</li> + <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li> + <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li> +</ul> + +<p>This guide explains how to get set up to debug code running in Firefox for Android over USB. The other main application for remote debugging is to debug code running in the Firefox OS Simulator, but that's covered separately, in the <a href="/en-US/docs/Tools/Firefox_OS_Simulator#Attaching_developer_tools" title="/en-US/docs/Tools/Firefox_OS_Simulator#Attaching_developer_tools">Firefox OS Simulator documentation</a>.</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>This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. </p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>First, you'll need:</p> + +<ul> + <li>a desktop or laptop computer with Firefox running on it</li> + <li>an Android device <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">capable of running Firefox for Android</a> with Firefox for Android running on it</li> + <li>a USB cable to connect the two devices</li> +</ul> + +<h3 id="ADB_setup">ADB setup</h3> + +<p>Next, you'll need to get the desktop and the Android device talking to each other using the <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> command-line tool.</p> + +<h4 class="note" id="On_the_Android_device"><strong>On the Android device</strong></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">Enable USB debugging (step 2 of this link only)</a>.</li> + <li>Attach the device to the desktop via USB.</li> +</ul> + +<h4 class="note" id="On_the_desktop"><strong>On the desktop</strong></h4> + +<ul> + <li>Install the correct version of the <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> for your device.</li> + <li>Using the Android SDK, install the <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a>.</li> + <li>Android Platform Tools installs adb in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path.</li> +</ul> + +<p>To check it worked, open up a command shell on the desktop and type:</p> + +<pre>adb devices</pre> + +<p>You should see some output like:</p> + +<pre>List of devices attached +51800F220F01564 device +</pre> + +<p>(The long hex string will be different.)</p> + +<p>If you do, then <code>adb</code> has found your device and you've successfully set up ADB.</p> + +<h3 id="Enable_remote_debugging">Enable remote debugging</h3> + +<p>Next, you need to enable remote debugging on both the Android device and the desktop.</p> + +<h4 id="Firefox_for_Android_24_and_earlier">Firefox for Android 24 and earlier</h4> + +<p>To enable remote debugging on the device, you need to set the <code>devtools.debugger.remote-enabled</code> preference to <code>true</code>.</p> + +<p>Go to <code>about:config</code> in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the <code>devtools.debugger.remote-enabled</code> preference, and press "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_for_Android_25_and_later">Firefox for Android 25 and later</h4> + +<p>On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:</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>The browser will display a notification reminding you to set up port forwarding, which we'll do later on.</p> + +<h4 id="On_the_desktop_2"><strong>On the desktop</strong></h4> + +<p>On the desktop, remote debugging is enabled by a setting in the Toolbox. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Open the Toolbox</a>, click the "Settings" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>, and check "Enable remote debugging" in the <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings </a>tab:</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;">Restart the browser, and you'll see a new option in the Web Developer menu labeled "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="Connecting">Connecting</h2> + +<p>Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.</p> + +<div style="margin-left: 25%; padding: 1em; border: solid rgb(245, 242, 240) 3px; margin-bottom: 2em;"> +<div class="note"><strong>On the desktop</strong></div> + +<p>Go to a command prompt, and type:</p> + +<pre>adb forward tcp:6000 tcp:6000</pre> + +<p>(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)</p> + +<p>For Firefox OS, type:</p> + +<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + +<p>You'll need to reissue this command each time you physically attach desktop and device with the USB cable.</p> + +<p>Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:</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;">Unless you've changed the port numbers, choose 6000 and press the "Connect" button.</p> +</div> + +<div style="margin-right: 25%; padding: 1em; border: solid rgb(245, 242, 240) 3px; margin-bottom: 2em;"> +<div class="note"><strong>On the Android device</strong></div> + +<p>Next you'll see a dialog on the Android device asking you to confirm the connection:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.</p> +</div> + +<div style="margin-left: 25%; padding: 1em; border: solid rgb(245, 242, 240) 3px; margin-bottom: 2em;"> +<div class="note"><strong>On the desktop</strong></div> + +<p>Next, the desktop shows you a dialog that looks something like this:</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;">This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.</p> + +<ul> + <li>You'll see one entry under "Available remote tabs" for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab. If you want to debug your web content, you'll choose the relevant content tab.</li> + <li>You'll see one entry under "Available remote processes": this is the browser process itself. You'll choose this option if you want to debug the browser's own code.</li> +</ul> + +<p>Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting 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>The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +</div> + +<p> </p> + +<p> </p> |