Skip to content

Conflicts check after pr178 #191

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 31, 2020
Merged

Conflicts check after pr178 #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5166404
Resolve conficts / Update translation.
odsantos Oct 27, 2020
e5e04b1
Merge branch 'conflicts-check-after-pr178' of https://github.com/odsa…
odsantos Oct 27, 2020
04dc680
Revert "Resolve conficts / Update translation."
odsantos Oct 27, 2020
b7d8600
Resolve conflicts/Update files after #178.
odsantos Oct 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 22 additions & 67 deletions 1-js/03-code-quality/01-debugging-chrome/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`).
Expand All @@ -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)

Expand All @@ -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.

Expand All @@ -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*.
Expand Down Expand Up @@ -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.
Expand All @@ -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.
Expand All @@ -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*).
Expand All @@ -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:

Expand All @@ -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.

Expand Down
Loading