Merge pull request #191 from odsantos/conflicts-check-after-pr178

Conflicts check after pr178

Author: odsantos

1-js/03-code-quality/01-debugging-chrome/article.md

@@ -4,11 +4,11 @@ Antes de escrevermos código mais complexo, vamos falar de debugging (depuraçã
 
 [Depuração](https://pt.wikipedia.org/wiki/Depura%C3%A7%C3%A3o) é o processo de procura e correção de erros num programa. Todos os navegadores (*browsers*) modernos e muitas outras plataformas (*environments*) suportam ferramentas de *debugging* -- uma UI (Interface de Utilizador) especial disponível nas ferramentas do desenvolvedor (*developer tools*) que torna a depuração de erros muito mais fácil. Ela também permite rastrear o código passo-a-passo para ver exatamente o que está a ser executado.
 
-Aqui, vamos utilizar o Chrome porque tem muitas funcionalidades, mas a maioria dos outros navegadores possuem um processo similar.
+Aqui, vamos utilizar o Chrome porque tem muitas funcionalidades, mas a maioria dos outros navegadores possui um processo similar.
 
 ## O painel "*Sources*"
 
-A versão do seu Chrome pode parecer um pouco diferente, mas ainda assim deveria ser óbvio o que lá encontre.
+A versão do seu Chrome pode parecer um pouco diferente, mas ainda assim deverá ser óbvio o que lá encontre.
 
 - Abra a [página exemplo](debugging/index.html) no Chrome.
 - Ative as ferramentas do desenvolvedor com `key:F12` (Mac: `key:Cmd+Opt+I`).
@@ -20,7 +20,7 @@ Aqui está o que poderá ver, se o estiver a fazer pela primeira vez:
 
 O botão de alternador <span class="devtools" style="background-position:-172px -98px"></span> abre o separador com os ficheiros.
 
-Vamos clicar nele, e selecionar `hello.js`  na vista de árvore de recursos apresentada. Aqui está o que deveria ser mostrado:
+Vamos clicar nele, e selecionar `hello.js` na vista de árvore de recursos apresentada. Aqui está o que deveria ser mostrado:
 
 ![](chrome-tabs.svg)
 
@@ -32,7 +32,7 @@ O painel *Sources* possui 3 partes:
 
 Agora, poderia clicar novamente no mesmo botão de alternador <span class="devtools" style="background-position:-172px -122px"></span> para ocultar a lista de recursos e dar ao código algum espaço.
 
-## Console
+## Consola
 
 Se pressionarmos `key:Esc`, uma consola se abre abaixo. Podemos aí digitar comandos e pressionar `key:Enter` para os executar.
 
@@ -57,7 +57,6 @@ Um *breakpoint* é um ponto no código onde o *debugger* (depurador de erros) ir
 Enquanto a execução do código estiver suspensa, podemos examinar variáveis correntes, executar comandos na consola, etc. Por outras palavras, podemos nele depurar erros (*debug it*).
 
 Podemos sempre encontrar uma lista de *breakpoints* no painel à direita. É útil quando temos muitos *breakpoints* em vários ficheiros. Ela permite-nos:
-
 - Rápidamente saltar para a linha do breakpoint no código (ao clicar sobre ele no painel à direita).
 - Temporáriamente desativar o breakpoint, ao desmarcá-lo (*unchecking it*).
 - Remover o breakpoint, clicando com o botão direito do rato e selecionando *Remove*.
@@ -87,26 +86,26 @@ function hello(name) {
 
 É muito conveniente quando estivermos num editor de código e não quisermos mudar para o navegador, e de seguida, nas ferramentas do desenvolvedor deste, procurar no programa (*script*) pelo local onde colocar o breakpoint.
 
+
 ## Pause e dê uma vista de olhos
 
-No nosso exemplo, `hello()` é chamada durante o carregamento da página, assim a forma mais fácil para ativar o *debugger* (depois de termos colocado os *breakpoints*) é refrescar (*reload*) a página. Assim, vamos pressionar `key:F5` (Windows, Linux) ou `key:Cmd+R` (Mac).
+No nosso exemplo, `hello()` é chamada durante o carregamento da página, assim a forma mais fácil para ativar o *debugger* (depois de termos colocado os *breakpoints*) é recarregar a página. Assim, vamos pressionar `key:F5` (Windows, Linux) ou `key:Cmd+R` (Mac).
 
 Como o breakpoint está estabelecido, é feita uma pausa na execução na quarta linha:
 
 ![](chrome-sources-debugger-pause.svg)
 
-Por favor, abra as secções de dropdown informacionais à direita (possuem etiquetas em seta). Elas permitem examinar o estado atual do código:
+Por favor, abra as secções de *dropdown* informacionais à direita (possuem etiquetas em seta). Elas permitem examinar o estado atual do código:
 
 1. **`Watch` -- mostra valores correntes de expressões.**
 
-    Pode clicar no mais `+` e inserir uma expressão. O *debugger* mostrará o seu valor em qualquer momento, e é automáticamente recalculado ao longo do processo de execução.
+    Pode clicar no mais `+` e inserir uma expressão. O *debugger* mostrará o seu valor em qualquer altura, e ele é automáticamente recalculado ao longo do processo de execução.
 
 2. **`Call Stack` -- mostra a sequência de chamadas de funções aninhadas.**
 
-    No presente momento, o *debugger* está dentro da chamada a `hello()`, invocada por código em `index.html` (não a partir de uma função, por isso o nome "*anonymous*").
+    No presente momento, o *debugger* está dentro da chamada a `hello()`, invocada por código em `index.html` (não a partir de uma função, por isso o nome "*anonymous*" [anónimo]).
 
     Se clicar num item nessa pilha (*stack*) (por exemplo, em "*anonymous*"), o *debugger* saltará para o código correspondente, e todas as suas variáveis poderão ser igualmente examinadas.
-
 3. **`Scope` -- variables atuais.**
 
     `Local` mostra variáveis locais de funções. Também, poderá ver os seus valores em destaque exatamente sobre o código-fonte.
@@ -120,42 +119,34 @@ Por favor, abra as secções de dropdown informacionais à direita (possuem etiq
 Agora, é altura para *rastrearmos* (*trace*) o código.
 
 Existem botões para isso no topo do painel direito. Vamos interagir com eles.
-
+<!-- https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/Images/src/largeIcons.svg -->
 <span class="devtools" style="background-position:-146px -160px"></span> -- "Resume": continue a execução, atalho (*hotkey*) `key:F8`.
 : Retoma a execução. Se não houver *breakpoints* adicionais, a execução simplesmente prossegue e o *debugger* perde o controlo.
 
-  Aqui está o que poderemos ver após um clique sobre ele:
+    Aqui está o que poderemos ver após um clique sobre ele:
 
-  ![](chrome-sources-debugger-trace-1.svg)
+    ![](chrome-sources-debugger-trace-1.svg)
 
-  A execução prosseguiu, atingiu outro *breakpoint* dentro de `say()` e foi suspensa lá. Dê uma vista de olhos sobre a "*Call stack*" à direita. Aumentou por mais uma chamada. Estamos dentro de `say()` agora.
+    A execução prosseguiu, atingiu outro *breakpoint* dentro de `say()` e fez uma pausa lá. Dê uma vista de olhos sobre a "*Call stack*" à direita. Aumentou por mais uma chamada. Estamos dentro de `say()` agora.
 
 <span class="devtools" style="background-position:-200px -190px"></span> -- "Step": execute o próximo comando, atalho (*hotkey*) `key:F9`.
 : Executa a próxima instrução. Se o clicarmos agora, o `alert` será mostrado.
 
-<<<<<<< HEAD
-  Continuando a clicar nele, passará por todas as instruções do programa, uma por uma.
+    Continuando a clicar nele, passará por todas as instruções do programa, uma por uma.
 
 <span class="devtools" style="background-position:-62px -192px"></span> -- "Step over": execute o próximo comando, mas *mas não vá para dentro de uma função*, atalho `key:F10`.
 : Similar ao comando "Step" anterior, mas com um comportamento diferente se a próxima instrução for uma chamada de função. Isto é: não uma incorporada (*built-in*), como `alert`, mas uma função sua.
-=======
-There are buttons for it at the top of the right panel. Let's engage them.
-<!-- https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/Images/src/largeIcons.svg -->
-<span class="devtools" style="background-position:-146px -168px"></span> -- "Resume": 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.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
 
-  O comando "Step", vai para dentro dela e suspende a execução na sua primeira linha, ao contrário de "Step over" que executa essa chamada de função aninhada invisívelmente, saltando sobre o funcionamento interno da função.
+    O comando "Step", vai para dentro dela e suspende a execução na sua primeira linha, ao contrário de "Step over" que executa essa chamada de função aninhada invisívelmente, saltando sobre o funcionamento interno da função.
 
-  É feita uma pausa na execução imediatemente depois dessa função.
+    É feita uma pausa na execução imediatamente depois dessa função.
 
-  É bom, se não estivermos interessados em ver o que acontece dentro da chamada de função.
+    É bom, se não estivermos interessados em ver o que acontece dentro da chamada de função.
 
-<<<<<<< HEAD
 <span class="devtools" style="background-position:-4px -194px"></span> -- "Step into", atalho `key:F11`.
 : Similar a "Step", mas com um comportamento diferente no caso de chamadas de funções assíncronas. Se estiver a começar a aprender JavaScript, então poderá ignorar a diferença, porque ainda não temos chamadas assíncronas.
 
-  Futuramente, apenas tome nota que o comando "Step" ignora ações assíncronas, tais como `setTimeout` (chamada de função agendada), que são executadas mais tarde. O "Step into", vai para dentro do seu código, esperando pela sua execução se necessário. Para mais detalhes, veja o [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async).
+    Para o futuro, apenas tome nota que o comando "Step" ignora ações assíncronas, tais como `setTimeout` (chamada de função agendada), que são executadas mais tarde. O "Step into", vai para dentro dos seus códigos, esperando pela sua execução se necessário. Para mais detalhes, veja o [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async).
 
 <span class="devtools" style="background-position:-32px -194px"></span> -- "Step out": continue a execução até ao fim da função atual, atalho `key:Shift+F11`.
 : Continue a execução e a faça uma pausa na última linha da função atual. É útil quando acidentalmente entrámos para uma chamada aninhada usando <span class="devtools" style="background-position:-200px -190px"></span>, mas ela não nos interessa, e queremos prosseguir para o seu final o mais rápidamente possível.
@@ -164,36 +155,7 @@ There are buttons for it at the top of the right panel. Let's engage them.
 : Esse botão não move a execução. Simplesmente liga/desliga *breakpoints* em grupo.
 
 <span class="devtools" style="background-position:-90px -146px"></span> -- ative/desative a pausa automática em caso de erro.
-: Quando ativo, e as ferramentas do desenvolvedor estão abertas, um erro no código automáticamente suspende a sua execução. Então, poderemos analizar variáveis para ver o que ocorreu de errado. Assim, se o código falhar por um erro, pode-se abrir o *debugger*, ativar esta opção e refrescar a página, afim de se observar onde falhou e qual o contexto nesse momento.
-=======
-<span class="devtools" style="background-position:-200px -190px"></span> -- "Step": run the next command, hotkey `key:F9`.
-: Run the next statement. If we click it now, `alert` will be shown.
-
-    Clicking this again and again will step through all script statements one by one.
-
-<span class="devtools" style="background-position:-62px -192px"></span> -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`.
-: Similar to the previous the "Step" command, but behaves differently if the next statement is a function call. That is: not a built-in, like `alert`, but a function of our own.
-
-    The "Step" command goes into it and pauses the execution at its first line, while "Step over" executes the nested function call invisibly, skipping the function internals.
-
-    The execution is then paused immediately after that function.
-
-    That's good if we're not interested to see what happens inside the function call.
-
-<span class="devtools" style="background-position:-4px -194px"></span> -- "Step into", hotkey `key:F11`.
-: That's similar to "Step", but behaves differently in case of asynchronous function calls. If you're only starting to learn JavaScript, then you can ignore the difference, as we don't have asynchronous calls yet.
-
-    For the future, just note that "Step" command ignores async actions, such as `setTimeout` (scheduled function call), that execute later. The "Step into" goes into their code, waiting for them if necessary. See [DevTools manual](https://developers.google.com/web/updates/2018/01/devtools#async) for more details.
-
-<span class="devtools" style="background-position:-32px -194px"></span> -- "Step out": continue the execution till the end of the current function, hotkey `key:Shift+F11`.
-: Continue the execution and stop it at the very last line of the current function. That's handy when we accidentally entered a nested call using <span class="devtools" style="background-position:-200px -190px"></span>, but it does not interest us, and we want to continue to its end as soon as possible.
-
-<span class="devtools" style="background-position:-61px -74px"></span> -- enable/disable all breakpoints.
-: That button does not move the execution. Just a mass on/off for breakpoints.
-
-<span class="devtools" style="background-position:-90px -146px"></span> -- 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.
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
+: Quando ativo, e as ferramentas do desenvolvedor estiverem abertas, um erro no código automáticamente suspende a sua execução. Então, poderemos analisar variáveis para ver o que ocorreu de errado. Assim, se o código falhar por um erro, pode-se abrir o *debugger*, ativar esta opção e recarregar a página, afim de se observar onde falhou e qual o contexto nesse momento.
 
 ```smart header="Continue até aqui"
 Ao clicar com o botão direito do rato sobre uma linha de código, abre-se o menu de contexto com uma valiosa opção com o nome "Continue até aqui" (*Continue to here*).
@@ -203,7 +165,7 @@ Ao clicar com o botão direito do rato sobre uma linha de código, abre-se o men
 
 ## Logging
 
-Para mostrar algo existente no código na consola, existe a função `console.log`.
+Para mostrar na consola algo existente no código, existe a função `console.log`.
 
 Por exemplo, isto mostra os valores de `0` a `4` na consola:
 
@@ -220,21 +182,14 @@ Se mostrarmos mensagens (*logging*) suficientes no nosso código, então poderem
 
 ## Resumo
 
-<<<<<<< HEAD
-Como podemos ver, existem três formas principais para efetuar uma pausa num *script*:
+Como podemos ver, existem três formas principais para fazer uma pausa num *script*:
 1. Um *breakpoint* (ponto-de-interrupção).
 2. As instruções `debugger`.
 3. Um erro (se as ferramentas do desenvolvedor [*dev tools*] estiverem abertas, e o botão <span class="devtools" style="background-position:-90px -146px"></span> estiver "ativo").
-=======
-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 <span class="devtools" style="background-position:-90px -146px"></span> is "on").
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
 
 Enquanto suspenso, podemos depurar erros - examinar variáveis e rastear o código para ver onde a sua execução contém erros.
 
-Existem muitas mais opções nas ferramentas do desenvolvedor do que as cobertas aqui. O manual completo está em <https://developers.google.com/web/tools/chrome-devtools> (no topo, à direita, poderá escolher o idioma).
+Existem muitas mais opções nas ferramentas do desenvolvedor do que as cobertas aqui. O manual completo está em <https://developers.google.com/web/tools/chrome-devtools>.
 
 A informação neste capítulo é suficiente para iniciar a depuração de erros (o *debugging*), mas mais tarde, especialmente se trabalhar muito com o navegador (*browser*), por favor consulte o manual e procure por capacidades mais avançadas de ferramentas do desenvolvedor.