From d0547811eec415a05d9c87092871c8ae69314145 Mon Sep 17 00:00:00 2001 From: Giorgiosaud Date: Mon, 9 Sep 2019 18:03:49 -0300 Subject: [PATCH 01/44] translate debuggin in chrome --- .../01-debugging-chrome/article.md | 167 +++++++++--------- .../chrome-open-sources.svg | 2 +- .../chrome-sources-breakpoint.svg | 2 +- .../chrome-sources-debugger-pause.svg | 6 +- .../debugging.view/index.html | 2 +- 5 files changed, 90 insertions(+), 89 deletions(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index 6d5bbbed3..f043655ff 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -1,76 +1,77 @@ -# Debugging in Chrome +# Debugging en Chrome -Before writing more complex code, let's talk about debugging. +Antes de escribir código mas complejo, hablemos de debugging. -All modern browsers and most other environments support "debugging" -- a special UI in developer tools that makes finding and fixing errors much easier. +Todos lo exploradores modernos y la mayoría de los otros ambientes soportan el "debugging" -- una herramienta especial de UI para desarrolladores que nos permite encontrar y reparar errores mas fácilmente. -We'll be using Chrome here, because it's probably the most feature-rich in this aspect. +Aca utilizaremos Chrome, porque es uno de los que les podemos sacar mas jugo en este aspecto. -## The "sources" pane +## El panel "sources/recursos" -Your Chrome version may look a little bit different, but it still should be obvious what's there. +Tu version de Chrome posiblemente se vea distinta, pero sigue siendo obvio lo que hablamos aquí. -- Open the [example page](debugging/index.html) in Chrome. -- Turn on developer tools with `key:F12` (Mac: `key:Cmd+Opt+I`). -- Select the `sources` pane. +- Abre la [pagina de ejemplo](debugging/index.html) en Chrome. +- Enciende las herramientas de desarrollo con `key:F12` (Mac: `key:Cmd+Opt+I`). +- Selecciona el panel `sources/recursos`. -Here's what you should see if you are doing it for the first time: + +Esto es lo que debería ver si lo está haciendo por primera vez: ![](chrome-open-sources.svg) -The toggler button opens the tab with files. +El botón toggler abre el tab con los archivos. -Let's click it and select `index.html` and then `hello.js` in the tree view. Here's what should show up: +Hagamos click allí y seleccionemos `index.html` y luego `hello.js` en el árbol de archivos. Aca esta lo que se debería ver: ![](chrome-tabs.svg) -Here we can see three zones: +Aca veremos las tres zonas: -1. The **Resources zone** lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too. -2. The **Source zone** shows the source code. -3. The **Information and control zone** is for debugging, we'll explore it soon. +1. La **Zona de recursos** lista HTML, JavaScript, CSS y otros archivos, incluyendo imágenes que están incluidas en la página. Las extensiones de Chrome quizás también aparezcan aca. +2. La **Zona de Recursos** muestra el codigo fuente de los archivos. +3. La **Zona de información y control** es para "debugging", la exploraremos pronto. -Now you could click the same toggler again to hide the resources list and give the code some space. +Ahora puedes hacer click en el mismo botón toggler otra vez para esconder la lista de recursos y darnos mas espacio. -## Console +## Consola -If we press `Esc`, then a console opens below. We can type commands there and press `key:Enter` to execute. +Si presionamos `Esc`, la consola se abrirá debajo. Podemos escribir los comandos y presionar `key:Enter` para ejecutar. -After a statement is executed, its result is shown below. +Despues de que se ejecuta una sentencia, el resultado se muestra debajo. -For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing, so the result is `undefined`: +Por ejemplo, si colocamos `1+2` el resultado es `3`, y `hello("debugger")` no devuelve nada, entonces el resultado es `undefined`: ![](chrome-sources-console.svg) ## Breakpoints -Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at line number `4`. Yes, right on the `4` digit, not on the code. +Examinemos que pasa con el codigo de la [pagina de ejemplo](debugging/index.html). En `hello.js`, haz click en el numero de linea `4`. Si, en el número `4`, no en el código. -Congratulations! You've set a breakpoint. Please also click on the number for line `8`. +Felicidades! Ya configuraste un breakpoint. Por favor haz click también en el numero de la linea `8`. -It should look like this (blue is where you should click): +Deberia verse así (en donde esta azul es donde deberías hacer click): ![](chrome-sources-breakpoint.svg) -A *breakpoint* is a point of code where the debugger will automatically pause the JavaScript execution. +Un *breakpoint* es un punto de código donde el debugger se detendrá automáticamente y detendrá la ejecución del código JavaScript. -While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it. +Mientras se pausa el código, podemos examinar las variables actuales, ejecutar comandos en la consola etc. En otras palabras, podemos debuggear. -We can always find a list of breakpoints in the right pane. That's useful when we have many breakpoints in various files. It allows us to: -- Quickly jump to the breakpoint in the code (by clicking on it in the right pane). -- Temporarily disable the breakpoint by unchecking it. -- Remove the breakpoint by right-clicking and selecting Remove. -- ...And so on. +Siempre podemos encontrar una lista de los breakpoints en el panel derecho. Esto es muy útil cuando tenemos muchos breakpoints en varios archivos. Ya que nos permite: +- Saltar rápidamente al breakpoint en el código (clickeando en el dentro del panel). +- Desactivar temporalmente el breakpoint deschequeandolo. +- Eliminar el breakpoint haciendo click derecho y seleccionando quitar/eliminar/remove. +- ...y mucho más. -```smart header="Conditional breakpoints" -*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression is truthy. +```smart header="Breakpoints Condicionales" +*Click derecho* en el numero de linea nos permite crear un breakpoint *concional*. Solo se ejecutará cuando la expresión sea verdadera. -That's handy when we need to stop only for a certain variable value or for certain function parameters. +Esto es útil cuando necesitamos detener la ejecución para cierto valor de variable o para ciertos párametros de función. ``` -## Debugger command +## Comando debugger -We can also pause the code by using the `debugger` command, like this: +Tambien podemos pausar el código utilizando el comando `debugger`, así: ```js function hello(name) { @@ -84,77 +85,77 @@ function hello(name) { } ``` -That's very convenient when we are in a code editor and don't want to switch to the browser and look up the script in developer tools to set the breakpoint. +Esto es muy conveniente cuando estamos en un editor de código y no queremos cambiar al explorador y ver el script en la consola de desarrolladores para setear el breakpoint. -## Pause and look around +## Pausar y mirar alrededor -In our example, `hello()` is called during the page load, so the easiest way to activate the debugger is to reload the page. So let's press `key:F5` (Windows, Linux) or `key:Cmd+R` (Mac). +En nuestro ejemplo, `hello()` este se llama durante la carga de la página, entonces la forma mas facil de activar el debugger es recargando la pagina. Entonces presionemos `key:F5` (en Windows ó Linux) ó `key:Cmd+R` (en Mac). -As the breakpoint is set, the execution pauses at the 4th line: +Como el breakpoint esta definido, la ejecución se detiene en la linea 4: ![](chrome-sources-debugger-pause.svg) -Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state: +Por favor abre el desplegable de informacion de la derecha (etiquetado con flechas). Este nos permite examinar el estado del código actual: -1. **`Watch` -- shows current values for any expressions.** +1. **`Watch` -- muestra el valor actual de cualquier expresión.** - You can click the plus `+` and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution. + Puedes hacer click en el màs `+` y agregar una expresión. El debugger mostrará su valor en cualquier momento, y se recalcurará automáticamente en el proceso de ejecución. -2. **`Call Stack` -- shows the nested calls chain.** +2. **`Call Stack` -- muestra las llamadas anidadas en la cadena.** - At the current moment the debugger is inside `hello()` call, called by a script in `index.html` (no function there, so it's called "anonymous"). + En el momento actual el debugger esta dentro de la funccion `hello()`, llamada por un script en `index.html` (no dentro de ninguna función, por lo que se llama "anonymous"). - If you click on a stack item, the debugger jumps to the corresponding code, and all its variables can be examined as well. -3. **`Scope` -- current variables.** + Si haces click en un elemento de la pila, el debugger saltará al código correspondiente, y todas sus variables también serán examinadas. +3. **`Scope` -- variables activas.** - `Local` shows local function variables. You can also see their values highlighted right over the source. + `Local` muestra las variables de la función local. Tambien puedes ver sus valores resaltados sobre el código fuente. - `Global` has global variables (out of any functions). + `Global` contiene las variables globales (fuera de cualquier función). - There's also `this` keyword there that we didn't study yet, but we'll do that soon. + Tambien tenemos la palabra `this` la cual no estudiaremos ahora, pero pronto lo haremos. -## Tracing the execution +## Tazado de la ejecución -Now it's time to *trace* the script. +Ahora es tiempo de *trazar* el script. -There are buttons for it at the top of the right pane. Let's engage them. +Hay botones para esto en le panel superior derecho. Revisemoslos. - -- continue the execution, hotkey `key:F8`. -: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control. + -- continuar la ejecución, hotkey `key:F8`. +: Resumir la ejecución. Si no hay breakpoints adicionales, entonces la ejecución continua y el debugger pierde el control. - Here's what we can see after a click on it: + Aqui está lo que podemos ver al hacer click: ![](chrome-sources-debugger-trace-1.svg) - The execution has resumed, reached another breakpoint inside `say()` and paused there. Take a look at the "Call stack" at the right. It has increased by one more call. We're inside `say()` now. + La ejecucion continuó, alcanzando el siguiente breakpoint dentro de `say()` y pausandose allí. Revisa el "Call stack" a la derecha. Ha incrementado su valor una llamada. Ahora estamos dentro de `say()`. - -- make a step (run the next command), but *don't go into the function*, hotkey `key:F10`. -: If we click it now, `alert` will be shown. The important thing is that `alert` can be any function, the execution "steps over it", skipping the function internals. + -- siguiente paso (corre el comando siguiente), pero *no te metas en la función*, hotkey `key:F10`. +: Si hacemos click , se mostrara el `alert`. Lo importante es que ese `alert` puede ser cualquier función, la ejecución "se para sobre ella", saltándose los pasos internos. - -- make a step, hotkey `key:F11`. -: The same as the previous one, but "steps into" nested functions. Clicking this will step through all script actions one by one. + -- siguiente paso, hotkey `key:F11`. +: Es lo mismo que la anterior, pero but "Entras" en las funciones anidadas. Haciendo click en este caminarás por todos los pasos uno por uno. - -- continue the execution till the end of the current function, hotkey `key:Shift+F11`. -: The execution would stop at the very last line of the current function. That's handy when we accidentally entered a nested call using , but it does not interest us, and we want to continue to its end as soon as possible. + -- continuar la ejecución hasta el final de la función actual, hotkey `key:Shift+F11`. +: La ejecucion se detendrá en la última linea de la función actual. Esto es útil cuando accidentalmente entramos en una llamada anidada usando , pero estono nos interesa, y queremos continuar hasta el final tan rápido como se pueda. - -- enable/disable all breakpoints. -: That button does not move the execution. Just a mass on/off for breakpoints. + -- activar/desactivar todos los breakpoints. +: Este boton no mueve la ejecución. Solo prende y apaga los breakpoints. - -- enable/disable automatic pause in case of an error. -: When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment. + -- activar/desactivar pausa automática en caso de error. +: Cuando esta activo, y la consola de developers tools esta abierta, un error de script automáticamente pausa la ejecución. Entonces podemos analizar las variables para ver que está mal. Y si nuestro script muere por un error, podemos abrir el debugger, activar esta opcióny recargar la página para ver donde muere y cual es el contexto en ese momento. -```smart header="Continue to here" -Right click on a line of code opens the context menu with a great option called "Continue to here". +```smart header="Continuar hasta aquí" +Click derecho en un una linea de código abre el menu contextual con una gran opción que dice "Continua hasta aquí". -That's handy when we want to move multiple steps forward, but we're too lazy to set a breakpoint. +Esto es útil cuando queremos movernos multiples pasos adelante, pero somos muy flojos como para definir un breakpoint. ``` ## Logging -To output something to console, there's `console.log` function. +Para escribir algo en la consola, existe la función `console.log`. -For instance, this outputs values from `0` to `4` to console: +Por ejemplo, esto muestra los valores desde el `0` hasta el `4` en la consola: ```js run // open console to see @@ -163,21 +164,21 @@ for (let i = 0; i < 5; i++) { } ``` -Regular users don't see that output, it is in the console. To see it, either open the Console tab of developer tools or press `key:Esc` while in another tab: that opens the console at the bottom. +Los usuarios regulares no ven este output, ya que está en la consola. Para verlo, debemos abrir la consola de desarrolladores y presionar la tecla `key:Esc` y en otro tab: se abrirá la consola debajo. -If we have enough logging in our code, then we can see what's going on from the records, without the debugger. +Si tenemos suficiente log en nuestro código, podemos entonces ver lo que va pasando en nuestro registro, sin el debugger. -## Summary +## Resúmen -As we can see, there are three main ways to pause a script: -1. A breakpoint. -2. The `debugger` statements. -3. An error (if dev tools are open and the button is "on"). +Como podemos ver, hay tres fromas principales para pausar un script: +1. Un breakpoint. +2. La declaración `debugger`. +3. Un error (Si la consola esta abierta y el botón esta "activo"). -Then we can examine variables and step on to see where the execution goes wrong. +Entonces podemos examinar las variables y paso a paso ver que falla en el proceso de ejecución. -There are many more options in developer tools than covered here. The full manual is at . +Hay muchas mas opciones en la consola de desarrollo que las que se cubren aca. El manual completo lo conseguimos en . -The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools. +La informacion de este capitulo es suficiente para debuggear, pero luego, especialemnte si hcemos muchas cosas con el explorador, por favor revisa las capacidades avanzadas de la consola de desarrolladores. -Oh, and also you can click at various places of dev tools and just see what's showing up. That's probably the fastest route to learn dev tools. Don't forget about the right click as well! +Ah, y tambien puedes hacer click en todos lados en la consola a ver que pasa. Esta es probablemente la ruta mas rapida de aprender a usar la consola de desarrolladores. No te olvides del click derecho también!!! diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg index dcb627c6f..3a07bc891 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg @@ -7,7 +7,7 @@ - open sources + abrir recursos diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg index f19e38887..cf8c63143 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg @@ -7,7 +7,7 @@ - here's the list + Aquí esta la lista de brakpoints breakpoints diff --git a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg index af5384e65..a819800cc 100644 --- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg +++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-pause.svg @@ -51,13 +51,13 @@ - jump to the outer function + Saltar a la función externa - watch expressions + Expresiones watch - current variables + variables activas diff --git a/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html b/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html index 6c651e854..b45f70ce7 100644 --- a/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html +++ b/1-js/03-code-quality/01-debugging-chrome/debugging.view/index.html @@ -4,7 +4,7 @@ - An example for debugging. + Un ejemplo para hacer debugging.