diff options
Diffstat (limited to 'files/es/tools/debugger')
-rw-r--r-- | files/es/tools/debugger/how_to/disable_breakpoints/index.html | 13 | ||||
-rw-r--r-- | files/es/tools/debugger/how_to/index.html | 11 | ||||
-rw-r--r-- | files/es/tools/debugger/how_to/set_a_breakpoint/index.html | 44 | ||||
-rw-r--r-- | files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html | 36 | ||||
-rw-r--r-- | files/es/tools/debugger/index.html | 214 | ||||
-rw-r--r-- | files/es/tools/debugger/source_map_errors/index.html | 70 |
6 files changed, 388 insertions, 0 deletions
diff --git a/files/es/tools/debugger/how_to/disable_breakpoints/index.html b/files/es/tools/debugger/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..44e2669bd0 --- /dev/null +++ b/files/es/tools/debugger/how_to/disable_breakpoints/index.html @@ -0,0 +1,13 @@ +--- +title: Disable breakpoints +slug: Tools/Debugger/How_to/Disable_breakpoints +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +<p><font><font>Para desactivar un punto de interrupción, desactive la casilla de verificación junto a la entrada del punto de interrupción en el </font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane" title="# fuente-list-panel"><font><font>panel de lista de </font></font></a><font><font>Fuente:</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9823/debugger-disable-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;"><font><font>Alternativamente, activar el menú contextual, mientras que el puntero del ratón está sobre la entrada del punto de interrupción en el panel de lista de fuentes y seleccione "breakpoint Desactivar" </font></font><br> + <font><font>También es posible eliminar un punto de interrupción con sólo hacer clic en el círculo azul que representa la misma.</font></font></p> + +<p><font><font>Para activar / desactivar todos los puntos de interrupción, utilice el "Cambia todos los puntos de ruptura" botón en el </font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane"><font><font>panel de lista de </font></font></a><font><font>Fuente:</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9825/debugger-disable-all-breakpoints.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/es/tools/debugger/how_to/index.html b/files/es/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..d77ec65938 --- /dev/null +++ b/files/es/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +<p><span class="seoSummary">These articles describe how to use the debugger.</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/es/tools/debugger/how_to/set_a_breakpoint/index.html b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..49376ffc9e --- /dev/null +++ b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,44 @@ +--- +title: Set a breakpoint +slug: Tools/Debugger/How_to/Set_a_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +<div>{{ToolsSidebar}}</div> + +<p>Puedes establecer una interrupción incondicional en una de las siguientes maneras:</p> + +<ul> + <li>en el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">panel de fuente</a>, haz clic en el número de línea para la línea que deseas la interrupción</li> + <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, activate the context menu while on the line you want to break at, and select "Add breakpoint"</li> + <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, highlight the line you want to break at and press <kbd>Ctrl</kbd> + <kbd>B</kbd> (Windows/Linux) or <code>Cmd</code> + <kbd>B</kbd> (macOS)</li> +</ul> + +<p>When you display the context menu, you have a choice of setting either a breakpoint that will pause code execution when it reaches that line, an unconditional breakpoint, or a conditional breakpoint that will only pause the code if the conditions you define are met:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16433/set_breakpoint.png" style="border: 1px solid black; display: block; height: 353px; margin: 0 auto; width: 593px;"></p> + +<p>If you choose to set a conditional breakpoint, you will be able to add the condition:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16436/edit_conditional_breakpoint.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></p> + +<p>Each breakpoint is shown in two places in the debugger:</p> + +<ul> + <li>the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">breakpoints list</a> shows the filename and line number for the breakpoint + + <p><img alt="" src="https://mdn.mozillademos.org/files/16434/list_breakpoints.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 313px;"></p> + </li> + <li>the line in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a> is marked with a blue arrow if you set an unconditional breakpoint, or an orange arrow if the breakpoint is <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">conditional</a>. <img alt="" src="https://mdn.mozillademos.org/files/16435/breakpoints_in_code.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></li> +</ul> + +<p>Starting in Firefox 67, you can set a column breakpoint on a complex line of code, such as one that makes multiple function calls. For example, if you try to set a breakpoint on the following line, you will have three possible locations for a breakpoint: at the point where the variable value is set, at the call to <code>parse</code>, or at the call to <code>getItem</code>.</p> + +<pre class="brush: js">tasks = JSON.parse(localStorage.getItem('todoList'));</pre> + +<p>Possible breakpoints are shown with indicators. The following image shows the line in the debugger. As soon as you click on the line, the three indicators show the possible breakpoints. The default breakpoint is set to the first column. In the image, the second column breakpoint was chosen which you can confirm in the Breakpoints section on the right where it shows that the breakpoint is on the call to <code>parse</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16576/column_breakpoint.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p> + +<p>Column breakpoints allow you to break at multiple points on the same line. In the previous example, you could have selected both the call to <code>parse </code>and the call to <code>getItem</code>, or even all three columns to break at each of the possible locations.</p> + +<p>In cases where you set breakpoints on multiple columns, the currently active columns breakpoint will be highlighted in the Breakpoints side panel.</p> diff --git a/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html b/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html new file mode 100644 index 0000000000..30e60902cd --- /dev/null +++ b/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html @@ -0,0 +1,36 @@ +--- +title: Uso de un mapa fuente +slug: Tools/Debugger/How_to/Uso_de_un_mapa_fuente +tags: + - Debug + - mapa fuente + - source map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +<div>{{ToolsSidebar}}</div> + +<p>Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:</p> + +<ul> + <li>los fuentes a menudo se combinan y minifican para hacer la transferencia desde el servidor más eficiente.</li> + <li>el código JavaScript que se ejecuta en una página a menudo es generado automáticamente. Como el compilado desde los lenguajes <a href="http://coffeescript.org/">CoffeeScript</a> o <a href="http://www.typescriptlang.org/">TypeScript</a>.</li> +</ul> + +<p>En estas situaciones, es mucho más fácil depurar el código fuente en el estado original, que el fuente en el estado transformado que el navegador ha descargado. Un <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">mapa fuente</a> es un fichero que mapea el código transformado hacia el estado original, permitiendo al navegador reconstruir el fuente original y presentar el código original en el debugger.</p> + +<p>Para habilitar al debugger trabajar con un mapa fuente, debes:</p> + +<ul> + <li>generar el mapa fuente</li> + <li>incluir un comentario en el fichero transformado, apuntando al mapa fuente. La sintaxis del comentario es la siguiente:</li> +</ul> + +<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre> + +<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p> + +<p>En el video anterior, cargamos <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. Esta página carga un fuente llamado "main.js" que fue originalmente escrito en CoffeeScript y compilado a JavaScript. El fuente compilado contiene un comentario como el siguiente, que apunta al mapa fuente:</p> + +<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre> + +<p>En el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">panel de fuentes</a> del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.</p> diff --git a/files/es/tools/debugger/index.html b/files/es/tools/debugger/index.html new file mode 100644 index 0000000000..7d869dccf3 --- /dev/null +++ b/files/es/tools/debugger/index.html @@ -0,0 +1,214 @@ +--- +title: Depurador +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +<p>{{ToolsSidebar}}</p> + +<div class="note"> +<p>Esta página describe el depurador de JavaScript como se muestra en Firefox 52 y superiores, en Firefox Nightly y Firefox Developer Edition.</p> + +<p>Para ver como luce en versiones anteriores de firefox ó en Firefox Beta y Release, ver <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Depurador (anterior a Firefox 52)</a>.</p> + +<p>Si obtienes esta version del Depurador y requires cambiar a la version anterior, lo puedes hacer visitando about:config y cambiando la preferencia de "devtools.debugger.new-debugger-frontend" a <code>false</code> .</p> +</div> + +<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> + +<p>El depurador te permite inspeccionar paso a paso el código de JavaScript y examinar o modificar su estado ayudando a eliminar errores.</p> + +<p>Puedes usarlo para depurar código local o remoto, por ejemplo en un dispositivo Android ejecutando Firefox para Android. Ver acerca del<a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging"> depurador remoto </a>para aprender como depurar un objetivo remoto.j</p> + +<p>{{ fx_minversion_header("15.0") }}</p> + +<p>El depurador JavaScript está disponible en dos variedades: una para depurar contenido que se ejecuta directamente en Firefox, y otra que te permite depurar contenido que se está ejecutando en un dispositivo con Firefox OS , o en Firefox en un dispositivo Android. La principal diferencia entre los dos es que el Depurador Remoto se ejecuta en su propia ventana, mientras que el depurador de contenido web se ejecuta en la misma pestaña de la Web que se está depurando.</p> + +<h2 id="Iniciar_el_depurador">Iniciar el depurador</h2> + +<h3 id="Depurando_contenido_web">Depurando contenido web</h3> + +<p>Para ejecutar contenido Web ejecutado directamente en Firefox (no importa si está guardado localmente en tu equipo o en un servidor), seleccione la opción Depurador del Menú Desarrollador Web en Herramientas.</p> + +<p>Una vez que ha <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up" title="/ en-US / docs / Mozilla / Firefox_OS / Debugging / Setting_up">configurado Firefox y Firefox OS para soportar depuración</a>, puede usar el Depurador Remoto para depurar su código ejecutado en un dispositivo Firefox OS o en el simulador de Firefox OS.</p> + +<p>A fin de depurar código JavaScript ejecutado en un dispositivo Firefox OS o Android, debe verificar que el dispositivo este conectado al puerto USB y que ese <code>lsusb</code> y <code>adb</code> pueden verlo. Entonces deberá re-enviar el puerto TCP apropiado al dispositivo abriendo una ventana de terminal y digitando el siguiente comando:</p> + +<pre class="notranslate">adb forward tcp:6000 tcp:6000</pre> + +<div class="note"> +<p><strong>Recuerda:</strong> D<span class="rangySelectionBoundary" id="selectionBoundary_1428470313580_2070723245854429" style="display: none; line-height: 0;"></span>eberás re-enviar el puerto cada vez que reinicies el dispositivo.</p> +</div> + +<p>Ahora puede abrir el depurador del menú de desarrolladores. Le pedirá especificar la dirección IP y el puerto al que se quiere conectar. Dé click en "ok" y puede iniciar la depuración.</p> + +<p><img alt="Un vistazo rápido a cómo se ve el depurador remoto" src="/files/4373/remote-debugger-started.png" style="height: 457px; width: 961px;"></p> + +<p>Llegado a este punto, el depurador no está ejecutandose todavía, debido a que no se han puesto puntos de ruptura o breakpoints. El dispositivo solo permanece a la espera. De hecho, en las siguientes secciones se explica como usar el depurador. </p> + +<h2 id="La_Barra_del_Depurador">La Barra del Depurador</h2> + +<p>La barra de herramientas tiene diversos controles:</p> + +<p><img alt="PNG del diagrama de barra de herramientas etiquetado" src="/files/4381/Remote%20Debugger%20Toolbar.png" style="height: 157px; width: 868px;"></p> + +<dl> + <dt>Pause/Resume (F6)</dt> + <dd>Pausa o reanuda la ejecución de un script que estas depurando.</dd> + <dt>Step Over (F7)</dt> + <dd>Pausa la linea en curso de codigo JavaScript.</dd> + <dt>Step Into (F8)</dt> + <dd>Pausa la llamada a la función de la linea en curso del código JavaScript.</dd> + <dt>Step Out (Shift-F8)</dt> + <dd>Ejecuta el script hasta que termina la ejecución de la función.</dd> + <dt>Script Chooser (Ctrl-P or Cmd-P)</dt> + <dd>Este pop-up menu te deja seleccionar uno de los scripts en ejecución para leer su código, colocar puntos de ruptura, y continuar.</dd> + <dt>Script Filter</dt> + <dd>Este filtro de script (que también funciona como caja de busquedas) nos deja introducir una cadena para filtrar que scripts deben aparecer en el Buscador de Script. Consulte {{anch("Using the script filter")}} a continuación.</dd> + <dt>Expandir Paneles</dt> + <dd>Expande o contrae la ventana para mostar u ocultar los paneles laterales.</dd> + <dt>Debugger Options</dt> + <dd>Aparece un menu en una ventana emergente dejandote configurar el depurador. Consulte {{anch("Opciones de depuración")}} a continuación.</dd> +</dl> + +<div class="note"> +<p>Nota: El depurador de contenido Web tiene un icono de Cierre al principio de la barra de tareas; puedes usarlo para cerrar el depurador.</p> +</div> + +<h3 id="Usando_el_filtro_de_Scripts">Usando el filtro de Scripts</h3> + +<p>Cuando haces clic en el filtro de script de la barra de herramientas, puedes introducir una cadena para filtrar el menú de selección de script para que solo muestre los scripts seleccionados. Además, como puede ver al hacer clic en esta caja, hay operadores especiales que puedes usar para utilizar el cuadro como ventana de busqueda, así como para otras utilidades. Cada uno de estos operadores especiales tiene un atajo de teclado que automáticamente te lleva a la ventana de filtros e insertará el operador en el cuadro por usted, para que pueda comenzar a escribir.</p> + +<p><img alt="Captura de pantalla del panel emergente del operador del cuadro de búsqueda." src="/files/4393/operator-popup.png" style="height: 146px; width: 199px;"></p> + +<dl> + <dt>Search in all files - ! (Cmd-Opt-F)</dt> + <dd>Busca el texto que ingresa en todos los scripts en ejecución. Esto agrega un panel justo debajo de la barra de herramientas que muestra todos los archivos coincidentes, cada uno con un cuadro de divulgación que le permite ver las coincidencias encontradas dentro de él.</dd> + <dt>Find in this file - # (Cmd-F)</dt> + <dd>Busca el texto que ingresas en el archivo que estás viendo actualmente.</dd> + <dt>Jump to line - : (Cmd-J)</dt> + <dd>Salta al numero de línea que has introducido en la ventana.</dd> + <dt>Filter variables - * (Cmd-Opt-V)</dt> + <dd>Filtra las variables mostradas para incluir solo aquellas que coinciden con la cadena especificada.</dd> +</dl> + +<h3 id="Opciones_del_depurador">Opciones del depurador</h3> + +<p>El icono de Opciones del depurador, cuando cliqueas, presenta un menu de opciones emergente que te deja ajustar el comportamiento del depurador.</p> + +<dl> + <dt>Pausa en excepciones</dt> + <dd>Cuando esta opción esta marcada, la ejecución del script se pausará automáticamente cada vez que se produzca una excepción de JavaScript.</dd> + <dt>Mostrar paneles al inicio</dt> + <dd>Cuando esta opción esta marcada, los dos paneles de la barra lateral del depurador son visibles cuando se inicia el depurador por primera vez; por defecto, no se ven.</dd> + <dt>Mostrar propiedades ocultas</dt> + <dd>Si no marcas esta opción, las propiedades de JavaScript ocultas (es decir, aquellas que son no-enumerables) no se muestran.</dd> + <dt>Mostrar cuadro de busqueda de variables</dt> + <dd>Habilitar esta opción agrega un cuadro de búsqueda "Filtrar variables" al panel de variables, que pueda filtrar la lista de variables que se muestra.</dd> +</dl> + +<h2 id="Uso_del_depurador">Uso del depurador</h2> + +<p>El depurador de JavaScript tiene la mayoría de las características estándar que espera en un depurador moderno.</p> + +<h3 id="Breakpoints">Breakpoints</h3> + +<p>Puede establecer un punto de interrupción eligiendo el archivo en el que desea establecer un punto de interrupción (si aún no lo está mirando) utilizando el menú desplegable del selector de guiones y luego haciendo clic en la columna del número de línea, a la izquierda del to the left of the line number itself, en la línea de código en la que desea establecer un punto de interrupción.También puede hacer clic con el botón derecho en el código, en la línea en la que desea crear un punto de interrupción, y usar el menú contextual resultante para crear un punto de interrupción (Ctrl + B o Cmd-B) o un punto de interrupción condicional (Ctrl + Shift + B o Cmd-Shift-B)</p> + +<p>Por ejemplo, usemos el depurador remoto para establecer un punto de interrupción que se active siempre que baje la barra de notificaciones. Para hacer eso, elija "app://system.gaiamobile.org/js/quick_settings.js" (esta es la aplicación de configuración rápida que aparece cuando despliega la barra de notificaciones). Vaya al método <code>handleEvent()</code> y haga clic a la izquierda de la primera línea de código. Esto agregará un indicador de punto de interrupción azul al lado de esa línea, como este:</p> + +<p><img alt="Imagen que muestra cómo se ve un punto de interrupción establecido" src="/files/4395/set-breakpoint.png" style="border-style: solid; border-width: 1px; height: 45px; width: 404px;"></p> + +<p>Puede volver a desactivar el punto de interrupción, por supuesto, haciendo clic en ese indicador de punto de interrupción nuevamente. La parte inferior del panel de la pila también muestra una lista de todos los puntos de interrupción establecidos actualmente. Consulte {{anch ("Gestión de puntos de interrupción")}} para obtener detalles sobre las cosas que puede hacer con esta lista.</p> + +<p>Ahora, despliegue la barra de notificaciones en su dispositivo. La barra se desplegará y luego se encenderá el punto de interrupción cuando la aplicación reciba su primer evento. Si no tiene los paneles mostrados, se abrirán en este momento (para mostrarle el marco de la pila, la visualización de variables, etc.). El depurador, en este punto, se verá así:</p> + +<p><img alt="Una imagen que muestra cómo se ve cuando se alcanza un punto de interrupción." src="/files/4397/breakpoint-reached.png"></p> + +<p>Mientras tanto, su dispositivo se verá así:</p> + +<p><img alt="Imagen que muestra cómo se ve el dispositivo cuando se activa el punto de interrupción de muestra." src="/files/4399/breakpoint-device.png" style="height: 480px; width: 320px;"></p> + +<p><font><font>Puede hacer clic hacia adelante y hacia atrás en el marco de la pila para ver el historial de llamadas. </font><font>Al hacer clic en "ut_onTouchEnd" en el panel del marco de la pila, se mostrará el código </font></font><code>app://system.gaiamobile.org/js/utility_tray.js</code><font><font>que manejó el evento que ocurrió cuando quitó el dedo de la pantalla después de bajar la bandeja de notificaciones, por ejemplo.</font></font></p> + +<p><font><font>Puede usar los botones de reanudar, pasar, entrar y salir de la barra de herramientas como en cualquier depurador típico, para recorrer el código. </font><font>La siguiente línea de código para ejecutar tiene una flecha verde a su izquierda. </font><font>Por supuesto, puede establecer y eliminar puntos de interrupción, examinar variables, etc. mientras lo hace.</font></font></p> + +<p><font><font>El canalón a la derecha del código fuente tiene indicadores azules en los que puede hacer clic para desplazarse rápidamente hasta el punto de interrupción correspondiente.</font></font></p> + +<h4 id="Puntos_de_interrupción_condicionales"><font><font>Puntos de interrupción condicionales</font></font></h4> + +<p><font><font>Los puntos de interrupción condicionales son un tipo especial de punto de interrupción que se activa solo cuando una expresión de JavaScript determinada es verdadera. </font><font>Para establecer un punto de interrupción condicional, haga clic derecho en una línea de código y elija "Agregar punto de interrupción condicional" (o presione Ctrl + Shift + B / Cmd-Shift-B). </font><font>También puede crear un punto de interrupción regular y luego agregar una condición haciendo clic con el botón derecho en la lista de puntos de interrupción en la esquina inferior izquierda de la ventana del depurador.</font></font></p> + +<p><font><font>Luego puede ingresar una condición que debe ser verdadera para que se active el punto de interrupción:</font></font></p> + +<p><img alt="El cuadro para configurar un punto de interrupción condicional" src="/files/4431/cond-breakpoint-box.png" style="height: 115px; width: 458px;"></p> + +<p><font><font>Ahora, cuando se alcanza la línea de código correspondiente, solo se detendrá la ejecución de la expresión si </font></font><code>evt.type == 'click'</code><font><font>es verdadera.</font></font></p> + +<h4 id="Gestionar_puntos_de_interrupción"><font><font>Gestionar puntos de interrupción</font></font></h4> + +<p><font><font>Puede administrar los puntos de interrupción que ha establecido utilizando la lista de puntos de interrupción en el lado inferior izquierdo de la ventana del depurador. </font><font>Activar y desactivar la casilla de verificación en cualquier punto de interrupción activa y desactiva el punto de interrupción. </font><font>Al hacer clic en cualquier punto de interrupción condicional, aparecerá el panel de edición de puntos de interrupción condicional, como se ve en {{anch ("Puntos de interrupción condicionales")}}.</font></font></p> + +<p><font><font>Puede obtener opciones adicionales haciendo clic derecho en cualquier punto de interrupción:</font></font></p> + +<dl> + <dt><font><font>Eliminar todos los puntos de interrupción</font></font></dt> + <dd><font><font>Elimina todos los puntos de interrupción actuales.</font></font></dd> + <dt><font><font>Habilitar todos los puntos de interrupción</font></font></dt> + <dd><font><font>Habilita todos los puntos de interrupción actuales. </font><font>Este es un atajo para alternar en las casillas de verificación junto a todos los puntos de interrupción.</font></font></dd> + <dt><font><font>Deshabilitar todos los puntos de interrupción</font></font></dt> + <dd><font><font>Desactiva (sin eliminar) todos los puntos de interrupción. </font><font>Este es un atajo para desactivar las casillas de verificación junto a todos los puntos de interrupción.</font></font></dd> + <dt><font><font>Habilitar a otros</font></font></dt> + <dd><font><font>Habilita todos los puntos de interrupción excepto el que hizo clic con el botón derecho.</font></font></dd> + <dt><font><font>Deshabilitar a otros</font></font></dt> + <dd>Disables all breakpoints except the one you right-clicked.</dd> + <dt>Remove others</dt> + <dd>Removes all breakpoints except the one you right-clicked.</dd> + <dt>Configure conditional breakpoint</dt> + <dd>Configures the conditional breakpoint on which you right-clicked. If the breakpoint isn't a conditional one, you can add a condition and turn it into a conditional breakpoint.</dd> + <dt>Disable breakpoint</dt> + <dd>Disables the breakpoint you right-clicked.</dd> + <dt>Enable breakpoint</dt> + <dd>Enables the breakpoint you right-clicked.</dd> +</dl> + +<h3 id="The_variable_panel">The variable panel</h3> + +<p><img alt="Primera toma del panel variable" src="/files/4403/variable-panel1.png" style="border-style: solid; border-width: 1px; float: left; height: 609px; margin: 8px; width: 208px;">Most of the right-hand pane in the debugger is occupied by the variables available in the scope you're currently viewing. As seen here, it shows the variables for the local scope of the currently executing function (in this case, <code>qs_handleEvent()</code>), the calling function (here it's <code>ut_show()</code>), and the global scope (the {{domxref("Window")}} object, in this case).</p> + +<p>Each object can be expanded using a disclosure triangle to show its members, thereby revealing its contents. You can change a variable's value by clicking on its current value and entering a new one; for example, if you click on the "true" next to <code>geolocationEnabled</code>, you can type "false" to set the value to <code>false</code>. Variables whose values you've edited are highlighted in yellow, like this:</p> + +<p><img alt="Ejemplo de cómo se ve una variable modificada." src="/files/4405/changed-variable.png" style="height: 26px; width: 198px;"></p> + +<p>Pointing your cursor at a variable provides a tooltip that provides additional information about the variable; for example, pointing at the <code>evt</code> object says "<s>configurable</s> enumerable writable". This tells you that the <code>evt</code> object is not configurable, but is enumerable and writable. See <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/ es-US / docs / JavaScript / Reference / Global_Objects / Object / defineProperty"><code>Object.defineProperty()</code></a> for details on what these property descriptors mean.</p> + +<p>If you've enabled the filter variables box, as shown in the screenshot, you can reduce clutter in this list to limit the list to showing only the things you really want to see. This search is even recursive; it will search through sub-objects. Typing "blue", for example, restricts the list to the <code>this.bluetooth</code> object in the <code>qs_handleEvent()</code> function's scope, and the <code>Bluetooth</code> and <code>BluetoothTransfer</code> objects in the global scope.</p> + +<h3 class="cleared" id="Watch_expressions">Watch expressions</h3> + +<p>Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.</p> + +<p>Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear.</p> + +<p>For example, let's say we're stepping through some code and we want to quickly know what the value of a variable <code>a</code> multiplied by two is, without having to be bothered with any tedious "thinking". We can enter the expression a*2 into the "Add a watch expression box" and hit enter, set an appropriate breakpoint, and run our code.</p> + +<p>When our breakpoint is reached, let's say the value of <code>a</code> is 1. The resulting display looks like this:</p> + +<p><img alt="Cómo se ve una expresión de reloj despedido" src="/files/4433/watch-expression-fired.png" style="height: 105px; width: 209px;"></p> + +<p>You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.</p> + +<h2 id="Stopping_the_debugger">Stopping the debugger</h2> + +<p><font><font>Cuando haya terminado de depurar, si lo desea, puede desactivar la depuración remota en el dispositivo abriendo la aplicación Configuración y luego eligiendo Información del dispositivo. </font><font>En esa página, verá un botón Más información. </font><font>Toque eso, luego en la página siguiente, desplácese hacia abajo hasta "Desarrollador" y toque eso. </font><font>Eso presenta una lista de opciones para desarrolladores. </font><font>Desactive la depuración remota allí. </font><font>Sin embargo, no tienes que hacer esto si no quieres.</font></font></p> + +<div class="note"> +<p><strong><font><font>Nota:</font></font></strong><font><font> No es necesario reiniciar solo para activar y desactivar el soporte de depuración remota en el dispositivo, a partir de las compilaciones nocturnas del 29 de noviembre de 2012 o posteriores.]</font></font></p> +</div> + +<h2 id="Vea_también">Vea también:</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="/ en-US / docs / Mozilla / Firefox_OS / Depuración"><font><font>Depuración en Firefox OS</font></font></a></li> + <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="https://wiki.mozilla.org/Remote_Debugging_Protocol"><font><font>Protocolo de depuración remota</font></font></a></li> + <li><a href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/" title="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/"><font><font>Depuración remota en Firefox para Android</font></font></a><font><font> (entrada de blog)</font></font></li> +</ul> diff --git a/files/es/tools/debugger/source_map_errors/index.html b/files/es/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..ff12850c79 --- /dev/null +++ b/files/es/tools/debugger/source_map_errors/index.html @@ -0,0 +1,70 @@ +--- +title: Source map errors +slug: Tools/Debugger/Source_map_errors +tags: + - Consola + - Debugger + - Depurador + - Herramientas + - Source maps + - mapas fuente +translation_of: Tools/Debugger/Source_map_errors +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Los mapas fuente son ficheros JSON que proporcionan una forma de asociar las fuentes transformadas, tal como las ven los navegadores, con su fuente original, tal como fue escrita por el desarrollador. A veces puedes encontrar problemas trabajando con los mapas fuente. Esta página explica los problemas más comunes y como resolverlos.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si no conoces los mapas fuente, puedes aprender más sobre ellos en <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Como usar un mapa fuente</a>.</p> +</div> + +<h2 id="Informe_de_errores_general_de_mapas_fuente">Informe de errores general de mapas fuente</h2> + +<p>Si ves un problema, aparecerá un mensaje en la consola web. Este mensaje mostrará un mensaje de error, la dirección URL del recurso, y la URL del mapa fuente:</p> + +<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p> + +<p>Aquí, la URL del recurso nos dice que <code>bundle.js</code> hace mención a un mapa fuente, y la URL del mapa fuente nos dice dónde encontrar los datos del mapa fuente (en este caso, relativo al recurso). El error nos dice que el mapa fuente no son datos en formato JSON — por tanto estamos proporcionando el archivo erroneo.</p> + +<p>Hay unas cuantas formas en las que los mapas fuente pueden ir mal; Estas se detallan en las siguientes secciones.</p> + +<h2 id="Mapa_fuente_no_encontrado_o_inaccesible">Mapa fuente no encontrado o inaccesible</h2> + +<p>El mapa fuente puede estar desaparecido o inaccesible.</p> + +<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p> + +<p>Para arreglarlo debemos asegurarnos que el fichero existe y esta siendo servido y es accesible por el navegador.</p> + +<h2 id="Mapa_fuente_invalido">Mapa fuente invalido</h2> + +<p>El mapa fuente puede ser inválido — bien porque no es un fichero en formato JSON o porque tiene una estructura incorrecta. Los típicos mensajes de error son:</p> + +<ul> + <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li> + <li><code>Error: "version" is a required argument</code></li> +</ul> + +<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p> + +<h2 id="Fuente_original_no_encontrada">Fuente original no encontrada</h2> + +<p>La fuente original podría estar desaparecida. Este mensaje puede encontrarse cuando se intenta abrir una de las fuentes originales en el debugger. El mensaje parece un poco diferente en este caso:</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p> + +<p>En este caso, el error tambien se mostrará en el debugger en la pestaña de la fuente:</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p> + +<h2 id="Error_de_red_intentando_acceder_al_recurso._NetworkError_when_attempting_to_fetch_resource">Error de red intentando acceder al recurso. (NetworkError when attempting to fetch resource)</h2> + +<p>Un bug de Firefox evita que los mapas fuente se descarguen para las extensiones y complementos.</p> + +<p>Visita <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437937">Bug 1437937: WebExtensions Doesn't Find Source Maps</a> para más detalles.</p> + +<pre class="syntaxbox"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource. + Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js + Source-Map-Adresse: background.js.map</span></span></span></pre> + +<p>La única forma de corregir este error es cambiando manualmente la URL del mapa a una pública (http://localhost:1234/file.map.js) y arrancar un servidor web local en el puerto establecido.</p> |