aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/orphaned/tools
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:58 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:58 +0100
commit68fc8e96a9629e73469ed457abd955e548ec670c (patch)
tree8529ab9fe63d011f23c7f22ab5a4a1c5563fcaa4 /files/pt-br/orphaned/tools
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.gz
translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.bz2
translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.zip
unslug pt-br: move
Diffstat (limited to 'files/pt-br/orphaned/tools')
-rw-r--r--files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html81
-rw-r--r--files/pt-br/orphaned/tools/add-ons/index.html21
-rw-r--r--files/pt-br/orphaned/tools/css_coverage/index.html136
-rw-r--r--files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html19
-rw-r--r--files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html58
5 files changed, 315 insertions, 0 deletions
diff --git a/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html b/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html
new file mode 100644
index 0000000000..6e70f0a1f6
--- /dev/null
+++ b/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html
@@ -0,0 +1,81 @@
+---
+title: DOM Inspector (Em Pt-Br)
+slug: Tools/Add-ons/DOM_Inspector_Pt-Br
+tags:
+ - DOM
+ - 'DOM:Tools'
+ - DOM_Inspector
+ - DOM_PT-BR
+ - Extensions
+ - Ferramentas
+ - Inspector
+ - Theme
+ - Tools
+ - Web
+ - Web Developer
+ - XUL
+ - 'XUL:Tools'
+ - dev
+ - xu
+translation_of: Tools/Add-ons/DOM_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>O <strong>DOM Inspector</strong> (<span class="highlighted" id="ouHighlight__0_3TO0_5">também</span><span id="noHighlight_0.8210939667615293"> </span><span id="ouHighlight__5_9TO7_15">conhecido</span><span id="noHighlight_0.10419950422281188"> </span><span id="ouHighlight__11_12TO17_20">como</span> <strong>DOMi</strong>) é uma ferramenta de desennvolvimento usada para inspecionar, browse, e editar o DOM (<a href="/en/DOM" title="en/DOM">Document Object Model</a>) de documentos - usando páginas da web ou windows <a href="/en/XUL" title="en/XUL">XUL</a> . <span id="ouHighlight__0_2TO0_0">A</span><span id="noHighlight_0.5958907524347828"> </span><span id="ouHighlight__8_16TO2_11">hierarquia</span><span id="noHighlight_0.7166773220412167"> do </span><span id="ouHighlight__4_6TO16_18">DOM</span><span id="noHighlight_0.30348121513700943"> </span><span id="ouHighlight__18_20TO20_23">pode</span><span id="noHighlight_0.9707276454337468"> </span><span id="ouHighlight__22_23TO25_27">ser</span><span id="noHighlight_0.6536102141047954"> </span><span class="highlighted" id="ouHighlight__25_33TO29_36">navegada</span> usando dois paíneis (two-paned) <span class="highlighted" id="ouHighlight__0_5TO0_5">janela</span><span id="noHighlight_0.5312195703712447"> </span><span id="ouHighlight__7_10TO7_9">que</span><span id="noHighlight_0.9994998737946401"> </span><span id="ouHighlight__12_17TO11_17">permite</span><span id="noHighlight_0.7270030957685153"> </span><span id="ouHighlight__19_19TO19_21">uma</span><span id="noHighlight_0.11231931693430264"> </span><span id="ouHighlight__21_27TO23_31">variedade</span><span id="noHighlight_0.36486474241091016"> </span><span id="ouHighlight__29_30TO33_34">de</span><span id="noHighlight_0.46086701262430685"> </span><span id="noHighlight_0.8085067351475806">pontos de </span><span id="ouHighlight__42_46TO57_61">vista</span><span id="noHighlight_0.008857009421050388"> </span><span id="ouHighlight__32_40TO36_45">diferentes</span><span id="noHighlight_0.8085067351475806"> </span><span id="ouHighlight__48_49TO63_67">sobre</span><span id="noHighlight_0.13700261631713284"> </span><span id="ouHighlight__51_53TO69_69">o</span><span id="noHighlight_0.1633085506840356"> </span><span id="ouHighlight__55_62TO71_79">documento</span><span id="noHighlight_0.7343980002693096"> </span><span id="ouHighlight__64_66TO81_81">e</span><span id="noHighlight_0.1714538003338918"> </span><span id="ouHighlight__68_70TO83_87">todos</span><span id="noHighlight_0.3688022075739785"> os </span><span id="ouHighlight__72_76TO89_91">nós</span><span id="noHighlight_0.472842706334597"> </span><span id="ouHighlight__78_83TO93_98">dentro.</span></p>
+
+<div class="note">
+<p>Esta ferramenta é um add-on para XUL-based em aplicações como o Firefox e o Thunderbird. Se você está procurando o DOM inspector ele está incorporado no Firefox, consulte a documetação para o <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a>. </p>
+</div>
+
+<h2 id="Documentation" name="Documentation">Documentação</h2>
+
+<dl>
+ <dt><a href="/en/DOM_Inspector/Introduction_to_DOM_Inspector" title="en/DOM_Inspector/Introduction_to_DOM_Inspector">Introdução ao DOM Inspector</a></dt>
+ <dd>
+ <div class="textArea" id="destText" style="direction: ltr;">
+ <div><span id="ouHighlight__0_0TO0_1">Aqui um </span><span id="ouHighlight__9_16TO3_10">tutorial</span><span id="noHighlight_0.6125305086888332"> </span><span id="ouHighlight__18_21TO19_21">que</span><span id="noHighlight_0.4269113443136816"> </span><span id="ouHighlight__23_26TO23_25">irá</span><span id="noHighlight_0.6326109664824034"> </span><span id="ouHighlight__28_31TO27_31">ajudá</span><span id="noHighlight_0.034229960779964874">-</span><span id="ouHighlight__33_35TO33_34">lo</span><span id="noHighlight_0.7917926088385331"> a </span><span id="ouHighlight__37_47TO38_44">começar</span><span id="noHighlight_0.9367370038721418"> </span><span id="ouHighlight__49_52TO46_48">com</span><span id="noHighlight_0.21054018653915696"> o </span><span id="ouHighlight__54_56TO52_54">DOM</span><span id="noHighlight_0.5884021418203362"> </span><span id="ouHighlight__58_66TO56_64">Inspector</span>.</div>
+ </div>
+ </dd>
+</dl>
+
+<dl>
+ <dt><a href="/en/DOM_Inspector/DOM_Inspector_FAQ" title="en/DOM_Inspector/DOM_Inspector_FAQ">DOM Inspector FAQ</a></dt>
+ <dd>Perguntas e Respostas comuns sobre o DOM Inspector.</dd>
+</dl>
+
+<dl>
+ <dt><a class="external" href="http://kb.mozillazine.org/DOM_Inspector">Página DOM Inspector no MozillaZine</a></dt>
+ <dd>Mais informaçãoe sobre o DOM Inspector.</dd>
+ <dt><a href="http://asurkov.blogspot.com/2013/02/build-dom-inspector.html">Como criar um DOM Inspector</a></dt>
+ <dd>Postagens sobre como criar o DOM Inspector do início</dd>
+</dl>
+
+<h2 id="Getting_DOM_Inspector" name="Getting_DOM_Inspector">Obter DOM Inspector</h2>
+
+<dl>
+ <dt>Firefox &amp; Thunderbird</dt>
+ <dd>Você pode Baixar e Instalar o <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> para o AMO web site. (Usuarios de navegador Thunderbird AMO em Firefox deve salvar o link de instalação, ou visitar a página do <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/6622" title="https://addons.mozilla.org/en-US/thunderbird/addon/6622">DOM Inspector para Thunderbird</a>.).</dd>
+</dl>
+
+<dl>
+ <dt>Thunderbird 2</dt>
+ <dd><a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/1806">DOM Inspector para Thunderbird 2</a> está disponível para <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/">Thunderbird Add-ons</a>. Ou, construa você mesmo no Thunderbird com as seguintes opções:</dd>
+</dl>
+
+<pre>ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+</pre>
+
+<dl>
+ <dt>Mozilla Suite e SeaMonkey</dt>
+ <dd>Select Tools &gt; Web Development &gt; DOM Inspector.</dd>
+ <dd>Você pode instalar o painel lateral através de:</dd>
+ <dd>Edit &gt; Preferences &gt; Advanced &gt; DOM Inspector</dd>
+ <dd>Então basta abrir o painel inspector e visitar um Web Site..</dd>
+</dl>
+
+<h2 id="Report_a_bug_in_DOM_Inspector" name="Report_a_bug_in_DOM_Inspector">Relatar um bug no DOM Inspector</h2>
+
+<p>Use um nome conveniente <a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&amp;product=Other%20Applications&amp;component=DOM%20Inspector">"DOM Inspector" componente no Bugzilla</a>.</p>
+
+<p>Para descobrir o <a href="https://hg.mozilla.org/dom-inspector" title="https://hg.mozilla.org/dom-inspector">DOM Inspector code</a> e onde vive, consulte o DOM Inspector lista de módulos (<a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="https://wiki.mozilla.org/Modules/All#DOM_Inspector"><span class="external">DOM Inspector module listing)</span></a>.</p>
+
+<p>{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}</p>
diff --git a/files/pt-br/orphaned/tools/add-ons/index.html b/files/pt-br/orphaned/tools/add-ons/index.html
new file mode 100644
index 0000000000..97b6d72ed1
--- /dev/null
+++ b/files/pt-br/orphaned/tools/add-ons/index.html
@@ -0,0 +1,21 @@
+---
+title: Add-ons
+slug: Tools/Add-ons
+tags:
+ - Add-ons
+ - Monitor de WebSocket
+ - Mozilla
+ - dev
+translation_of: Tools/Add-ons
+---
+<div>{{ToolsSidebar}}</div><p>Ferramenta de desenvolvimento não incorporados ao Firefox, mas envia complementos separados (Add-ons).</p>
+
+<dl>
+ <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">Monitor de WebSocket </a></dt>
+ <dd>
+ <div class="textArea" id="destText" style="direction: ltr;">
+ <div><span id="ouHighlight__0_6TO0_6">Examine</span><span id="noHighlight_0.7801873951987488"> </span><span id="ouHighlight__8_10TO8_9">os</span><span id="noHighlight_0.03673517912521185"> </span><span class="highlighted" id="ouHighlight__12_15TO11_15">dados</span><span id="noHighlight_0.10902071587841122"> </span><span id="ouHighlight__17_25TO17_24">trocados</span><span id="noHighlight_0.08447518103517893"> </span><span id="ouHighlight__27_28TO26_27">em</span><span id="noHighlight_0.08281588762759473"> </span><span id="ouHighlight__30_30TO29_31">uma</span><span id="noHighlight_0.9886508826786672"> </span><span id="ouHighlight__42_51TO33_39">conexão</span><span id="noHighlight_0.921900981942863"> de </span><span id="ouHighlight__32_40TO44_53">WebSockets</span><span id="noHighlight_0.25783072364355797">.</span></div>
+ </div>
+ </dd>
+ <dd> </dd>
+</dl>
diff --git a/files/pt-br/orphaned/tools/css_coverage/index.html b/files/pt-br/orphaned/tools/css_coverage/index.html
new file mode 100644
index 0000000000..31d1c8be34
--- /dev/null
+++ b/files/pt-br/orphaned/tools/css_coverage/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Coverage
+slug: Tools/CSS_Coverage
+tags:
+ - CSS
+ - cobertura CSS
+translation_of: Tools/CSS_Coverage
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>Este componente é experimental e não está ainda avaliado no Firefox</p>
+</div>
+
+<p>CSS cobertura é um conjunto de comandos para Ferramentas de desenvolvimento Firefox que ajuda, desembaraçar a bagunça CSS pelo CSS que não está sendo usado, e indicando as artes de seus arquivos CSS que são necessárias para a renderização inicial.</p>
+
+<p>Essas ferramentas são de algum modo experimental porque a definição de "uso".é complicado, mas se espera que dará uma ajuda no trabalho do que está acontecendo.</p>
+
+<p>O caminho que eles usam no geral é:</p>
+
+<ul>
+ <li>Iniciar a cobrir o  rastro ("<code>csscoverage start</code>")</li>
+ <li>Visitar um conjunto representativo das páginas em seu site.</li>
+ <li>Parar o rastreador ("<code>csscoverage stop</code>") e ver as regras não usadas no editor de estilos.</li>
+ <li>Ver um relatório("<code>csscoverage report</code>") que contém as regras que podem ser na linha em cada página.</li>
+</ul>
+
+<p>Um outro comando ("<code>csscoverage oneshot</code>") permite você efetivamente rodar ("<code>csscoverage start; csscoverage stop</code>").</p>
+
+<h2 id="O_que_uso_significa">O que "uso" significa?</h2>
+
+<h3 id="TLDR">TL;DR:</h3>
+
+<p>CSS cobertura checa se o <span style="color: #008000;"><code>tag#id.class</code></span> seletor no exemplo abaixo existe em um conjunto de páginas web.</p>
+
+<pre class="brush: css">@media thing {
+ tag#id.class:hover {
+ foo: bar;
+ }
+}</pre>
+
+<h3 id="Porque">Porque?</h3>
+
+<p>Supostamente seu CSS tem o seguinte: Se, durante o teste, seu mouse não entrar o span. Esta regra é usada?</p>
+
+<pre class="brush: html">&lt;style&gt;
+ span:hover {
+ color: purple;
+ }
+&lt;/style&gt;
+
+&lt;span&gt;Test&lt;/span&gt;
+</pre>
+
+<p>Tecnicamente <code>span:hover</code> não foi usado naquela palavra 'Test' não foi sempre colorido roxo, no entanto a cobertura CSS é realmente sobre estar vendo quais regras são relevantes ou irrelevantes, e <code>span:hover</code> claramente tem relevância para a página..</p>
+
+<p>Similarmente, suponha que o seu CSS tenha o seguinte:</p>
+
+<pre class="brush: html">&lt;style&gt;
+ @media tv {
+ span {
+ color: purple;
+ }
+ }
+&lt;/style&gt;
+
+&lt;span&gt;Test&lt;/span&gt;
+</pre>
+
+<p>Você deve estar querendo plugar uma TV dentro de seu ambiente em ordem para medir relevância? </p>
+
+<p>Mas 'use' não é somente sobre relevância </p>
+
+<p>É a seguinte regra relevante:</p>
+
+<pre class="brush: html">&lt;style&gt;
+ span { }
+&lt;/style&gt;
+
+&lt;span&gt;Test&lt;/span&gt;
+</pre>
+
+<p>Isto pode ser argumentado que não é relevante porque não tem efeito na página e pode portanto se seguramente removido</p>
+
+<p>No entanto acontece o seguinte:</p>
+
+<pre class="brush: html">&lt;style&gt;
+ span {
+ -o-text-curl: minor;
+ }
+&lt;/style&gt;
+
+&lt;span&gt;Test&lt;/span&gt;
+</pre>
+
+<p>Conhecendo se isto é ou não provável requer o uso de mecanismo de pesquisa e alguma técnica analítca, e pode até mesmo saber a versão do browser suportado em seu site. Estas são todas consideradas além do escopo desta ferramenta até a singularidade.</p>
+
+<p>Isto também explica o porquê da div de regra é considerada "usada" no seguinte exemplo.</p>
+
+<pre class="brush: html">&lt;style&gt;
+ div { color: red; }
+ span { color: blue; }
+&lt;/style&gt;
+
+&lt;div&gt;&lt;span&gt;Test&lt;/span&gt;&lt;/div&gt;
+</pre>
+
+<p>Pode ser argumentado que a div em regra não é usada desde que não afete a renderização final da página, no entanto considere esta alternativa definição:</p>
+
+<pre class="brush: html">&lt;style&gt;
+ div { color: red; border: none; }
+ span { color: blue; }
+&lt;/style&gt;
+</pre>
+
+<p>Dífícil saber se a borda em regra é usada, e há muitas outras variações; considere opacidade, visibilidade e conversão de cor ao qual está mais complicando a definição de "uso". Para guardar uma coisa simples, "uso" significaque o seletor acerta um elemento.</p>
+
+<p>Claramente se uma folha de estilo que você alterou durante um teste contém uma regra para um particular página que não é visto durante o teste, então nós marcaremos que esta regra é não "usada" apesar de haver sido vezes alterado. Então vale dobrar  checando antes de você remover as regras do arquivo CSS.</p>
+
+<h2 id="Ressalvas">Ressalvas</h2>
+
+<p>Tenha consciência destas coisas:</p>
+
+<ul>
+ <li>Nós assumimos que uma URL retorna o mesmo cojunto de bytes cada vez que referenciado ao longo do período de teste.</li>
+ <li>Nós não trilhamos folhas de estilos alternativas.</li>
+</ul>
+
+<h2 id="Erros">Erros</h2>
+
+<p>Nós estamos trabalhando em um número de imortantes bugs ( erros ):</p>
+
+<ul>
+ <li>Nós não atualmente trilhamos mudanças para o CSSOM pelo Javascript, inc</li>
+ <li>Adiciona folhas de estilos. Veja erro (bug) 1007533.</li>
+ <li>Marcação no editor de estilo é feito em uma base por linha, e nós atualmente processamos mapas-recurso, então coisas ainda estão confusas se você rodar isso em um comprimido CSS. Veja Erro( <a href="https://bugzil.la/1007073">bug ) 1007073</a>.</li>
+ <li>Nós não incluímos @keyframe informação no pre-carregado sumário. Veja erro ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1034062">bug ) 1034062</a>.</li>
+</ul>
diff --git a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html
new file mode 100644
index 0000000000..a4e9aa924c
--- /dev/null
+++ b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html
@@ -0,0 +1,19 @@
+---
+title: Desabilitar breakpoints
+slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints
+tags:
+ - breakpoint
+ - breakpoints
+translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints
+---
+<div>{{ToolsSidebar}}</div><p>Para desabilitar um breakpoint, desmarqueo check box próximo ao breakpoint's entrada no <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane" title="#source-list-pane">Source list pane</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p>
+
+<p>Alternativamente, ativar o menu de contexto enquanto o ponteiro do mouse estiver sobre a entrada do breakpoint no source list pane, e selecione "Desabilitar breakpoint".</p>
+
+<p>Você pode também remover um brekpoint somente apertando na seta que o representa.</p>
+
+<p>Para desabilitar/habilitar todos os breakpoints, use o "Toggle all breakpoints" botão no Source list pane:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p>
diff --git a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html
new file mode 100644
index 0000000000..7d06312bdc
--- /dev/null
+++ b/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html
@@ -0,0 +1,58 @@
+---
+title: Debugger (before Firefox 52)
+slug: Tools/Debugger_(before_Firefox_52)
+tags:
+ - NeedsTranslation
+ - TopicStub
+translation_of: Tools/Debugger_(before_Firefox_52)
+---
+<div>{{ToolsSidebar}}</div><div class="note">
+<p>This page describes the JavaScript Debugger as it appears before Firefox 52.</p>
+
+<p><a href="/en-US/docs/Tools/Debugger">See what it looks like from Firefox 52 onwards.</a></p>
+</div>
+
+<p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p>
+
+<p>You can use it to debug code running locally in Firefox or running remotely, for example in a Firefox OS device or Firefox on Android. See <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the debugger to a remote target.</p>
+
+<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p>
+
+<hr>
+<h2 id="User_Interface_Tour">User Interface Tour</h2>
+
+<p>To find your way around the debugger, here's a <a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour">quick tour of the UI</a>.</p>
+
+<hr>
+<h2 id="How_to">How to</h2>
+
+<p>To find out what you can do with the debugger, see the following how-to guides:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Open_the_debugger">Open the debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_breakpoint">Set a breakpoint</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">Disable breakpoints</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">Step through code</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">Break on a DOM event</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">Highlight and inspect DOM nodes</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">Search and filter</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables">Examine, modify, and watch variables</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Use_a_source_map">Use a source map</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">Black box a source</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Debug_eval_sources">Debug eval sources</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Access_debugging_in_add-ons">Access debugging in add-ons</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Reference">Reference</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/Keyboard_shortcuts">Keyboard shortcuts</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/Settings">Settings</a></li>
+</ul>
+</div>