initial commit

2 files changed, 70 insertions, 0 deletions

diff --git a/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html b/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html
new file mode 100644
index 0000000000..fc1d03fd3b
--- /dev/null
+++ b/files/pt-br/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html
@@ -0,0 +1,59 @@
+---
+title: 'Examine, modify, and watch variables'
+slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables'
+tags:
+  - expressão de observação
+  - variáveis watch
+  - watch expression
+  - watch variables
+translation_of: Tools/Debugger/How_to/Set_Watch_Expressions
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Este componente não está ainda suportado no novo debugger. Se você precisar disto, você pode, por agora, voltar para o velho debugger para visitá-lo no about:config e configula-lo no "devtool.debugger.new-debugger-frontend" preferência para falso.</p>
+
+<p>Ver os documentos para o debugger, por favor visite <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Debugger(antes Firefox 52)</a>.</p>
+</div>
+
+<h2 id="Examine_variáveis">Examine variáveis</h2>
+
+<p>Quando o código pára em um breakpoint, você pode examinar seu estado no <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Variables_pane">painél de variáveis</a> do debugger.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13216/debugger-variables-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p>
+
+<p>Variáveis são agrupadas por escopo: No escopo da função você verá os argumentos built-in e suas variáveis tão bem como variáveis locais definido pela função como user e greeting similarmente, no escopo global você verá variáveis globais que você tem definido, como greetme, tão bem como globais built-in como localStorage and console.</p>
+
+<p>Cada objeto pode ser expandido, usando uma disclosure triangle, para mostrar seus componentes.</p>
+
+<p>Apontando seu cursor para um nome de variável exibido numa tooltip que previdencia informaçãoes adicionais sobre as variáveis. Veja <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty()</a> para detalhes no quê essas descrições de propriedades significam.</p>
+
+<p>You can filter the variables that are displayed, either by using the "*" modifier in the <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="#script-filter">script filter</a>, or by typing into the filter variables box, if you have enabled this in the <a href="/en-US/docs/Tools/Debugger/Settings" title="#debugger-settings">debugger settings</a>.</p>
+
+<p>Você pode filtrar as variáveis que são exibidas, tanto por usar o "*" modificador no filtro de script, ou por digitar dentro de uma caixa filtro de variáveis, se você habilitou isto nas <a href="/en-US/docs/Tools/Debugger/Settings">configurações do debugger</a>.</p>
+
+<p>{{EmbedYouTube("dxCvnixpM_Q")}}</p>
+
+<p>Se uma variável existe no fonte mas tem sido otimizado pelo motor javascript, então isto será mostrado na Visão variável, mas é dado o valor (<code>optimized away), e não é editável. No screenshot abaixo a variável upvar tem sido otimizado:</code></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10169/optimized-out.png" style="display: block; height: 235px; margin-left: auto; margin-right: auto; width: 332px;"></p>
+
+<h2 id="Modificando_variáveis">Modificando variáveis</h2>
+
+<p>Quando o código pára num breakpoint, você pode modificar variáveis variáveis no painel de variáveis do debugger. Só clicar na variável atual e você permitirá digitar lá:</p>
+
+<p>{{EmbedYouTube("FKG-jkvSpq8")}}</p>
+
+<h2 id="Observe_uma_expressão">Observe uma expressão</h2>
+
+<p> </p>
+
+<p>Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.</p>
+
+<p>Oberve expressões são expressões que são avaliadas cada vez que a execução pausar. Então você pode examinar os resultados destas expressões. Esses são os resultados que eles deixam nas variáveis inspect  em seu código que você sabe que está lá mas não estão necessariamente pronto no código para inspeção. Para adicionar uma expressão de observação, clique na caixa que diz "Add watch expression" e colocar uma javascript expressão que que tem como saída você gostaria de monitorar como você lê através do código.</p>
+
+<p>Então comece a rodar seu código. Então watch expression faz nada até você iniciar a ler através do seu código, então nada acontece até você alcançar um breakpoint. Neste ponto, uma caixa mostra suas watch expressions ativas e os valores atuais aparecem:</p>
+
+<p>{{EmbedYouTube("CwGU-5wKRw0")}}</p>
+
+<p>You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.</p>
+
+<p>Você pode ler através do seu código, observar o valor da expressão como muda; cada vez que isto faz, a caixa piscará brevemente em amarelo. Você pode remover uma watch expression por clicar o ícone "x" no próximo, e, claro você pode ter mais do que uma watch expression por vez.</p>
diff --git a/files/pt-br/tools/debugger/how_to/index.html b/files/pt-br/tools/debugger/how_to/index.html
new file mode 100644
index 0000000000..084f1717e5
--- /dev/null
+++ b/files/pt-br/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
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">These articles describe how to use the debugger.</span></p>
+
+<p>{{ ListSubpages () }}</p>