Skip to content

Commit 5166404

Browse files
committed
Resolve conficts / Update translation.
1 parent 672c343 commit 5166404

File tree

1 file changed

+28
-73
lines changed
  • 1-js/03-code-quality/01-debugging-chrome

1 file changed

+28
-73
lines changed

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

Lines changed: 28 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Aqui, vamos utilizar o Chrome porque tem muitas funcionalidades, mas a maioria d
88

99
## O painel "*Sources*"
1010

11-
A versão do seu Chrome pode parecer um pouco diferente, mas ainda assim deveria ser óbvio o que lá encontre.
11+
A versão do seu Chrome pode parecer um pouco diferente, mas ainda assim deverá ser óbvio o que lá encontre.
1212

1313
- Abra a [página exemplo](debugging/index.html) no Chrome.
1414
- 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:
2020

2121
O botão de alternador <span class="devtools" style="background-position:-172px -98px"></span> abre o separador com os ficheiros.
2222

23-
Vamos clicar nele, e selecionar `hello.js` na vista de árvore de recursos apresentada. Aqui está o que deveria ser mostrado:
23+
Vamos clicar nele, e selecionar `hello.js` na vista de árvore de recursos apresentada. Aqui está o que deveria ser mostrado:
2424

2525
![](chrome-tabs.svg)
2626

@@ -46,32 +46,31 @@ Por exemplo, aqui `1+2` resulta em `3`, e `hello("debugger")` não retorna nada,
4646

4747
Vamos examinar o que se passa dentro do código da [página exemplo](debugging/index.html). Em `hello.js`, clique no número de linha `4`. Sim, exatamente sobre o dígito `4`, não sobre o código.
4848

49-
Parabéns! Estabeleceu um ponto-de-interrupção (*breakpoint*). Por favor, clique também no número de linha `8`.
49+
Parabéns! Você estabeleceu um ponto-de-interrupção (*breakpoint*). Por favor, clique também no número de linha `8`.
5050

5151
Deveria se parecer com (a azul é onde deveria ter clicado):
5252

5353
![](chrome-sources-breakpoint.svg)
5454

55-
Um *breakpoint* é um ponto no código onde o *debugger* (depurador de erros) irá automáticamente efetuar uma pausa na execução do JavaScript.
55+
Um *breakpoint* é um ponto no código onde o *debugger* (depurador de erros) irá automáticamente fazer uma pausa na execução do JavaScript.
5656

5757
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*).
5858

5959
Podemos sempre encontrar uma lista de *breakpoints* no painel à direita. É útil quando temos muitos *breakpoints* em vários ficheiros. Ela permite-nos:
60-
6160
- Rápidamente saltar para a linha do breakpoint no código (ao clicar sobre ele no painel à direita).
6261
- Temporáriamente desativar o breakpoint, ao desmarcá-lo (*unchecking it*).
6362
- Remover o breakpoint, clicando com o botão direito do rato e selecionando *Remove*.
6463
- ...E assim por diante.
6564

6665
```smart header="*Breakpoints* condicionais"
67-
*Clicando com o botão direito do rato* sobre um número de linha permite-nos criar um *breakpoint condicional*. Apenas será ativado quando a expressão inserida for verdadeira.
66+
*Clicando com o botão direito do rato* sobre um número de linha nos permite criar um *breakpoint condicional*. Apenas será ativado quando a expressão inserida for verdadeira.
6867
6968
É prático quando apenas precisarmos de parar para um certo valor numa variável, ou para certos parâmetros numa função.
7069
```
7170

7271
## O comando *debugger*
7372

74-
Podemos também suspender o código utilizando o comando `debugger`, desta forma:
73+
Podemos também pausar o código utilizando o comando `debugger`, desta forma:
7574

7675
```js
7776
function hello(name) {
@@ -87,9 +86,10 @@ function hello(name) {
8786

8887
É 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.
8988

89+
9090
## Pause e dê uma vista de olhos
9191

92-
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).
92+
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).
9393

9494
Como o breakpoint está estabelecido, é feita uma pausa na execução na quarta linha:
9595

@@ -99,17 +99,16 @@ Por favor, abra as secções de dropdown informacionais à direita (possuem etiq
9999

100100
1. **`Watch` -- mostra valores correntes de expressões.**
101101

102-
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.
102+
Pode clicar no mais `+` e inserir uma expressão. O *debugger* mostrará o seu valor em qualquer altura, e é automáticamente recalculado ao longo do processo de execução.
103103

104104
2. **`Call Stack` -- mostra a sequência de chamadas de funções aninhadas.**
105105

106-
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*").
106+
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"]).
107107

108108
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.
109-
110109
3. **`Scope` -- variables atuais.**
111110

112-
`Local` mostra variáveis locais de funções. Também, poderá ver os seus valores em destaque exatamente sobre o código-fonte.
111+
`Local` mostra variáveis locais de funções. Também, poderá ver os seus valores destacados exatamente sobre o código-fonte.
113112

114113
`Global` possui variáveis globais (aquelas fora de qualquer função).
115114

@@ -120,80 +119,43 @@ Por favor, abra as secções de dropdown informacionais à direita (possuem etiq
120119
Agora, é altura para *rastrearmos* (*trace*) o código.
121120

122121
Existem botões para isso no topo do painel direito. Vamos interagir com eles.
123-
122+
<!-- https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/Images/src/largeIcons.svg -->
124123
<span class="devtools" style="background-position:-146px -160px"></span> -- "Resume": continue a execução, atalho (*hotkey*) `key:F8`.
125124
: Retoma a execução. Se não houver *breakpoints* adicionais, a execução simplesmente prossegue e o *debugger* perde o controlo.
126125

127126
Aqui está o que poderemos ver após um clique sobre ele:
128127

129128
![](chrome-sources-debugger-trace-1.svg)
130129

131-
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.
130+
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.
132131

133132
<span class="devtools" style="background-position:-200px -190px"></span> -- "Step": execute o próximo comando, atalho (*hotkey*) `key:F9`.
134133
: Executa a próxima instrução. Se o clicarmos agora, o `alert` será mostrado.
135134

136-
<<<<<<< HEAD
137-
Continuando a clicar nele, passará por todas as instruções do programa, uma por uma.
135+
Clicando repetidamente irá percorrer todas as instruções do *script*, uma a uma.
138136

139137
<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`.
140-
: 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.
141-
=======
142-
There are buttons for it at the top of the right panel. Let's engage them.
143-
<!-- https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/Images/src/largeIcons.svg -->
144-
<span class="devtools" style="background-position:-146px -168px"></span> -- "Resume": continue the execution, hotkey `key:F8`.
145-
: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control.
146-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
138+
: Similar ao comando "Step" anterior, mas com um comportamento diferente se a instrução seguinte for uma chamada de função. Isto é: não uma incorporada (*built-in*), como `alert`, mas uma função sua.
147139

148-
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.
140+
O comando "Step" vai para dentro dela e pausa a execução na sua primeira linha, enquanto "Step over" executa a chamada de função invisivelmente, saltando o interior da função.
149141

150-
É feita uma pausa na execução imediatemente depois dessa função.
142+
A execução faz depois uma pausa imediatamente depois da função.
151143

152-
É bom, se não estivermos interessados em ver o que acontece dentro da chamada de função.
144+
Isto, é bom se você não estiver interessado em ver o que acontece dentro da função.
153145

154-
<<<<<<< HEAD
155146
<span class="devtools" style="background-position:-4px -194px"></span> -- "Step into", atalho `key:F11`.
156-
: 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.
147+
: É similar a "Step", mas com um comportamento diferente no caso de chamadas de funções assíncronas. Se você estiver a começar a aprender JavaScript, então pode ignorar a diferença, porque ainda não temos chamadas assíncronas.
157148

158-
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).
149+
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).
159150

160151
<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`.
161-
: 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.
152+
: Continua a execução e faz 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.
162153

163154
<span class="devtools" style="background-position:-61px -74px"></span> -- ative/desative todos os *breakpoints*.
164155
: Esse botão não move a execução. Simplesmente liga/desliga *breakpoints* em grupo.
165156

166157
<span class="devtools" style="background-position:-90px -146px"></span> -- ative/desative a pausa automática em caso de erro.
167-
: 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.
168-
=======
169-
<span class="devtools" style="background-position:-200px -190px"></span> -- "Step": run the next command, hotkey `key:F9`.
170-
: Run the next statement. If we click it now, `alert` will be shown.
171-
172-
Clicking this again and again will step through all script statements one by one.
173-
174-
<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`.
175-
: 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.
176-
177-
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.
178-
179-
The execution is then paused immediately after that function.
180-
181-
That's good if we're not interested to see what happens inside the function call.
182-
183-
<span class="devtools" style="background-position:-4px -194px"></span> -- "Step into", hotkey `key:F11`.
184-
: 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.
185-
186-
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.
187-
188-
<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`.
189-
: 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.
190-
191-
<span class="devtools" style="background-position:-61px -74px"></span> -- enable/disable all breakpoints.
192-
: That button does not move the execution. Just a mass on/off for breakpoints.
193-
194-
<span class="devtools" style="background-position:-90px -146px"></span> -- enable/disable automatic pause in case of an error.
195-
: 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.
196-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
158+
: Quando ativo, e as ferramentas do desenvolvedor estiverem abertas, um erro no código automáticamente pausa 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, podemos abrir o *debugger*, ativar esta opção e recarregar a página, afim de vermos onde falhou e qual o contexto nesse momento.
197159

198160
```smart header="Continue até aqui"
199161
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
203165

204166
## Logging
205167

206-
Para mostrar algo existente no código na consola, existe a função `console.log`.
168+
Para mostrar na consola algo existente no código, existe a função `console.log`.
207169

208170
Por exemplo, isto mostra os valores de `0` a `4` na consola:
209171

@@ -214,28 +176,21 @@ for (let i = 0; i < 5; i++) {
214176
}
215177
```
216178

217-
Utilizadores comuns não vêm essa saída (*output*), ela estará na consola. Para a ver, abra o separador Console nas ferramentas do desenvolvedor, ou pressione `key:Esc` se estiver num outro separador - isso abre a consola abaixo nesse separador.
179+
Utilizadores comuns não vêm essa saída (*output*), ela está na consola. Para a ver, abra o separador Console nas ferramentas do desenvolvedor, ou pressione `key:Esc` se estiver num outro separador: isso abre a consola embaixo nesse separador.
218180

219-
Se mostrarmos mensagens (*logging*) suficientes no nosso código, então poderemos ver o que nele se passa a partir desses registos, dispensando o *debugger*.
181+
Se tivermos mensagens (*logging*) suficientes no nosso código, então poderemos ver o que nele se passa a partir desses registos, dispensando o *debugger*.
220182

221183
## Resumo
222184

223-
<<<<<<< HEAD
224-
Como podemos ver, existem três formas principais para efetuar uma pausa num *script*:
185+
Como podemos ver, existem três formas principais para fazer uma pausa num *script*:
225186
1. Um *breakpoint* (ponto-de-interrupção).
226187
2. As instruções `debugger`.
227188
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").
228-
=======
229-
As we can see, there are three main ways to pause a script:
230-
1. A breakpoint.
231-
2. The `debugger` statements.
232-
3. An error (if dev tools are open and the button <span class="devtools" style="background-position:-90px -146px"></span> is "on").
233-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
234189

235190
Enquanto suspenso, podemos depurar erros - examinar variáveis e rastear o código para ver onde a sua execução contém erros.
236191

237-
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).
192+
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>.
238193

239-
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.
194+
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, por favor consulte o manual e procure por funcionalidades mais avançadas nas ferramentas do desenvolvedor.
240195

241196
Oh, também pode clicar em vários locais nas *dev tools* e ver o que acontece. Provávelmente, é a rota mais rápida para aprender sobre as *dev tools*. Não se esqueça de também clicar com o botão direito do rato e dos menus de contexto!

0 commit comments

Comments
 (0)