initial commit

4 files changed, 104 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>