initial commit

45 files changed, 6928 insertions, 0 deletions

diff --git a/files/pt-br/tools/3d_view/index.html b/files/pt-br/tools/3d_view/index.html
new file mode 100644
index 0000000000..cae7d5927b
--- /dev/null
+++ b/files/pt-br/tools/3d_view/index.html
@@ -0,0 +1,109 @@
+---
+title: Visualização 3D
+slug: Tools/3D_View
+tags:
+  - Descontinuado
+  - Desenvolvimento Web
+  - Ferramentas
+  - HTML
+translation_of: Tools/3D_View
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>{{ fx_minversion_header("11") }}</p>
+
+<div class="warning">
+<p>A partir da versão 47 do Firefox, a visualização 3D não estará mais disponível.</p>
+
+<p>Existe um complemento que implementa essa funcionalidade (<a href="https://addons.mozilla.org/firefox/addon/tilt/">Tilt 3D</a>), mas que não funciona com o <a href="/pt-BR/docs/Mozilla/Firefox/Multiprocess_Firefox">Firefox multiprocesso</a></p>
+</div>
+
+<p>Quando você clica no botão de visualização 3D, a página vai para o modo de visualização 3D; neste modo, você pode ver sua página apresentada em uma exibição 3D no qual os blocos HTML aninhados estão cada vez mais "alto", projetando para fora a parte inferior da página. Essa visualização faz com que fique mais fácil para visualizar seus conteúdos aninhados.</p>
+
+<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p>
+
+<p>Você pode visualizar a representação do DOM (Document Object Model) de diferentes ângulos, clicando e arrastando sua representação 3D. Elementos que se encontram fora da tela tornam-se visíveis nesta forma de visualização, de forma que você possa ver onde eles estão localizados em relação aos outros elementos. Você pode clicar em qualquer elemento para ver seu código HTML no <a href="/pt-BR/docs/Tools/Page_Inspector#HTML_pane">painel de HTML</a> ou no <a href="/en/Tools/Page_Inspector/Style_panel">painel de Estilo</a>. Reciprocamente, você também pode clicar em elementos da barra de breadcrumbs para selecionar sua representação 3D.</p>
+
+<p>Se você estiver rodando uma versão do Firefox inferior ao 47 e não encontrar o botão 3D no <a href="/pt/Tools/Page_Inspector">inspetor de página</a>, é possível que você tenha que atualizar seus drivers de vídeo. Para mais informações, leia a <a href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">lista de drivers bloqueados</a>.</p>
+
+<h2 id="Controlando_a_visualização_3D">Controlando a visualização 3D</h2>
+
+<p>Existem teclas de atalho e controles do mouse disponívies para a visualização 3D.</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Função</td>
+   <td class="header">Teclado</td>
+   <td class="header">Mouse</td>
+  </tr>
+  <tr>
+   <td>Zoom dentro/fora</td>
+   <td>+ / -</td>
+   <td>Role a roda cima/baixo</td>
+  </tr>
+  <tr>
+   <td>Rotacionar esquerda/direita</td>
+   <td>a / d</td>
+   <td>Mouse esquerda/direita</td>
+  </tr>
+  <tr>
+   <td>Rotacionar cima/baixo</td>
+   <td>w / s</td>
+   <td>Mouse cima/baixo</td>
+  </tr>
+  <tr>
+   <td>Pan esquerda/direita</td>
+   <td>← / →</td>
+   <td>Mouse esquerda/direita</td>
+  </tr>
+  <tr>
+   <td>Pan cima/baixo</td>
+   <td>↑ / ↓</td>
+   <td>Mouse cima/baixo</td>
+  </tr>
+  <tr>
+   <td>Resetar level de zoom</td>
+   <td>0</td>
+   <td>Reseta o zoom por padrão</td>
+  </tr>
+  <tr>
+   <td>Foco no nó selecionado</td>
+   <td>f</td>
+   <td>Garante que o nó selecionado atualmente está visível {{ fx_minversion_inline("13.0") }}</td>
+  </tr>
+  <tr>
+   <td>Resetar visualização</td>
+   <td>r</td>
+   <td>Redefine zoom, rotação e panorâmica para o padrão {{ fx_minversion_inline("12.0") }}</td>
+  </tr>
+  <tr>
+   <td>Esconde o nó atual</td>
+   <td>x</td>
+   <td>Faz com que o nó selecionado atualmente fique invisível; Isso pode ser útil se você precisa chegar a um nó que está obscuro {{ fx_minversion_inline("12.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Casos_de_uso_para_a_visualização_3D">Casos de uso para a visualização 3D</h2>
+
+<p>Há uma variedade de casos que a visualização 3D é útil:</p>
+
+<ul>
+ <li>Se você quebrou o HTML causando problemas de layout, olhando para a visualização 3D pode ajudar você a encontrar onde você errou. Frequentemente, problemas de layout são causados por aninhamento incorreto de conteúdo. Isso pode se tornar muito mais obvio quando olhar para a visualização 3D e ver onde seus elementos estão aninhados incorretamente.</li>
+ <li>Se o conteúdo não estiver sendo exibido, você poderá descobrir o motivo; A visualização 3D permite diminuir o zoom para poder visualizar os elementos que estão sendo renderizados fora da área de visualização da página, dessa maneira você pode encontrar o conteúdo perdido.</li>
+ <li>Você pode obter uma visualização de como a sua página está estruturada para ver se existem outras maneiras de otimizar o seu layout.</li>
+ <li>E, é claro, isso parece <strong>incrível</strong>.</li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Inspetor de página</a></li>
+ <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">Painel HTML</a></li>
+ <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Painel de estilos</a></li>
+ <li><a href="/en/Tools" title="Tools">Ferramentas</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
+</ul>
+
+<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p>
diff --git a/files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html b/files/pt-br/tools/add-ons/dom_inspector_pt-br/index.html
new file mode 100644
index 0000000000..6e70f0a1f6
--- /dev/null
+++ b/files/pt-br/tools/add-ons/dom_inspector_pt-br/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/tools/add-ons/index.html b/files/pt-br/tools/add-ons/index.html
new file mode 100644
index 0000000000..97b6d72ed1
--- /dev/null
+++ b/files/pt-br/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/tools/atuação/index.html b/files/pt-br/tools/atuação/index.html
new file mode 100644
index 0000000000..880187e7e2
--- /dev/null
+++ b/files/pt-br/tools/atuação/index.html
@@ -0,0 +1,380 @@
+---
+title: Performance
+slug: Tools/atuação
+translation_of: Tools/Performance
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p><span class="short_text" id="result_box" lang="pt"><span class="hps">Esta ferramenta</span> <span class="hps">é nova no</span> <span class="hps">Firefox</span> <span class="hps">34</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="pt"><span class="hps">As colunas no</span> <span class="hps">perfil de amostragem</span> <span class="hps">foram expandidos e</span> <span class="hps">renomeado no</span> <span class="hps">Firefox</span> <span class="hps">35:</span> <span class="hps">esta página</span> <span class="hps">descreve os novos</span> <span class="hps">nomes das colunas.</span></span></p>
+</div>
+
+<p><span id="result_box" lang="pt"><span class="hps">A ferramenta de desempenho</span> <span class="hps">é</span> <span class="hps">o substituto para o</span> <span class="hps">perfil de amostragem</span> <span class="hps">JavaScript.</span> <span class="hps">Ele inclui</span> <span class="hps">uma versão atualizada</span> <span class="hps">do</span> <span class="hps">perfil de amostragem</span><span>,</span> <span class="hps">mas acrescenta</span> <span class="hps">um cronograma</span> <span class="hps">taxa de quadros para</span> <span class="hps">ajudar a avaliar</span> <span class="hps">a capacidade de resposta</span><span>.</span> <span class="hps">Temos a intenção de</span> <span class="hps">adicionar mais recursos</span> <span class="hps">em versões futuras.</span></span></p>
+
+<h2 id="Abrindo_a_ferramenta_de_desempenho"><span class="short_text" id="result_box" lang="pt"><span class="hps">Abrindo a</span> <span class="hps">ferramenta de desempenho</span></span></h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">Você pode iniciar</span> <span class="hps">a ferramenta de desempenho</span><span class="atn">, selecionando "</span><span>Performance"</span><span>, no menu</span> <span class="atn hps">"</span><span>Web Developer</span><span>"</span><span>.</span> <span class="hps">Você encontrará o</span> <span class="atn hps">menu "</span><span>Web Developer</span><span>" sob o</span> <span class="atn hps">menu "</span><span>Ferramentas</span><span>"</span> <span class="hps">no Linux e</span> <span class="hps">OS</span> <span class="hps">X,</span> <span class="hps">e</span> <span class="hps">diretamente sob o</span> <span class="atn hps">menu "</span><span>Firefox"</span> <span class="hps">no Windows.</span> <span class="hps">Alternativamente</span><span>, Shift</span> <span class="hps">+</span> <span class="hps">F5</span> <span class="hps">irá</span> <span class="hps">abrir a ferramenta</span><span>.</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8575/performance-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="itamenu"> </div>
+</div>
+</div>
+
+<div id="gt-src-tools-r"> </div>
+</div>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;">
+<div id="tts_button"> </div>
+
+<h2 id="A_criação_de_perfis"><span class="short_text" id="result_box" lang="pt"><span class="hps">A criação de perfis</span></span></h2>
+</div>
+</div>
+
+<p><span id="result_box" lang="pt"><span class="hps">Para começar a gravar</span> <span class="hps">um novo perfil</span><span>, clique no</span> <span class="hps">ícone do cronômetro</span><span>.</span> <span class="hps">Clique novamente para</span> <span class="hps">terminar a gravação</span><span>.</span> <span class="hps">O perfil</span> <span class="hps">será imediatamente</span> <span class="hps">aberto.</span> <span class="hps">Você pode</span> <span class="hps">salvar o perfil</span> <span class="hps">como um arquivo</span> <span class="hps">JSON</span> <span class="hps">e importação</span> <span class="hps">salva</span> <span class="hps">perfis.</span> <span class="hps">A barra lateral</span> <span class="hps">à esquerda</span> <span class="hps">permite que você alterne</span> <span class="hps">entre</span> <span class="hps">vários perfis</span> <span class="hps">abertos.</span></span></p>
+
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="itamenu"> </div>
+</div>
+</div>
+
+<div id="gt-src-tools-r"> </div>
+</div>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;">
+<div id="tts_button"> </div>
+
+<h2 id="Análise_de_perfis"><span class="short_text" id="result_box" lang="pt"><span class="hps">Análise de</span> <span class="hps">perfis</span></span></h2>
+</div>
+</div>
+
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="tts_button"><span class="short_text" id="result_box" lang="pt"><span class="hps">Um perfil</span> <span class="hps">é algo como isto</span><span>:</span></span></div>
+</div>
+</div>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8823/performance-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p><span id="result_box" lang="pt"><span class="hps">Ele consiste em</span> <span class="hps">quatro seções principais</span> <span class="hps">camadas</span> <span class="hps">horizontalmente</span><span>:</span></span></p>
+
+<ol>
+ <li>
+  <div id="gt-src-tools-l">
+  <div id="gt-input-tool" style="display: inline-block;">
+  <div id="tts_button"><span id="result_box" lang="pt"><span class="hps">um conjunto</span> <span class="hps">de migalhas de pão</span> <span class="hps">que</span> <span class="hps">você pode usar para</span> <span class="hps">zoom in e out</span></span></div>
+  </div>
+  </div>
+  <a href="/en-US/docs/Tools/Performance#Zooming_in"><img alt="" src="https://mdn.mozillademos.org/files/8825/performance-breadcrumbs.png" style="display: block; margin-left: auto; margin-right: auto;"></a>
+
+  <div id="gt-src-tools">
+  <div id="gt-src-tools-l">
+  <div id="gt-input-tool" style="display: inline-block;">
+  <div id="itamenu"> </div>
+  </div>
+  </div>
+
+  <div id="tts_button"><span class="short_text" id="result_box" lang="pt"><span class="hps">um cronograma</span> <span class="hps">taxa de quadros</span></span></div>
+  </div>
+  <img alt="" src="https://mdn.mozillademos.org/files/8827/performance-framerate.png" style="display: block; margin-left: auto; margin-right: auto;"></li>
+ <li>
+  <div id="gt-src-tools-l">
+  <div id="gt-input-tool" style="display: inline-block;">
+  <div id="tts_button"><span class="short_text" id="result_box" lang="pt"><span class="hps">um cronograma para</span> <span class="hps">a execução de código</span> <span class="hps">plataforma</span></span></div>
+  </div>
+  </div>
+  <img alt="" src="https://mdn.mozillademos.org/files/8841/performance-js-timeline.png" style="display: block; margin-left: auto; margin-right: auto;"><span id="result_box" lang="pt"><span class="hps">a saída</span> <span class="hps">detalhada do</span> <span class="hps">perfil de amostragem</span> <span class="hps">JavaScript</span></span></li>
+ <li><img alt="" src="https://mdn.mozillademos.org/files/8845/performance-js-profiler.png" style="display: block; margin-left: auto; margin-right: auto;"></li>
+</ol>
+
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="itamenu"> </div>
+</div>
+</div>
+
+<div id="gt-src-tools-r"> </div>
+</div>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;">
+<div id="tts_button"> </div>
+
+<h2 id="O_cronograma_taxa_de_quadros"><span class="short_text" id="result_box" lang="pt"><span class="hps">O cronograma</span> <span class="hps">taxa de quadros</span></span></h2>
+</div>
+</div>
+
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="itamenu"> </div>
+</div>
+</div>
+
+<div id="tts_button"><span id="result_box" lang="pt"><span class="hps">O cronograma</span> <span class="hps">taxa de quadros</span> <span class="hps">dá-lhe</span> <span class="hps">uma visão geral de</span> <span class="hps">capacidade de resposta do</span> <span class="hps">navegador</span> <span class="hps">no período coberto</span> <span class="hps">pelo perfil.</span></span></div>
+</div>
+
+<p><span id="result_box" lang="pt"><span class="hps">Um quadro</span> <span class="hps">encapsula</span> <span class="hps">o trabalho</span> <span class="hps">do</span> <span class="hps">navegador precisa</span> <span class="hps">fazer a fim de</span> <span class="hps">pintar</span> <span class="hps">em resposta a algum</span> <span class="hps">evento.</span> <span class="hps">Por exemplo, se</span> <span class="hps">movendo o mouse sobre</span> <span class="hps">algum elemento</span> <span class="hps">página</span> <span class="hps">desencadeia</span> <span class="hps">alguns</span> <span class="hps">JavaScript</span> <span class="hps">que</span> <span class="hps">muda a aparência do</span> <span class="hps">elemento,</span> <span class="hps">e</span> <span class="hps">que desencadeia</span> <span class="hps">um</span> <span class="hps">refluxo e</span> <span class="hps">um</span> <span class="hps">repaint</span><span>,</span> <span class="hps">depois</span> <span class="hps">de todo esse trabalho</span> <span class="hps">precisa ser concluída</span> <span class="hps">nesse quadro.</span> <span class="hps">Se demorar</span> <span class="hps">muito tempo para o</span> <span class="hps">navegador para</span> <span class="hps">processar o quadro</span><span>,</span> <span class="hps">em seguida,</span> <span class="hps">o navegador irá</span> <span class="hps">aparecer</span> <span class="hps">sem resposta</span></span> (<a href="/en-US/docs/Glossary/Jank">janky</a>).</p>
+
+<div class="g-unit" id="gt-src-c">
+<div id="gt-src-p">
+<div id="gt-src-wrap">
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="tts_button"><span id="result_box" lang="pt"><span class="hps">A ferramenta de desempenho</span> <span class="hps">leva um</span> <span class="hps">timestamp</span> <span class="hps">quando o navegador</span> <span class="hps">termina</span> <span class="hps">um quadro,</span> <span class="hps">e</span> <span class="hps">usa isso para</span> <span class="hps">manter o controle</span> <span class="hps">da taxa de quadros</span><span>:</span></span></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8827/performance-framerate.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="tts_button"><span id="result_box" lang="pt"><span class="hps">O eixo x</span> <span class="hps">é o tempo</span> <span class="hps">durante o período de</span> <span class="hps">perfil</span><span>,</span> <span class="hps">e há três</span> <span class="hps">anotações:</span> <span class="hps">a taxa de</span> <span class="hps">quadro de destino</span> <span class="hps">(sempre</span> <span class="hps">60 quadros</span> <span class="hps">por segundo),</span> <span class="hps">a média de frames</span><span>,</span> <span class="hps">ea menor</span> <span class="hps">taxa de quadros.</span></span></div>
+</div>
+</div>
+</div>
+
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="itamenu"> </div>
+</div>
+</div>
+
+<div id="gt-src-tools-r">
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="itamenu"> </div>
+</div>
+</div>
+
+<h2 id="Execução_de_código_Platform"><span class="short_text" id="result_box" lang="pt"><span class="hps">Execução de código</span> <span class="hps">Platform</span></span></h2>
+</div>
+</div>
+</div>
+
+<div id="gt-src-tools">
+<div id="gt-src-tools-l">
+<div id="gt-input-tool" style="display: inline-block;">
+<div id="tts_button"><span id="result_box" lang="pt"><span class="hps">Isto dá-lhe</span> <span class="hps">uma visão geral de</span> <span class="hps">execução de código</span> <span class="hps">no período coberto</span> <span class="hps">pelo perfil.</span> <span class="hps">Tal como acontece com</span> <span class="hps">o cronograma</span> <span class="hps">taxa de quadros</span><span>, o eixo</span> <span class="hps">x</span> <span class="hps">representa o tempo</span> <span class="hps">durante o período de</span> <span class="hps">perfis,</span> <span class="hps">e as amostras</span> <span class="hps">são colocadas para fora</span> <span class="hps">como barras</span> <span class="hps">verticais</span> <span class="hps">na ordem em que</span> <span class="hps">foram tiradas,</span> <span class="hps">esquerda para a direita</span><span>:</span></span></div>
+</div>
+</div>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8841/performance-js-timeline.png" style="display: block; margin-left: auto; margin-right: auto;"><span id="result_box" lang="pt"><span class="hps">A altura</span> <span class="hps">de</span> <span class="hps">cada</span> <span class="hps">barra representa</span> <span class="hps">a profundidade</span> <span class="hps">da pilha de chamadas</span> <span class="hps">neste ponto</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="pt"><span class="hps">A ferramenta de desempenho</span> <span class="hps">examina</span> <span class="hps">a pilha de chamadas</span> <span class="hps">e</span> <span class="hps">descobre</span> <span class="hps">os</span> <span class="hps">tipos de coisas</span> <span class="hps">o código</span> <span class="hps">JavaScript</span> <span class="hps">está fazendo,</span> <span class="hps">e divide o</span> <span class="hps">bar</span> <span class="hps">em</span> <span class="hps">cores</span> <span class="hps">de acordo:</span></span></p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td>Network</td>
+   <td><span id="result_box" lang="pt"><span class="hps">Envio e</span> <span class="hps">processamento de</span> <span class="hps">pedidos e respostas</span> <span class="hps">de rede</span></span></td>
+  </tr>
+  <tr>
+   <td>JIT</td>
+   <td><span class="short_text" id="result_box" lang="pt"><span class="hps">Compilação de código</span> <span class="hps">JavaScript</span></span></td>
+  </tr>
+  <tr>
+   <td>GC</td>
+   <td>Garbage collection</td>
+  </tr>
+  <tr>
+   <td>Inputs &amp; events</td>
+   <td>Eventos como de mouse ou eventos de DOM</td>
+  </tr>
+  <tr>
+   <td>Styles</td>
+   <td>Análise de CSS</td>
+  </tr>
+  <tr>
+   <td>Graphics</td>
+   <td>Inclue manipulção de reflows e repaints assim como WebGL</td>
+  </tr>
+  <tr>
+   <td>Storage</td>
+   <td>Na maioria das vezes é o IndexedDB</td>
+  </tr>
+  <tr>
+   <td>Gecko</td>
+   <td><span id="result_box" lang="pt"><span class="hps">Tudo o que</span> <span class="hps">não se encaixa</span> <span class="hps">em nenhuma das</span> <span class="hps">outras categorias</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Passando o cursor sobre a chave de cor de uma dada categoria desvanece as outras categorias:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8843/performance-js-timeline-category-selected.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Essa é a visão de linhas alinhadas com a taxa de quadros em um determinado tempo, assim você poderá correlacionar a lentidão da taxa de quadros com operações Javascript particulares.</p>
+
+<div class="note">
+<p><span id="result_box" lang="pt"><span class="alt-edited hps">Note que</span> essa visão <span class="hps">mostra</span> <span class="hps">tudo o que a</span> <span class="hps">plataforma</span> <span class="hps">está fazendo,</span> <span class="hps">não apenas o seu</span> <span class="hps">próprio código.</span></span></p>
+</div>
+
+<h3 id="Perfil_de_amostragem_JavaScript">Perfil de amostragem JavaScript</h3>
+
+<p>O profiller periodicamento gera amostras do estado do motor Javascript e registra a pilha para o código em execução no momento em que a amostra foi colhida. Estatiscamente, <span id="result_box" lang="pt"><span class="hps">o número</span> <span class="hps">de amostras colhidas</span> <span class="hps">que</span> <span class="alt-edited hps">executavam</span> <span class="hps">uma determinada função</span> <span class="hps">corresponde à</span> <span class="hps">quantidade de</span> <span class="hps">tempo que o navegador</span> <span class="hps">está gastando para</span> <span class="hps">executá-la</span><span>, assim é possível </span><span class="hps">identificar gargalos</span> <span class="hps">em seu código.</span></span><br>
+ <br>
+ <a name="profiling-example">Por exemplo, considere um programa como este:</a></p>
+
+<pre class="brush: js">function doSomething() {
+  var x = getTheValue();
+  x = x + 1;                // -&gt; A (from the top level)
+  logTheValue(x);
+}
+
+function getTheValue() {
+  return 5;                 // -&gt; B (from doSomething())
+}
+
+function logTheValue(x) {
+                            // -&gt; C (from doSomething())
+                            // -&gt; D (from doSomething())
+                            // -&gt; E (from the top level)
+ console.log(x);
+}
+
+doSomething();
+
+logTheValue(6);</pre>
+
+<p>Suponha que nós executamos o programa com o profile ativado, e no tempo que leva para executar, o profile registrou 5 amostras, como indicado nos comentários do código acima.</p>
+
+<p>Four are taken from inside <code>doSomething()</code>. Of those, <code>A</code> is directly inside <code>doSomething()</code>. <code>B</code> is inside <code>getTheValue()</code>, and <code>C</code> and <code>D</code> are inside <code>logTheValue()</code>. Finally, the program makes a call to <code>logTheValue()</code> from the top level, and we get a sample there, too. So the profile would consist of five stack traces, like this:</p>
+
+<pre>Sample A: doSomething()
+Sample B: doSomething() &gt; getTheValue()
+Sample C: doSomething() &gt; logTheValue()
+Sample D: doSomething() &gt; logTheValue()
+Sample E: logTheValue()</pre>
+
+<p>This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that <code>logTheValue()</code> is the bottleneck in our code.</p>
+
+<h4 id="Profile_structure">Profile structure</h4>
+
+<p>The sampling profiler's details pane looks something like this:<img alt="" src="https://mdn.mozillademos.org/files/8845/performance-js-profiler.png" style="display: block; margin-left: auto; margin-right: auto;">It presents the samples collected as a table.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>Samples</td>
+   <td>
+    <p>The number of samples that were taken in which the corresponding "Function" appeared in the call stack. For example, given the profiling example above, the corresponding "Samples" and "Functions" columns would look like:</p>
+
+    <pre>
+4  doSomething()
+2  &gt; logTheValue()
+1  &gt; getTheValue()
+1  logTheValue()</pre>
+
+    <p>Note that <code>logTheValue()</code> appears twice, because it's called from two different places.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Function</td>
+   <td>This includes the function name, source file, line number and domain that served the file. Clicking on the file name takes you to that file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</td>
+  </tr>
+  <tr>
+   <td>Total Cost</td>
+   <td>A direct translation of the "Samples" column into a percentage.</td>
+  </tr>
+  <tr>
+   <td>Self Cost</td>
+   <td>
+    <p>The "Samples" column includes not only samples that were taken while the JavaScript engine was executing this function, but also samples taken while executing functions called by this function.</p>
+
+    <p>For example, in the example above we record 4 samples for <code>doSomething()</code>, but 3 of those samples were taken while the JavaScript engine was executing functions called by <code>doSomething()</code>.</p>
+
+    <p>"Self Cost" is the number of samples taken while the JavaScript engine was actually executing this function, translated into a percentage. In the example above, the "Self Cost" for <code>doSomething()</code> is 20% (1 sample out of 5 in total was taken while actually executing the function).</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Total Time</td>
+   <td>
+    <p>A statistical estimate of the amount of time spent inside the function, given the number of samples that were taken in it.</p>
+
+    <p>This value is derived from "Samples" but is not a direct translation, because we don't always take samples at exactly the right time, so we attempt to correct for this irregularity.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>Self Time</td>
+   <td>
+    <p>A statistical estimate of the amount of time spent executing the function, exclusive of any functions called by this function.</p>
+
+    <p>Just as "Total Time" is not a direct translation of  "Samples", so "Self Time" is not a direct translation of "Self Cost".</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>For a deeper look into the way the sampling profiler presents data, see this <a href="/en-US/docs/Tools/Performance/Profiler_walkthrough">walkthrough of a profile</a>.</p>
+
+<h4 id="Inverting_the_call_tree">Inverting the call tree</h4>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 36</p>
+</div>
+
+<p>By default, the profiler shows you the call tree from the root to the leaves, like a normal call stack. That is, from each top-level function to the functions it calls, then to the functions they call, and so on:</p>
+
+<pre>4  doSomething()
+2  &gt; logTheValue()
+1  &gt; getTheValue()
+1  logTheValue()</pre>
+
+<p>This seems logical as it's the temporal order in which the stack is built up, and it's also conventional to represent a call stack in that way. However, often the places where you're spending time are deep in the call tree. So when you look at a profile you'll often click through many higher-level functions with a low "Self Cost", and it can be hard to see the places you're actually spending most of the time.</p>
+
+<p>From Firefox 36 there's a new checkbox in the profiler labeled "Invert Call Tree". If you select this option, the profiler:</p>
+
+<ul>
+ <li>makes a list of all functions with a <em>Self Cost</em> greater than zero: that is, functions which were actually executing when the sample was taken</li>
+ <li>orders the list by the number of samples taken while in that function</li>
+ <li>for each entry in the list, shows the call stack backwards to the top-level function.</li>
+</ul>
+
+<p>This is usually a more effective way to highlight where your code is spending its time.</p>
+
+<h4 id="Zooming_in">Zooming in</h4>
+
+<p>Clicking on a row highlights all the samples in the <a href="/en-US/docs/Tools/Performance#The_sampling_profiler_timeline">timeline view</a> in which this function appears:<img alt="" src="https://mdn.mozillademos.org/files/8835/performance-js-profiler-frame-selected.png" style="display: block; margin-left: auto; margin-right: auto;">If you hover over a row you'll see a magnifying glass at the right-hand end of it. Clicking the magnifying glass makes that row the root: that is, it presents the entire profile as if only that row and the rows underneath it exist:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/8833/performance-js-profiler-frame-made-root.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Note that this also <a href="/en-US/docs/Tools/Performance#Zooming_in">zooms in</a> on the section of the profile in which these samples were taken.</p>
+
+<h3 id="Zooming_in_2">Zooming in</h3>
+
+<p>If you click and drag in either the frame rate timeline or the sampling profiler timeline, then:</p>
+
+<ul>
+ <li>a section of the timeline is highlighted</li>
+ <li>the sampling profiler details view now shows only samples that were recorded in that section</li>
+ <li>you'll see a "+" appear in the toolbar at the top:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8839/performance-js-profiler-timeslice-selected.png" style="display: block; margin-left: auto; margin-right: auto;">Click the "+", and the highlighted section is expanded to fill the timeline. The toolbar at the top now shows the section as a separate breadcrumb:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8837/performance-js-profiler-timeslice-open.png" style="display: block; margin-left: auto; margin-right: auto;">You can switch between the complete profile and the section using the breadcrumbs. You can also zoom in on a subsection within the section, and that will then appear as a third breadcrumb in the toolbar:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8829/performance-js-profiler-2nd-timeslice-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/pt-br/tools/browser_console/index.html b/files/pt-br/tools/browser_console/index.html
new file mode 100644
index 0000000000..e9b80811f7
--- /dev/null
+++ b/files/pt-br/tools/browser_console/index.html
@@ -0,0 +1,179 @@
+---
+title: Console do navegador
+slug: Tools/Browser_Console
+tags:
+  - Debugging
+  - Desenvolvimento Web
+  - Ferramentas
+  - console do navegador
+  - 'desenvolvimento web: ferramentas'
+translation_of: Tools/Browser_Console
+---
+<div>{{ToolsSidebar}}</div><p>O Console do navegador é como o <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console Web</a>, mas é aplicado a todo o navegador, ao invés de uma única guia de conteúdo.</p>
+
+<p>Ele registra os mesmos tipos de informações do Console Web – solicitações de rede, JavaScript, CSS, erros e avisos de segurança, e mensagens explicitas registradas pelo código JavaScript. No entanto, ao invés de registrar essas informações para uma única guia de conteúdo, ele registra as informações para todas às guias, complementos, e para o próprio código do navegador.</p>
+
+<p>Se você também quiser usar as outras <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">ferramentas</a> de desenvolvimento web com complementos ou código no navegador, considere o uso de <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox">ferramentas do navegador</a>.</p>
+
+<p>Da mesma forma, você pode executar expressões JavaScript usando o Console do navegador. Mas enquanto o Console Web executa o código no âmbito da página, o Console do navegador executa-os no âmbito da janela do navegador. Isto significa que você pode interagir com todas às guias usando o <a href="https://developer.mozilla.org/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a>, com o mesmo  XUL usado para especificar a interface de usuário do navegador.</p>
+
+<div class="geckoVersionNote">
+<p>Obs: A partir do Firefox 30, o Console de linha de comando do navegador (para executar expressões em JavaScript) está desabilitado por padrão. Para habilitá-lo configure a opção <code>devtools.chrome.enabled</code> para <code>true</code> em about:config, ou defina a opção “Enable chrome debugging” nas <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Advanced_settings">configurações das ferramentas de desenvolvedor</a>.</p>
+</div>
+
+<h2 id="Abrindo_o_Console_do_navegador">Abrindo o Console do navegador</h2>
+
+<p>Você pode abrir o Console do navegador de duas maneiras:</p>
+
+<ol>
+ <li>A partir do menu: selecione a opção “Desenvolvedor” e depois “Console do navegador” (ou no menu Tools se você exibe a barra de menu no OS X);</li>
+ <li> A partir do teclado: pressione Ctrl+Shift+J (ou Cmd+Shift+J no Mac).</li>
+</ol>
+
+<p>Note que até o Firefox 38, o Console do navegador se tornava oculto pela janela do Firefox, e você poderia selecioná-lo novamente a partir do menu ou do teclado, e em seguida ele era fechado. A partir do Firefox 38, isso tem o efeito de trocar o foco de volta para o Console do navegador, e provavelmente era isso o que você estava querendo.</p>
+
+<p>Você também pode iniciar o Console do navegador iniciando o Firefox a partir da linha de comando, e passando o argumento <code>-jsconsole:</code></p>
+
+<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>
+
+<p>O Console de navegador se parece com isso:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Você pode ver que o Console do navegador se comporta e se parece muito com o <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console Web</a>:</p>
+
+<ul>
+ <li>A maior parte da janela é ocupada pelo <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Message_Display_Pane">painel que exibe as mensagens</a>.</li>
+ <li>No topo, a <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">barra de ferramentas</a> permite que você filtre as mensagens que são exibidas.</li>
+ <li>Na parte inferior, o <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#The_command_line_interpreter">interpretador de linha de comando</a> permite que você avalie expressões JavaScript.</li>
+</ul>
+
+<h2 id="Registros_no_Console_do_navegador">Registros no Console do navegador</h2>
+
+<p>O Console do navegador registra os mesmos tipos de mensagens que o Console Web registra, como:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">Requisições HTTP</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Warnings_and_errors">Avisos e erros</a> (incluindo JavaScript, CSS, avisos e erros de segurança, e mensagens explicitamente registradas pelo código JavaScript usando a API do <a href="https://developer.mozilla.org/en-US/docs/Web/API/console">console</a>).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Entrada/saída de mensagens</a>: comandos enviados para o navegador via linha de comando, e os resultados da execução deles.</li>
+</ul>
+
+<p>Entretanto, ele exibe mensagens a partir de:</p>
+
+<ul>
+ <li>Conteúdos web hospedado por todas as guias.</li>
+ <li>Códigos do próprio navegador</li>
+ <li>Complementos.</li>
+</ul>
+
+<h3 id="Mensagens_de_complementos">Mensagens de complementos</h3>
+
+<p>O Console do navegador exibe mensagens registradas por todos os complementos do Firefox.</p>
+
+<h4 id="Console.jsm">Console.jsm</h4>
+
+<p>Para usar a API do Console de complemento tradicional ou bootstrapped, obtenha-lo a partir do modulo do Console.</p>
+
+<p>Um símbolo de exportado do Console.jsm é “console”. Abaixo está um exemplo de como acessá-lo, e adicionar uma mensagem para o Console do navegador.</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/devtools/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console</pre>
+
+<p>Saiba mais:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/console">Referência da API do Console</a></li>
+ <li><a href="http://mxr.mozilla.org/mozilla-release/source/toolkit/devtools/Console.jsm">Código fonte do Console.jsm no Mozilla Cross-Reference</a></li>
+</ul>
+
+<h4 id="HUDService">HUDService</h4>
+
+<p>Há também o HUDService que permite acessar o Console do navegador. O módulo está disponível no <a href="http://mxr.mozilla.org/mozilla-release/source/browser/devtools/webconsole/hudservice.js">Mozilla Cross-Reference</a>. Podemos ver, que não somente podemos acessar o Console do navegador como também podemos acessar o Console Web.</p>
+
+<p>Aqui está um exemplo de como limpar o conteúdo do Console do navegador:</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);</pre>
+
+<p>Se você gostaria de acessar conteúdo do Console do navegador, poderá fazer isso com o HUDService. Este exemplo faz com que quando você passe o mouse sobre o botão “Clear” ele limpe o Console do navegador.</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);</pre>
+
+<h4 id="Características_extras_disponíveis">Características extras disponíveis</h4>
+
+<p>Para <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">complementos SDK</a>, a API do Console está disponível automaticamente. Aqui está um exemplo de um complemento que apenas registra um erro quando o usuário clica no widget:</p>
+
+<pre class="brush: js">widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}</pre>
+
+<p>Se você o <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">construiu com um arquivo XPI</a>, abra o Console do navegador, e em seguida abra o arquivo XPI no Firefox e o instale, você verá um widget rotulado como “Error!” na barra de complementos:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Clique no ícone. Você verá uma saída como esta no Console do navegador:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Somente para complementos baseados no SDK a mensagem é prefixada com o nome do complemento (“log-error”), tornando mais fácil encontrar todas as mensagens para este complemento usando o <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">filtro de saída</a> na caixa de pesquisa. Por padrão, apenas mensagens de erros são registradas para o Console, embora <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">você pode mudar isso nas configurações do navegador</a>.</p>
+
+<h2 id="Linha_de_comando_no_Console_do_navegador">Linha de comando no Console do navegador</h2>
+
+<div class="geckoVersionNote">
+<p>A partir do Firefox 30, a linha de comando no Console do navegador está desabilitada por padrão. Para habilita-la defina a configuração <code>devtools.chrome.enabled</code> para <code>true</code> no about:config, ou a opção “Enable chrome debugging” nas <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Advanced_settings">configurações de ferramentas de desenvolvedor</a>.</p>
+</div>
+
+<p>Como o Console Web, o interpretador de linha de comando permite que você avalie expressões JavaScript em tempo real:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Como o interpretador de linha de comando do Console Web, este também suporta completamento automático, histórico, vários atalhos de teclado e comandos auxiliares. Se o resultado do comando é um objeto, você pode clicar sobre ele e ver seus detalhes.</p>
+
+<p>Mas, enquanto o Console Web executa o código no escopo do conteúdo da janela anexada, o Console do navegador executa o código no escopo da janela do navegador. Você pode confirmar isso avaliando <code>window</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Isto significa que você pode controlar o navegador: abrindo e fechando guias e janelas, e modificando o conteúdo que se encontra nelas, e modificando a UI do navegador, criando, modificando e removendo elementos XUL.</p>
+
+<h3 id="Controlando_o_navegador">Controlando o navegador</h3>
+
+<p>O interpretador de linha de comando obtém acesso ao objeto <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a>, através do <code>gBrowser</code>, o que lhe permite controlar o navegador através da linha de comando. Tente executar este código no Console do navegador (para inserir múltiplas linhas no Console do navegador, use Shift+Enter):</p>
+
+<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "&lt;h1&gt;this page has been eaten&lt;/h1&gt;";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre>
+
+<p>Isto adiciona um listener para o evento de <code>load</code> da guia atual no momento da criação de uma nova página, e em seguida, carrega a nova página.</p>
+
+<h3 id="Modificando_a_UI_do_navegador">Modificando a UI do navegador</h3>
+
+<p>Uma vez que o objeto global <code>window</code> é a janela do navegador, você pode modificar a interface do usuário. O seguinte código irá adicionar um novo item ao menu principal do navegador:</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">No OS X, este código similar irá adicionar um novo item ao menu “Tools”:</p>
+
+<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
diff --git a/files/pt-br/tools/css_coverage/index.html b/files/pt-br/tools/css_coverage/index.html
new file mode 100644
index 0000000000..31d1c8be34
--- /dev/null
+++ b/files/pt-br/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/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>
diff --git a/files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/pt-br/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html
new file mode 100644
index 0000000000..a4e9aa924c
--- /dev/null
+++ b/files/pt-br/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/tools/debugger_(before_firefox_52)/index.html b/files/pt-br/tools/debugger_(before_firefox_52)/index.html
new file mode 100644
index 0000000000..7d06312bdc
--- /dev/null
+++ b/files/pt-br/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>
diff --git a/files/pt-br/tools/depurador/index.html b/files/pt-br/tools/depurador/index.html
new file mode 100644
index 0000000000..225f4cb20a
--- /dev/null
+++ b/files/pt-br/tools/depurador/index.html
@@ -0,0 +1,448 @@
+---
+title: Depurador
+slug: Tools/Depurador
+translation_of: Tools/Debugger
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>O Depurador Javascript permite percorrer o código JavaScript e examinar ou modificar seu estado para ajudar a localizar bugs.</p>
+
+<p>Você pode usá-lo para depurar código executando localmente no Firefox ou executando remotamente, por exemplo em um dispositivo Firefox OS ou Firefox para android. Este guia assume que você está depurando localmente, mas é na maioria das vezes aplicável para depuração remota também. Veja <a href="/en-US/docs/Tools/Remote_Debugging">o guia para depuração remota</a> (inglês) para as diferenças.</p>
+
+<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p>
+
+<p>Para Abrir o Depurador selecione "Depurador" no submenu do Menu do Firefox (ou menu de Ferramentas , se você exibir a barra de menu ou estiver no Mac OS X), ou pressionando Control+Shift +S (Command -Option- S se estiver no Mac OS X) .</p>
+
+<p>A <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> aparece na parte inferior da janela do navegador, com o depurador ativado. Aqui está o que aparece quando você abrí-lo primeiro:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7019/01-overview-startup.png" style="display: block; margin-left: auto; margin-right: auto;">E aqui está o que aparece no meio de uma sessão de depuração:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7021/02-overview-session.png" style="display: block; margin-left: auto; margin-right: auto;">Neste guia, vamos primeiro ter um rápido passeio de interface do usuário do depurador, em seguida, iremos descrever como executar algumas tarefas comuns de depuração.</p>
+
+<h2 id="A_Interface_do_Usuário_para_Depurador">A Interface do Usuário para Depurador</h2>
+
+<p>A  UI (Interface de Usuário) do depurador é dividida em seis seções principais, que abrangerá uma de cada vez:</p>
+
+<ul>
+ <li><a href="#toolbar">barra de ferramentas</a></li>
+ <li><a href="#source-list-pane">lista de código fonte </a></li>
+ <li><a href="/en-US/docs/Tools/Debugger#Call_stack_pane">painel de lista de chamados</a> (novo no Firefox 29)</li>
+ <li><a href="#source-pane">painel de fontes</a></li>
+ <li><a href="#variables-pane">painel de variáveis</a></li>
+ <li><a href="#events-pane">painel de eventos</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7063/03-ui-sections.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Painel_de_códigos_fontes"><a name="source-list-pane">Painel de códigos fontes</a></h3>
+
+<p>O painel de lista de origem, lista todos os arquivos de origem JS carregados na página, e permite que você selecione um para depuração. A partir do Firefox 29, a origem do painel de lista, compartilha sua tela de imóveis com a pilha de chamadas do painel, e você pode usar as guias na parte superior do painel para alternar entre elas.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7025/04-source-list.png" style="display: block; margin-left: auto; margin-right: auto;">Arquivos de origem são agrupados sob diferentes rubricas de acordo com onde eles são carregados. Você pode selecionar qualquer um desses arquivos e eles serão carregados para o <a href="#source-pane" title="#source-pane">painel de código</a>.<img alt="" src="https://mdn.mozillademos.org/files/7071/24-source-list-details.png" style="display: block; margin-left: auto; margin-right: auto;"><br>
+ Quaisquer pontos de interrupção que você definiu em um arquivo de origem estão listados no painel da lista de origem sob o nome de arquivo. A caixa de seleção ao lado de cada ponto de interrupção permite você ativá-lo / desativá-lo. Clicando com o botão direito na entrada do ponto de interrupção na lista, mostra um menu de contexto permitindo:</p>
+
+<ul>
+ <li>ativar, desativar ou remover este ponto de interrupção, todos os pontos de interrupção, ou todos os pontos de interrupção exceto este</li>
+ <li>fazer este ponto de interrupção condicional (ou editar as suas condições, se já for condicional)</li>
+</ul>
+
+<p>Os três ícones no inferior do painel de código fonte permitem habilitar a caixa-preta, impressão agradável de arquivos JS minificados e alternar todos os pontos de interrupção entre ativos e inativos.</p>
+
+
+
+<h4 id="Caixa-Preta_Black_Boxing">Caixa-Preta (Black Boxing)</h4>
+
+<p>O olho no canto inferior esquerdo do painel é um botão que habilita a <a href="#black-box-a-source">caixa-preta</a> à fonte atualmente selecionada. Black boxing é útil para fontes as quais está usando, mas não debugando, como bibliotecas como jQuery. Se uma fonte esté em black box, é assumido que não há interesse em debugar: qualquer breakpoint dentro da fonte será desabilitado, e o debugger pulará quando estiver  fazendo o passo-a-passo do código.</p>
+
+<p>Nas versões do  Firefox antes do 27, o ícone do olho aparece próximo ao nome do arquivo fonte quando passar o mouse sobre ele.</p>
+
+<h4 id="Impressão_agradável_Pretty_Print">Impressão agradável (Pretty Print)</h4>
+
+<p>O par de chaves <code>{}</code> habilita a função <a href="http://en.wikipedia.org/wiki/Prettyprint">pretty-print</a> tornando o código desminificado, permitindo uma melhor leitura.</p>
+
+<h4 id="Alternar_entre_todos_os_pontos_de_interrupção_Toggle_all_breakpoints">Alternar entre todos os pontos de interrupção (Toggle all breakpoints)</h4>
+
+<div class="geckoVersionNote">
+<p>O botão Toggle all breakpoints  é novo no Firefox 29.</p>
+</div>
+
+<p>O botão vai desabilitar todos os breakpoints, ou reabilitá-los, numa única ação. Isso torna fácil mudar entre rodar um programa e fazer o passo-a-passo por ele.</p>
+
+<h3 id="Painel_pilha_de_chamada">Painel pilha de chamada</h3>
+
+<div class="geckoVersionNote">
+<p>The call stack pane is new in Firefox 29.</p>
+</div>
+
+<p>Na outra aba do lado esquerdo do painel de depuração é exibida na vertical a  pilha de chamadas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7081/23-call-stack.png" style="display: block; margin-left: auto; margin-right: auto;">Cada linha representa um nível na pilha de chamada com a chamada atual no topo do painel. As linhas mostram o nome das funções que estão sendo executadas atualmente e um link para o arquivo fonte e o número da linha.</p>
+
+<h3 id="Painel_de_arquivos"><a name="source-pane">Painel de arquivos</a></h3>
+
+<p>Esse painel exibe os arquivos JS que foram carregados atualmente. Os pontos de interrupção(breakpoints) são sinalizados através de um círculo azul próximo ao numero da linha. Enquanto os pontos de interrupção que você atingiu têm uma flecha verde dentro do círculo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7031/07-breakpoint-hit.png" style="display: block; margin-left: auto; margin-right: auto;">No painel de arquivo, no menu de contexto habilita você:</p>
+
+<ul>
+ <li>Definir um ponto de interrupção</li>
+ <li>Definir um ponto de interrupção condicional</li>
+ <li> Adicionar a visão de uma expressão selecionada</li>
+ <li>Pesquisa ou filtra usando o <a href="#script filter" title="#script filter">script filter</a></li>
+</ul>
+
+<h4 id="Popup_em_variáveis">Popup em variáveis</h4>
+
+<div class="geckoVersionNote">
+<p>O surgimento de Popup de uma variável é novo no Firefox 28.</p>
+</div>
+
+<p>Se você passar o mouse em cima de uma variável, no painel de variáveis, aparece um popup mostrando a você o valor da variável atual:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7033/08-variable-popup.png" style="display: block; margin-left: auto; margin-right: auto;">Isso permite que você veja rapidamente uma variável sem sem ter que abrir e pesquisar o <a href="/en-US/docs/Tools/Debugger#Variables_pane">Painel de Variáveis</a></p>
+
+<h3 id="Barra_de_Ferramentas"><a name="toolbar">Barra de Ferramentas</a></h3>
+
+<p>A barra de ferramentas é composta por quatro seções:</p>
+
+<ul>
+ <li>uma linha de botões para controlhar o movimento através de um script</li>
+ <li>uma visualização da pilha de chamadas</li>
+ <li>o filtro do script</li>
+ <li>botões para mostrar/esconder os paines de <a href="#variables-pane" title="#variables-pane">variaveis</a> e <a href="#events-pane">eventos</a>, e controlar as configurações de debugador</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7035/09-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;">Os quatro botões à esquerda executam as seguintes funções:</p>
+
+<ul>
+ <li><strong>Pause/Resume</strong> (F6): pauses or resumes execution of the script you're debugging. When it's blue and "pressed", as above, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.</li>
+ <li><strong>Step Over</strong> (F7): steps across the current line of JavaScript code.</li>
+ <li><strong>Step Into</strong> (F8): steps into the function call on the current line of JavaScript code.</li>
+ <li><strong>Step Out</strong> (Shift-F8): runs the script until the current function exits.</li>
+</ul>
+
+<p>The call stack visualisation shows the call stack at the point execution is paused.</p>
+
+<h4 id="Script_filter"><a name="script filter">Script filter</a></h4>
+
+<p>The script filter enables you to search in all three of the debugger's panes. By prefixing the filter expression with one of several special characters, the filter provides various different functions.</p>
+
+<dl>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Prefix</th>
+   <th scope="col">Function</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>None</td>
+   <td>Filter the scripts shown in the <a href="#source-list-pane" title="#source-list-pane">source list pane</a>.</td>
+  </tr>
+  <tr>
+   <td>!</td>
+   <td>Search for the string across all files.</td>
+  </tr>
+  <tr>
+   <td>@</td>
+   <td>Search for function definitions, across all files, containing the string.</td>
+  </tr>
+  <tr>
+   <td>#</td>
+   <td>Search for the string in the file currently open in the <a href="#source-pane" title="#source-pane">source pane</a>.</td>
+  </tr>
+  <tr>
+   <td>:</td>
+   <td>Go to the line given in the file currently open in the <a href="#source-pane" title="#source-pane">source pane</a>.</td>
+  </tr>
+  <tr>
+   <td>*</td>
+   <td>Filter the variables shown in the <a href="#variables-pane" title="#variables-pane">variables pane</a>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>These options are shown in a pop-up when you click in the filter, and they're also accessible from the context menu in the <a href="#source-pane" title="#source-pane">source pane</a>. Prefixes can be combined to form more powerful queries, like "file.js:12", which will open file.js and highlight line 12, or "mod#onLoad", which will find the string onLoad in all files containing mod in their name. Hitting the Enter key after searching will cycle between the matches found.</p>
+
+<h4 id="Debugger_settings"><a name="debugger-settings">Debugger settings</a></h4>
+
+<p>At the right-hand end of the toolbar are two more buttons. The first of these shows and hides the <a href="#variables-pane" title="#variables-pane">variables</a> and <a href="#events-pane">events</a> panes, and the second enables you to toggle various debugger settings:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 20%;"><strong>Auto Prettify Minified Sources</strong></td>
+   <td>
+    <p>With this option enabled, the debugger will automatically detect minified JS files and <a href="/en-US/docs/Tools/Debugger#Pretty-print_a_minified_file">pretty-print</a> them.</p>
+
+    <div class="geckoVersionNote">
+    <p>This option is new in Firefox 29.</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 20%;"><strong>Pause on Exceptions</strong></td>
+   <td>When this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.</td>
+  </tr>
+  <tr>
+   <td style="width: 20%;"><strong>Ignore Caught Exceptions</strong></td>
+   <td>If this option is set (it is set by default) and "Pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught. This is usually the behavior you want (you don't generally want to pause execution when an exception that is thrown is caught, since that generally indicates that your program is handling it properly).</td>
+  </tr>
+  <tr>
+   <td><strong>Show Panes on Startup</strong></td>
+   <td>When this option is enabled, the debugger's <a href="#variables-pane" title="#variables-pane">variables pane</a> is visible when you first start the debugger.</td>
+  </tr>
+  <tr>
+   <td><strong>Show Only Enumerable Properties</strong></td>
+   <td>Enabling this option adds a "Filter variables" search box to the <a href="#variables-pane" title="#variables-pane">variables panel</a>, so that you can filter the displayed list of variables.</td>
+  </tr>
+  <tr>
+   <td><strong>Show Variables Filter Box</strong></td>
+   <td>Do not display non-enumerable JavaScript properties</td>
+  </tr>
+  <tr>
+   <td><strong>Show Original Sources</strong></td>
+   <td>Enabling this option will make the debugger use <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+</dl>
+
+<h3 id="Variables_pane"><a name="variables-pane">Variables pane</a></h3>
+
+<p>The variables pane is where you can examine, and modify, the internal state of the script as it's executing:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7037/10-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;">The variables pane shares its screen real estate with the <a href="#events-pane">events pane</a>, and you can use the tabs at the top of the pane to switch between them.</p>
+
+<h4 id="Examining_variables">Examining variables</h4>
+
+<p>Variables are grouped by scope: in Function scope you'll see the built-in <code>arguments</code> and <code>this</code> variables as well as local variables defined by the function like <code>user</code> and <code>greeting</code>. Similarly, in Global scope you'll see global variables you've defined, like <code>greetme</code>, as well as built-in globals like <code>localStorage</code> and <code>console</code>.</p>
+
+<p>Each object can be expanded using a disclosure triangle to show its members.</p>
+
+<p>Pointing your cursor at a variable's name displays a tooltip that provides additional information about the variable; for example, pointing at the <code>greeting</code> object displays "<s>configurable</s> enumerable writable". See <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a> for details on what these property descriptors mean.</p>
+
+<p>You can filter the variables that are displayed, either by using the "*" modifier in the <a href="#script-filter" title="#script-filter">script filter</a>, or by typing into the filter variables box, if you have enabled this in the <a href="#debugger-settings" title="#debugger-settings">debugger settings</a>.</p>
+
+<h4 id="Modifying_variables">Modifying variables</h4>
+
+<p>You can change a variable's value by clicking on its current value and entering a new one; for example, if you click on <code>"Hi, Dr. Nick!"</code> next to <code>greeting</code>, you can edit the value.</p>
+
+<h4 id="Watch_expressions"><a name="watch-expressions">Watch expressions</a></h4>
+
+<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>Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7039/11-watch.png" style="display: block; margin-left: auto; margin-right: auto;">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>
+
+<h4 id="Highlight_and_inspect_DOM_nodes">Highlight and inspect DOM nodes</h4>
+
+<div class="geckoVersionNote">
+<p>This feature is new in Firefox 29.</p>
+</div>
+
+<p>If you hover over a DOM node in the Variables pane, it will be highlighted in the page:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7073/25-highlight-node.png" style="display: block; margin-left: auto; margin-right: auto;">Also, a target icon will appear next to the variable<img alt="" src="https://mdn.mozillademos.org/files/7075/26-inspect%20node.png" style="display: block; margin-left: auto; margin-right: auto;">If you click on this target, the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> will open with this DOM element selected.</p>
+
+<h3 id="Events_pane"><a name="events-pane">Events pane</a></h3>
+
+<div class="geckoVersionNote">
+<p>The events pane is new in Firefox 27.</p>
+</div>
+
+<p>The events pane lists all DOM<span> events that currently have listeners bound from your code:</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7041/12-events.png" style="display: block; margin-left: auto; margin-right: auto;">It shares its screen real estate with the <a href="#variables-pane">variables pane</a>, and you can use the tabs at the top of the pane to switch between them.</p>
+
+<p>It groups events by type. The screenshot above shows four types: Interaction, Keyboard, Mouse, and Navigation. Under each type it lists all events which have listeners in your code, with the following syntax:</p>
+
+<pre class="notranslate">[event name] on [event target] in [source file]</pre>
+
+<p>If you check the checkbox next to the event, the debugger will break at the first line of the event's listener. If you check the checkbox next to the event type, then the debugger will break for any of the events listed under that type.</p>
+
+<h2 id="How_do_I...">How do I...?</h2>
+
+<h3 id="Open_the_debugger">Open the debugger</h3>
+
+<p>To open the debugger, select "Debugger" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or press Control-Shift-S (Command-Option-S on the Mac).</p>
+
+<h3 id="Find_a_source_file">Find a source file</h3>
+
+<p>When the debugger's open, all the JavaScript source files are listed in the <a href="#source-list-pane" title="#source-list-pane">source list pane</a>. You can browse the list to find the one you want, or search for a particular file using the <a href="#script filter" title="#script filter">script filter</a>.</p>
+
+<h3 id="Find_inside_a_file">Find inside a file</h3>
+
+<p>To find a function, search for a string, or jump to a line in a file open in the <a href="#source-pane" title="#source-pane">source pane</a>, you can use one of the special modifiers in the <a href="#script filter" title="#script filter">script filter</a>.</p>
+
+<h3 id="Set_a_breakpoint">Set a breakpoint</h3>
+
+<p>To set a breakpoint in a file open in the <a href="#source-pane" title="#source-pane">source pane</a>:</p>
+
+<ul>
+ <li>either click on the line number for the line you want to break at</li>
+ <li>or activate the context menu while on the line you want to break at, and select "Add breakpoint"</li>
+</ul>
+
+<p>Each breakpoint is shown in two places in the debugger:</p>
+
+<ul>
+ <li>they're listed in the <a href="#source-list-pane" title="#source-list-pane">source list pane</a> underneath the file's name</li>
+ <li>the line in the source pane is marked with a blue circle</li>
+</ul>
+
+<p>The screenshot below shows breakpoints at lines 3 and 10 of the file:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7043/13-set-a-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Set_a_conditional_breakpoint">Set a conditional breakpoint</h3>
+
+<p>To set a conditional breakpoint, activate the context menu while on the line you want to break at, and select "Add conditional breakpoint". Then enter the conditional expression in the popup that appears:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7045/14-set-a-conditional-bp.png" style="display: block; margin-left: auto; margin-right: auto;">To edit the condition, or to add a condition to a normal breakpoint, activate the context menu and select "Configure conditional breakpoint":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7047/15-configure-conditional-bp.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Disable_a_breakpoint">Disable a breakpoint</h3>
+
+<p>To disable a breakpoint:</p>
+
+<ul>
+ <li>either: uncheck the check box next to the breakpoint's entry in the <a href="#source-list-pane" title="#source-list-pane">source list pane</a></li>
+ <li>or: activate the context menu while your mouse pointer is over the breakpoint's entry in the source list pane, and select "Disable breakpoint"</li>
+</ul>
+
+<h3 id="Disableenable_all_breakpoints">Disable/enable all breakpoints</h3>
+
+<div class="geckoVersionNote">
+<p>This feature is new in Firefox 29.</p>
+</div>
+
+<p>To switch all breakpoints on or off, use the "Toggle all breakpoints" button in the <a href="/en-US/docs/Tools/Debugger#Source_list_pane">Source list pane</a>.</p>
+
+<h3 id="Break_on_a_DOM_event">Break on a DOM event</h3>
+
+<div class="geckoVersionNote">
+<p>This feature is new in Firefox 27.</p>
+</div>
+
+<p>If you're listening to a particular DOM event, you can tell the debugger to break when the event is triggered without having to track down the listener and set a breakpont manually.</p>
+
+<p>First, open the <a href="#events-pane">events pane</a>: click the button in the <a href="#toolbar">toolbar</a> that opens the shared variables/events pane, then click the tab labeled "Events". The events pane will list all events for which you have assigned a listener:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7041/12-events.png" style="display: block; margin-left: auto; margin-right: auto;">Then check the box next to the event you want to break at.</p>
+
+<p>When the event is triggered the code will break at the start of your listener.</p>
+
+<h3 id="Step_through_my_code">Step through my code</h3>
+
+<p>When your code stops at a breakpoint, you can step through it using the four buttons on the left of the toolbar:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7049/16-stepping.png" style="display: block; margin-left: auto; margin-right: auto;">In order, the buttons are:</p>
+
+<ul>
+ <li>Play: run to the next breakpoint</li>
+ <li>Step over: advance to the next line in the same function.</li>
+ <li>Step into: advance to the next line in the function, unless on a function call, in which case enter the function being called</li>
+ <li>Step out: run to the end of the current function</li>
+</ul>
+
+<h3 id="Use_a_source_map">Use a source map</h3>
+
+<p>JavaScript sources are often combined and minified to make delivering them from the server more efficient. Increasingly, too, JavaScript running in a page is machine-generated, as when compiled from a language like CoffeeScript. By using <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, the debugger can map the code being executed to the original source files, making debugging much, much easier.</p>
+
+<p>To tell the Debugger to use source maps if they are available, click the "<a href="#debugger-settings" title="#debugger-settings">Debugger settings</a>" button and select "Show original sources" from the list of settings that pops up:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7051/17-source-maps.png" style="display: block; margin-left: auto; margin-right: auto;">Of course, for this to work, you will need to have supplied a source map for the JavaScript running in the page. Do this by appending a comment directive to your source file:</p>
+
+<p><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></p>
+
+<h3 id="Examine_variables">Examine variables</h3>
+
+<p>When the code has stopped at a breakpoint, you can examine its state in the <a href="#variables-pane" title="#variables-pane">variables pane</a> of the debugger:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7037/10-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;">Variables in global scope and in function, block, "with" scopes, etc. are listed separately, and you can expand objects to see their properties. You can also filter the variables shown using the "*" prefix in the <a href="#script filter" title="#script filter">script filter</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7053/18-filter-variables.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Modify_variables">Modify variables</h3>
+
+<p>When the code has stopped at a breakpoint, you can modify variables in the <a href="#variables-pane" title="#variables-pane">variables pane</a> of the debugger. Just click on the variable's current value and you'll be able to type there:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7055/19-modify-variable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Watch_an_expression">Watch an expression</h3>
+
+<p>You can watch the value of a JavaScript expression using the "<a href="#watch-expressions" title="#watch-expressions">Add watch expression</a>" function in the variables pane.</p>
+
+<h3 id="Debug_mobile_devices">Debug mobile devices</h3>
+
+<p>To learn how to debug mobile devices, see the guide to <a href="/en-US/docs/Tools/Remote_Debugging" title="/en-US/docs/Tools/Remote_Debugging">remote debugging</a>.</p>
+
+<h3 id="Black_box_a_source"><a name="black-box-a-source">Black box a source</a></h3>
+
+<p>In modern web development, we often rely on libraries like <a href="http://jquery.com/">jQuery</a>, <a href="http://emberjs.com/">Ember</a>, or <a href="http://angularjs.org/">Angular</a>, and 99% of the time we can safely assume that they “just work”. We don’t care about the internal implementation of these libraries: we treat them like a <a href="http://en.wikipedia.org/wiki/Black_box">black box</a>. However, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. With black boxing, you can tell the debugger to ignore the details of selected sources.</p>
+
+<p>In versions of Firefox before Firefox 27, you can black box a source by clicking the eyeball icon next to the source in the <a href="#source-list-pane">source list pane</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6411/debugger-black-box-fx26.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>From Firefox 27 onwards, enable or disable black boxing for a source by selecting the source in the <a href="#source-list-pane">source list pane</a> and clicking the eyeball icon at the bottom left:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7057/20-black-box.png" style="display: block; margin-left: auto; margin-right: auto;">You can black box several sources at once by opening the <a href="/en-US/docs/Tools/GCLI">developer toolbar</a> and using the <code>dbg blackbox</code> command:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;"></p>
+
+<p>When a source is black boxed:</p>
+
+<ul>
+ <li>Any breakpoints it may have are disabled.</li>
+ <li>When <a href="#debugger-settings">“pause on exceptions”</a> is enabled, the debugger won’t pause when an exception is thrown in the black boxed source; instead it will wait until (and if) the stack unwinds to a frame in a source that isn’t black boxed.</li>
+ <li>The debugger will skip through black boxed sources when stepping.</li>
+</ul>
+
+<h3 id="Pretty-print_a_minified_file">Pretty-print a minified file</h3>
+
+<div class="geckoVersionNote">
+<p>Pretty-printing is new in Firefox 28.</p>
+</div>
+
+<p>To pretty-print a file that has been minified, open the minified file and click the icon that contains a pair of braces:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7059/21-pp-before.png" style="display: block; margin-left: auto; margin-right: auto;">The file will now appear in a more readable format:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7061/22-pp-after.png" style="display: block; margin-left: auto; margin-right: auto;">From Firefox 29 onwards, you can instruct the debugger to detect minified sources and pretty-print them for you automatically, by selecting "Auto Prettify Minified Sources" in the <a href="/en-US/docs/Tools/Debugger#Debugger_settings">Debugger settings</a>.</p>
+
+<h3 id="Access_debugging_in_add-ons">Access debugging in add-ons</h3>
+
+<p>The following items are accessible in the context of chrome://browser/content/debugger.xul (or, in version 23 beta, chrome://browser/content/devtools/debugger.xul):</p>
+
+<ul>
+ <li>window.addEventListener("Debugger:EditorLoaded") - called when the read-only script panel loaded.</li>
+ <li>window.addEventListener("Debugger:EditorUnloaded")</li>
+</ul>
+
+<p>Relevant files:</p>
+
+<ul>
+ <li>chrome://browser/content/devtools/debugger-controller.js</li>
+ <li>chrome://browser/content/devtools/debugger-toolbar.js</li>
+ <li>chrome://browser/content/devtools/debugger-view.js</li>
+ <li>chrome://browser/content/devtools/debugger-panes.js</li>
+</ul>
+
+<p>Unfortunately there is not yet any API to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope. (currently a work in progress, see bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="https://bugzilla.mozilla.org/show_bug.cgi?id=653545">653545</a>.)</p>
+
+<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "debugger") }}</p>
+
+<h3 id="Global_shortcuts">Global shortcuts</h3>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/pt-br/tools/depurador/set_a_logpoint/index.html b/files/pt-br/tools/depurador/set_a_logpoint/index.html
new file mode 100644
index 0000000000..0a9b75f07d
--- /dev/null
+++ b/files/pt-br/tools/depurador/set_a_logpoint/index.html
@@ -0,0 +1,53 @@
+---
+title: Set a logpoint
+slug: Tools/Depurador/Set_a_logpoint
+translation_of: Tools/Debugger/Set_a_logpoint
+---
+<p>{{ToolsSidebar}}</p>
+
+<p>As vezes você quer ver um valor em seu código mas sem pausar a execução dele. Ao enves de encher seu código com vários console.log, você pode usar o novo tipo de breakpoint adicionado ao Firefox 67, o logpoint. Logpoints mostram uma mensagem no console sem a necessidade de pausar a execução do código.</p>
+
+<p><font color="#000000" face="Arial"><span style="font-size: 14.6667px; white-space: pre-wrap;">O logpoint é especialmente util em casos onde parar a execução também quebrará a execução da reprodução de testes, como quando se está debugando uma janela popup, ou executando uma focus-related logic.</span></font></p>
+
+<p>Para criar um logpoint:</p>
+
+<ol>
+ <li><font color="#000000" face="Arial"><span style="font-size: 14.6667px; white-space: pre-wrap;">Clique com o direitro em uma linha no painel de Debug e selecione<strong> Add log </strong>do context menu.</span></font></li>
+</ol>
+
+<p><span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img alt="" src="https://mdn.mozillademos.org/files/16601/add_logpoint.png" style="display: block; height: 121px; margin: 0px auto; width: 241px;"></span></p>
+
+<ol start="2">
+ <li><span id="docs-internal-guid-5f0d040f-7fff-0163-73d5-1dee8cb97d31" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Crie uma expresão inline. O resultado irá ser apresentado no console, toda vez que encontrar os logpoints. Você pode usar qualquer variável ou funcção disponível no escopo atual.</span></li>
+</ol>
+
+<p><span style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><img alt="" src="https://mdn.mozillademos.org/files/16646/creating_the_log_point.png" style="border: 1px solid black; display: block; height: 67px; margin: 0px auto; width: 312px;"></span></p>
+
+<h2 id="Trabalhando_com_logpoints">Trabalhando com logpoints</h2>
+
+<p>Quando você set um logpoint, o indicador é roxo, ao enves de azul de um incondicional breakpoint ou laranja de um condicional breakpoint.</p>
+
+<p>Você pode ver a lista de logpoits no painel lateral de Breakpoints.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16645/list_logpoints.png" style="border: 1px solid black; display: block; height: 134px; margin: 0px auto; width: 845px;"></p>
+
+<p>Quando seu código encontra um logpoint, a mensagem que você definiu ira ser apresentada no console. Vou pode fazer isso facilmento vendo a mensagem abrindo um console dividido sob o debug. (Ou pressione s <kbd>Esc</kbd> ou selecione o menu elipsis (...) e clique em <strong>Show Split Console.</strong>)</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16644/logpoints.png" style="border: 1px solid black; display: block; height: 370px; margin: 0px auto; width: 915px;"></p>
+
+<h3 id="Quando_devo_usar_logpoints">Quando devo usar logpoints?</h3>
+
+<ul>
+ <li>Quando você quer saber se uma linha de código específica foi executada, mas sem parar a execução do código, insira um logpoint.</li>
+ <li>Logpoints são bastante uteis para mostrar o valor de uma variável em um ponto específico do código. É mais rápido alterar o código fonte subjacente para adicionar chamadas do que o método <code>console.log.</code></li>
+ <li>Se você precisa executar uma lógica adicional no código fonte e não pode muda-lo você mesmo, você pode usar um logpoint.</li>
+</ul>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/Set_an_XHR_breakpoint">Set an XHR breakpoint</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li>
+</ul>
diff --git a/files/pt-br/tools/depuração_remota/index.html b/files/pt-br/tools/depuração_remota/index.html
new file mode 100644
index 0000000000..6359eededd
--- /dev/null
+++ b/files/pt-br/tools/depuração_remota/index.html
@@ -0,0 +1,31 @@
+---
+title: Depuração Remota
+slug: Tools/Depuração_Remota
+translation_of: Tools/Remote_Debugging
+---
+<div>{{ToolsSidebar}}</div><p>Você pode usar as ferramentas de desenvolvedor do Firefox, no seu desktop, para depurar remotamente o código em execução: em um processo diferente no mesmo dispositivo, ou em um dispositivo completamente diferente. Para fazer isso, use o Firefox para atribuir a <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Caixa de Ferramentas</a> ao processo remoto, e, então, a Caixa de Ferramentas será iniciada em sua própria janela. Neste momento terão as seguintes ferramentas de suporte à depuração remota:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector">Inspetor de Página</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">Depurador JavaScript</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Editor de Estilo</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Console Web</a></li>
+ <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Monitoramento Network</a></li>
+</ul>
+
+<h2 id="Firefox_para_Android">Firefox para Android</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Depurando Android remotamente</a> descreve como conectar ao Firefox desktop um dispositivo Android pelo USB.</p>
+
+<h2 id="Firefox_para_Metro">Firefox para Metro</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Metro">Depurando Metro remotamente</a> descreve como usar Firefox desktop para depurar código em execução no Windows 8 (Estilo Metro).</p>
+
+<h2 id="Firefox_OS">Firefox OS</h2>
+
+<p><a href="/en-US/Firefox_OS/Using_the_App_Manager">Usando App Manager</a> inclui instruções para conectar as ferramentas de desenvolvimento do Firefox ao simulador Firefox OS ou a um dispositivo Firefox OS.</p>
+
+<h2 id="Thunderbird">Thunderbird</h2>
+
+<p><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Depurando remotamente Thunderbird</a> explica como uma combinação de Firefox e Thunderbird pode ser usada para depurar código em execução no Thunderbird.</p>
diff --git a/files/pt-br/tools/devtoolsapi/index.html b/files/pt-br/tools/devtoolsapi/index.html
new file mode 100644
index 0000000000..dc3e6e6219
--- /dev/null
+++ b/files/pt-br/tools/devtoolsapi/index.html
@@ -0,0 +1,834 @@
+---
+title: DevTools API
+slug: Tools/DevToolsAPI
+translation_of: Tools/DevToolsAPI
+---
+<div>{{ToolsSidebar}}</div><p>{{ warning("The DevTools API is still WIP. If you notice any inconsistency, please let The Firefox Developer Tools Team know.") }}</p>
+
+<p>While this api is currently work-in-progress, there are usable portions of <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Developer_API" title="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Developer_API">page inspector</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger#Extending_Debugger_from_Addons" title="https://developer.mozilla.org/en-US/docs/Tools/Debugger#Extending_Debugger_from_Addons">debugger</a> that may be used currently.</p>
+
+<p> </p>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p><span class="seoSummary">The DevTools API provides a way to register and access developer tools in Firefox.</span></p>
+
+<p>In terms of User Interface, each registered tool lives in its own tab (we call one tab a <strong>panel</strong>). These tabs are located in a box we call a <strong>Toolbox</strong>. A toolbox can be <em>hosted</em> within a browser tab (at the bottom or on the side), or in its own window (we say that the toolbox is <em>undocked</em>). A Toolbox (and all the tools it contains) is linked to a <strong>Target</strong>, which is the object the tools are debugging. A target is usually a web page (a tab), but can be other things (a chrome window, a remote tab,…).</p>
+
+<p>In terms of code, each tool has to provide a <strong>ToolDefinition</strong> object. A definition is a JS light object that exposes different information about the tool (like its name and its icon), and a <em>build</em> method that will be used later-on to start an instance of this tool. The <strong> gDevTools</strong> global object provides methods to register a tool definition and to access tool instances. An instance of a tool is called a <strong>ToolPanel</strong>. The ToolPanel is built only when the tool is selected (not when the toolbox is opened). There is no way to "close/destroy" a ToolPanel. The only way to close a toolPanel is to close its containing toolbox. All these objects implement the <strong>EventEmitter</strong> interface.</p>
+
+<h2 id="API">API</h2>
+
+<h3 id="gDevTools">gDevTools</h3>
+
+<p>The <code>gDevTools</code> API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the <code>gDevTools</code> API from an add-on, it can be imported with following snippet</p>
+
+<pre class="brush: js"><code>const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");</code></pre>
+
+<h4 id="Methods">Methods</h4>
+
+<dl>
+ <dt>
+ <h5 id="registerTool(toolDefinition)"><code>registerTool(toolDefinition)</code></h5>
+ </dt>
+ <dd>Registers a new tool and adds a tab to each existing toolbox.</dd>
+ <dd><strong>Parameters:</strong><br>
+ <em><code>toolDefinition {ToolDefinition}</code></em> - An object that contains information about the tool. See {{anch("ToolDefinition")}} for details.</dd>
+ <dt>
+ <h5 id="unregisterTool(tool)"><code>unregisterTool(tool)</code></h5>
+ </dt>
+ <dd>Unregisters the given tool and removes it from all toolboxes.</dd>
+ <dd><strong>Parameters:</strong><br>
+ <em><code>tool {ToolDefinition|String}</code></em> - The tool definition object or the id of the tool to unregister.</dd>
+ <dt>
+ <h5 id="registerTheme(themeDefinition)"><code>registerTheme(themeDefinition)</code></h5>
+ </dt>
+ <dd>Registers a new theme.</dd>
+ <dd><strong>Parameters:</strong><br>
+ <em><code>themeDefinition {ThemeDefinition}</code></em> - An object that contains information about the theme.</dd>
+ <dt>
+ <h5 id="unregisterTheme(theme)"><code>unregisterTheme(theme)</code></h5>
+ </dt>
+ <dd>Unregisters the given theme.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <em><code>theme {ThemeDefinition|String}</code></em> - The theme definition object or the theme identifier.</dd>
+ <dt>
+ <h5 id="showToolbox(target_toolId_hostType_hostOptions)"><code>showToolbox(target [, toolId [, hostType [, hostOptions]]])</code></h5>
+ </dt>
+ <dd>Opens a toolbox for given target either by creating a new one or activating an existing one.</dd>
+ <dd><strong>Parameters:</strong><br>
+ <em><code>target {Target}</code></em> - The target the toolbox will debug.<br>
+ <em><code>toolId {String}</code></em> - The tool that should be activated. If unspecified the previously active tool is shown.<br>
+ <em><code>hostType {String}</code></em> - The position the toolbox will be placed. One of <code>bottom</code>, <code>side</code>, <code>window</code>, <code>custom</code>. See {{anch("HostType")}} for details.<br>
+ <em><code>hostOptions {Object}</code></em> - An options object passed to the selected host. See {{anch("HostType")}} for details.</dd>
+ <dd><strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("Toolbox")}} instance once it has been initialized and the selected tool is loaded.</dd>
+ <dt>
+ <h5 id="getToolbox(target)"><code>getToolbox(target)</code></h5>
+ </dt>
+ <dd>Fetch the {{anch("Toolbox")}} object for the given target.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <em><code>target {Target}</code></em> - The target the toolbox is debugging.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ {{anch("Toolbox")}} object or undefined if there's no toolbox for the given target..</dd>
+ <dt>
+ <h5 id="closeToolbox(target)"><code>closeToolbox(target)</code></h5>
+ </dt>
+ <dd>Closes the toolbox for given target.</dd>
+ <dd><strong>Parameters:</strong><br>
+ <em><code>target {Target}</code></em> - The target of the toolbox that should be closed.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled once the toolbox has been destroyed.</dd>
+ <dt>
+ <h5 id="getDefaultTools()"><code>getDefaultTools()</code></h5>
+ </dt>
+ <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for the built-in tools.</dd>
+ <dt>
+ <h5 id="getAdditionalTools()"><code>getAdditionalTools()</code></h5>
+ </dt>
+ <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for tools added by addons.</dd>
+ <dt>
+ <h5 id="getToolDefinition(toolId)"><code>getToolDefinition(toolId)</code></h5>
+ </dt>
+ <dd>Fetch the {{anch("ToolDefinition")}} object for a tool if it exists and is enabled.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>toolId {String}</em></code> - The ID of the tool.</dd>
+ <dd><strong>Return value:</strong><br>
+ A {{anch("ToolDefinition")}} if a tool with the given ID exists and is enabled, null otherwise.</dd>
+ <dt>
+ <h5 id="getToolDefinitionMap()"><code>getToolDefinitionMap()</code></h5>
+ </dt>
+ <dd>Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.</dd>
+ <dt>
+ <h5 id="getToolDefinitionArray()"><code>getToolDefinitionArray()</code></h5>
+ </dt>
+ <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for enabled tools sorted by the order they appear in the toolbox.</dd>
+ <dt>
+ <h5 id="getThemeDefinition(themeId)"><code>getThemeDefinition(themeId)</code></h5>
+ </dt>
+ <dd>Fetch the <code>ThemeDefinition</code> object for the theme with the given id.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>themeId {String}</em></code> - The ID of the theme.</dd>
+ <dd><strong>Return value:</strong><br>
+ A <code>ThemeDefinition</code> object if the theme exists, null otherwise.</dd>
+ <dt>
+ <h5 id="getThemeDefinitionMap()"><code>getThemeDefinitionMap()</code></h5>
+ </dt>
+ <dd>Returns a toolId → <code>ThemeDefinition</code> map for available themes.</dd>
+ <dt>
+ <h5 id="getThemeDefinitionArray()"><code>getThemeDefinitionArray()</code></h5>
+ </dt>
+ <dd>Returns an {{jsxref("Array")}} of <code>ThemeDefinition</code> objects for avialble themes.</dd>
+</dl>
+
+<h4 id="Events">Events</h4>
+
+<p>Following events are emitted by the <code>gDevTools</code> object via the {{anch("EventEmitter")}} interface.</p>
+
+<dl>
+ <dt>
+ <h5 id="tool-registered(toolId)"><code>tool-registered</code><code>(toolId)</code></h5>
+ </dt>
+ <dd>A new tool has been registered.</dd>
+ <dt>
+ <h5 id="tool-unregistered(tool)"><code>tool-unregistered(tool)</code></h5>
+ </dt>
+ <dd>A tool has been unregistered. The parameter is a {{anch("ToolDefinition")}} object.</dd>
+ <dt>
+ <h5 id="theme-registered(themeId)"><code>theme-registered(themeId)</code></h5>
+ </dt>
+ <dd>A new theme has been registered.</dd>
+ <dt>
+ <h5 id="theme-unregistered(theme)"><code>theme-unregistered(theme)</code></h5>
+ </dt>
+ <dd>A theme has been unregistered. The parameter is a <code>ThemeDefinition</code> object.</dd>
+ <dt>
+ <h5 id="toolbox-ready(toolbox)"><code>toolbox-ready(toolbox)</code></h5>
+ </dt>
+ <dd>A new toolbox has been created and is ready to use. The parameter is a {{anch("Toolbox")}} object instance.</dd>
+ <dt>
+ <h5 id="toolbox-destroy(target)"><code>toolbox-destroy(target)</code></h5>
+ </dt>
+ <dd>The toolbox for the specified target is about to be destroyed.</dd>
+ <dt>
+ <h5 id="toolbox-destoyed(target)"><code>toolbox-destoyed(target)</code></h5>
+ </dt>
+ <dd>The toolbox for the specified target has been destroyed.</dd>
+ <dt>
+ <h5 id="toolId-init(toolbox_iframe)"><code>{toolId}-init(toolbox, iframe)</code></h5>
+ </dt>
+ <dd>A tool with the given ID has began to load in the given toolbox to the given frame.</dd>
+ <dt>
+ <h5 id="toolId-build(toolbox_panel)"><code>{toolId}-build(toolbox, panel)</code></h5>
+ </dt>
+ <dd>A tool with the given ID has began to initialize in the given toolbox. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd>
+ <dt>
+ <h5 id="toolId-ready(toolbox_panel)"><code>{toolId}-ready(toolbox, panel)</code></h5>
+ </dt>
+ <dd>A tool with the given ID has finished its initialization and is ready to be used. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd>
+ <dt>
+ <h5 id="toolId-destroy(toolbox_panel)"><code>{toolId}-destroy(toolbox, panel)</code></h5>
+ </dt>
+ <dd>A tool with the given ID is about to be destroyed. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd>
+</dl>
+
+<h3 id="Toolbox">Toolbox</h3>
+
+<p>A Toolbox is a frame for the {{anch("ToolPanel", "ToolPanels")}} that is debugging a specific target.</p>
+
+<h4 id="Properties">Properties</h4>
+
+<dl>
+ <dt>
+ <h5 id="target"><code>target</code></h5>
+ </dt>
+ <dd><strong>Target</strong>. The Target this toolbox is debugging.</dd>
+ <dt>
+ <h5 id="hostType"><code>hostType</code></h5>
+ </dt>
+ <dd><strong>Toolbox.HostType</strong>. The type of the host this Toolbox is docked to. The value is one of the <code>Toolbox.HostType</code> constants.</dd>
+ <dt>
+ <h5 id="zoomValue"><code>zoomValue</code></h5>
+ </dt>
+ <dd>The current zoom level of the Toolbox.</dd>
+</dl>
+
+<h4 id="Constants">Constants</h4>
+
+<p>The Toolbox constructor contains following constant properties.</p>
+
+<dl>
+ <dt>
+ <h5 id="Toolbox.HostType.BOTTOM"><code>Toolbox.HostType.BOTTOM</code></h5>
+ </dt>
+ <dd>Host type for the default toolbox host at the bottom of the browser window.</dd>
+ <dt>
+ <h5 id="Toolbox.HostType.SIDE"><code>Toolbox.HostType.SIDE</code></h5>
+ </dt>
+ <dd>Host type for the host at the side of the browser window.</dd>
+ <dt>
+ <h5 id="Toolbox.HostType.WINDOW"><code>Toolbox.HostType.WINDOW</code></h5>
+ </dt>
+ <dd>Host type for the separate Toolbox window.</dd>
+ <dt>
+ <h5 id="Toolbox.HostType.CUSTOM"><code>Toolbox.HostType.CUSTOM</code></h5>
+ </dt>
+ <dd>Host type for a custom frame host.</dd>
+</dl>
+
+<h4 id="Methods_2">Methods</h4>
+
+<dl>
+ <dt>
+ <h5 id="getCurrentPanel()"><code>getCurrentPanel()</code></h5>
+ </dt>
+ <dd>Get the currently active {{anch("ToolPanel")}}.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ The {{anch("ToolPanel")}} object that was returned from {{anch("build(window_toolbox)", "ToolPanel.build()")}}.</dd>
+ <dt>
+ <h5 id="getPanel(toolId)"><code>getPanel(toolId)</code></h5>
+ </dt>
+ <dd>Get the {{anch("ToolPanel")}} for given tool.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>toolId {String} - </em></code>The tool identifier.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ The {{anch("ToolPanel")}} object if the tool with the given <code>toolId</code> is active, otherwise <code>undefined</code>.</dd>
+ <dt>
+ <h5 id="getPanelWhenReady(toolId)"><code>getPanelWhenReady(toolId)</code></h5>
+ </dt>
+ <dd>Similar to <code>getPanel()</code> but waits for the tool to load first. If the tool is not already loaded or currently loading the returned {{domxref("Promise")}} won't be fulfilled until something triggers the tool to load.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>toolId {String} - </em></code>The tool identifier.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object once the tool has finished loading.</dd>
+ <dt>
+ <h5 id="getToolPanels()"><code>getToolPanels()</code></h5>
+ </dt>
+ <dd>Returns a <code>toolId → {{anch("ToolPanel")}}</code> {{jsxref("Map")}} for currently loaded tools.</dd>
+ <dt>
+ <h5 id="getNotificationBox()"><code>getNotificationBox()</code></h5>
+ </dt>
+ <dd>Returns a {{ XULElem("notificationbox") }} element for the Toolbox that can be used to display notifications to the user.</dd>
+ <dt>
+ <h5 id="loadTool(toolId)"><code>loadTool(toolId)</code></h5>
+ </dt>
+ <dd>Loads the tool with the given <code>toolId</code> in the background but does not activate it.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>toolId {String} - </em></code>The tool identifier.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.<br>
+  </dd>
+ <dt>
+ <h5 id="selectTool(toolId)"><code>selectTool(toolId)</code></h5>
+ </dt>
+ <dd>Selects the tool with the given <code>toolId</code>.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>toolId {String} - </em></code>The tool identifier.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel once the tool has loaded and activated.</dd>
+ <dt>
+ <h5 id="selectNextTool()"><code>selectNextTool()</code></h5>
+ </dt>
+ <dd>Selects the next tool in the <code>Toolbox</code>.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.</dd>
+ <dt>
+ <h5 id="selectPreviousTool()"><code>selectPreviousTool()</code></h5>
+ </dt>
+ <dd>Selects the previous tool in the <code>Toolbox</code>.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.</dd>
+ <dt>
+ <h5 id="highlightTool(toolId)"><code>highlightTool(toolId)</code></h5>
+ </dt>
+ <dd>Highlights the tab for the given tool.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>toolId {String} - </em></code>The tool to highlight.</dd>
+ <dt>
+ <h5 id="unhighlightTool(toolId)"><code>unhighlightTool(toolId)</code></h5>
+ </dt>
+ <dd>Unhighlights the tab for the given tool.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>toolId {String} - </em></code>The tool to unhighlight.</dd>
+ <dt>
+ <h5 id="openSplitConsole()"><code>openSplitConsole()</code></h5>
+ </dt>
+ <dd>Opens the split Console to the bottom of the toolbox.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled once the Console has loaded.</dd>
+ <dt>
+ <h5 id="closeSplitConsole()"><code>closeSplitConsole()</code></h5>
+ </dt>
+ <dd>Closes the split console.</dd>
+ <dt>
+ <h5 id="toggleSplitConsole()"><code>toggleSplitConsole()</code></h5>
+ </dt>
+ <dd>Toggles the state of the split console.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled once the operation has finished.</dd>
+ <dt>
+ <h5 id="switchHost(hostType)"><code>switchHost(hostType)</code></h5>
+ </dt>
+ <dd>Switches the location of the toolbox<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>hostType {Toolbox.HostType} - </em></code>The type of the new host.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled once the new host is ready.<br>
+  </dd>
+ <dt>
+ <h5 id="reloadTarget(force)"><code>reloadTarget(force)</code></h5>
+ </dt>
+ <dd>Reloads the current target of the toolbox.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <em><code>force {Boolean} -</code></em> If true the target is shift-reloaded i.e. the cache is bypassed during the reload.</dd>
+ <dt>
+ <h5 id="zoomIn()"><code>zoomIn()</code></h5>
+ </dt>
+ <dd>Increases the zoom level of the <code>Toolbox</code> document.</dd>
+ <dt>
+ <h5 id="zoomOut()"><code>zoomOut()</code></h5>
+ </dt>
+ <dd>Decreases the zoom level of the <code>Toolbox</code> document.</dd>
+ <dt>
+ <h5 id="zoomReset()"><code>zoomReset()</code></h5>
+ </dt>
+ <dd>Resets the zoom level of the <code>Toolbox</code> document.</dd>
+ <dt>
+ <h5 id="setZoom(value)"><code>setZoom(value)</code></h5>
+ </dt>
+ <dd>Set the zoom level to an arbitrary value.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>value {Number} - </em></code>The zoom level such as <code>1.2</code>.</dd>
+ <dt>
+ <h5 id="destroy()"><code>destroy()</code></h5>
+ </dt>
+ <dd>Closes the toolbox.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is resolved once the <code>Toolbox</code> is destroyed.</dd>
+</dl>
+
+<h4 id="Events_2">Events</h4>
+
+<p>The Toolbox object emits following events via the {{anch("EventEmitter")}} interface.</p>
+
+<dl>
+ <dt>
+ <h5 id="host-changed"><code>host-changed</code></h5>
+ </dt>
+ <dd>The Host for this Toolbox has changed.</dd>
+ <dt>
+ <h5 id="ready"><code>ready</code></h5>
+ </dt>
+ <dd>The <code>Toolbox</code> is ready to use.</dd>
+ <dt>
+ <h5 id="select(toolId)"><code>select(toolId)</code></h5>
+ </dt>
+ <dd>A tool has been selected. This event is emitted before the corresponding <code>{toolId}-selected</code> event.</dd>
+ <dt>
+ <h5 id="toolId-init(frame)"><code>{toolId}-init(frame)</code></h5>
+ </dt>
+ <dd>A tool is about to be loaded. The frame is the {{HTMLElement("iframe")}} element that has been created for the tool.</dd>
+ <dt>
+ <h5 id="toolId-build(panel)"><code>{toolId}-build(panel)</code></h5>
+ </dt>
+ <dd>The frame for a tool has loaded and the {{anch("build(window_toolbox)", "ToolPanel.build()")}} method has been called but the asynchronous initialization has not started. The parameter is a {{anch("ToolPanel")}} object.</dd>
+ <dt>
+ <h5 id="toolId-ready(panel)"><code>{toolId}-ready(panel)</code></h5>
+ </dt>
+ <dd>The asynchronous initialization for a tool has completed and it is ready to be used. The parameter is a {{anch("ToolPanel")}} object.</dd>
+ <dt>
+ <h5 id="toolId-selected(panel)"><code>{toolId}-selected(panel)</code></h5>
+ </dt>
+ <dd>A tool has been selected. The parameter is a {{anch("ToolPanel")}} object.</dd>
+ <dt>
+ <h5 id="toolId-destroy(panel)"><code>{toolId}-destroy(panel)</code></h5>
+ </dt>
+ <dd>A tool is about to be destroyed. The parameter is a {{anch("ToolPanel")}} object.</dd>
+ <dt>
+ <h5 id="destroy"><code>destroy</code></h5>
+ </dt>
+ <dd>The <code>Toolbox</code> is about to be destroyed.</dd>
+ <dt>
+ <h5 id="destroyed"><code>destroyed</code></h5>
+ </dt>
+ <dd>The <code>Toolbox</code> has been destroyed.</dd>
+</dl>
+
+<h3 id="ToolDefinition">ToolDefinition</h3>
+
+<p>A <code>ToolDefinition</code> object contains all the required information for a tool to be shown in the toolbox.</p>
+
+<h4 id="Methods_3">Methods</h4>
+
+<dl>
+ <dt>
+ <h5 id="isTargetSupported(target)"><code>isTargetSupported(target)</code></h5>
+ </dt>
+ <dd>A method that is called during toolbox construction to check if the tool supports debugging the given target.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>target {Target} - </em></code>The target to check.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A boolean indicating if the tool supports the given target.</dd>
+ <dt>
+ <h5 id="build(window_toolbox)"><code>build(window, toolbox)</code></h5>
+ </dt>
+ <dd>A method that builds the {{anch("ToolPanel")}} for this tool.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <em><code>window {Window} - </code></em>The {{domxref("Window")}} object for frame the tool is being built into.<br>
+ <em><code>toolbox {Toolbox} - </code></em>The {{anch("Toolbox")}} the tool is being built for.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{anch("ToolPanel")}} for the tool.</dd>
+ <dt>
+ <h5 id="onKey(panel_toolbox)"><code>onKey(panel, toolbox)</code></h5>
+ </dt>
+ <dd><strong>Optional.</strong> A method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <code><em>panel {ToolPanel} - </em></code>The {{anch("ToolPanel")}} for the tool.<br>
+ <em><code>toolbox {Toolbox} - </code></em>The toolbox for the shortcut was triggered for.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ Undefined.</dd>
+</dl>
+
+<h4 id="Properties_2">Properties</h4>
+
+<p>The ToolDefinition object can contain following properties. Most of them are optional and can be used to customize the presense of the tool in the Browser and the Toolbox.</p>
+
+<dl>
+ <dt>
+ <h5 id="id"><code>id</code></h5>
+ </dt>
+ <dd><strong>String, required.</strong> An unique identifier for the tool. It must be a valid id for an HTML {{domxref("Element")}}.</dd>
+ <dt>
+ <h5 id="url"><code>url</code></h5>
+ </dt>
+ <dd><strong>String, required.</strong> An URL of the panel document.</dd>
+ <dt>
+ <h5 id="label"><code>label</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> The tool's name. If undefined the <code>icon</code> should be specified.</dd>
+ <dt>
+ <h5 id="tooltip"><code>tooltip</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> The tooltip for the tool's tab.</dd>
+ <dt>
+ <h5 id="panelLabel"><code>panelLabel</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> An accessibility label for the panel.</dd>
+ <dt>
+ <h5 id="ordinal"><code>ordinal</code></h5>
+ </dt>
+ <dd><strong>Integer, optional.</strong> The position of the tool's tab within the toolbox. <strong>Default: </strong>99</dd>
+ <dt>
+ <h5 id="visibilityswitch"><code>visibilityswitch</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> A preference name that controls the visiblity of the tool. <strong>Default: </strong><code>devtools.{id}.enabled</code></dd>
+ <dt>
+ <h5 id="icon"><code>icon</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> An URL for the icon to show in the toolbox tab. If undefined the label should be defined.</dd>
+ <dt>
+ <h5 id="highlightedicon"><code>highlightedicon</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> An URL for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). <strong>Default:</strong> <code>{icon}</code></dd>
+ <dt>
+ <h5 id="iconOnly"><code>iconOnly</code></h5>
+ </dt>
+ <dd><strong>Boolean, optional.</strong> If true, the label won't be shown in the tool's tab. <strong>Default:</strong> false</dd>
+ <dt>
+ <h5 id="invertIconForLightTheme"><code>invertIconForLightTheme</code></h5>
+ </dt>
+ <dd><strong>Boolean, optional.</strong> If true the colors of the icon will be inverted for the light theme. <strong>Default:</strong> false</dd>
+ <dt>
+ <h5 id="key"><code>key</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> The key used for keyboard shortcut. Either {{XULAttr("key")}} or {{XULAttr("keycode")}} value.</dd>
+ <dt>
+ <h5 id="modifiers"><code>modifiers</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> {{XULAttr("modifiers", "Modifiers")}} for the keyboard shortcut.</dd>
+ <dt>
+ <h5 id="preventClosingOnKey"><code>preventClosingOnKey</code></h5>
+ </dt>
+ <dd><strong>Boolean, optional.</strong> If true the tool won't close if its keybinding is pressed while it is active. <strong>Default:</strong> false</dd>
+ <dt>
+ <h5 id="inMenu"><code>inMenu</code></h5>
+ </dt>
+ <dd><strong>Boolean, optional.</strong> If true the tool will be shown in the Developer Menu. <strong>Default:</strong> false</dd>
+ <dt>
+ <h5 id="menuLabel"><code>menuLabel</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> A label for the Developer Menu item. <strong>Default:</strong> <code>{label}</code></dd>
+ <dt>
+ <h5 id="accesskey"><code>accesskey</code></h5>
+ </dt>
+ <dd><strong>String, optional.</strong> {{XULAttr("accesskey")}} for the Developer Menu {{XULElem("menuitem")}}.</dd>
+</dl>
+
+<h4 id="Example">Example</h4>
+
+<p>Here's a minimal definition for a tool.</p>
+
+<pre class="brush: js"><code>let def = {
+  id: "my-tool",
+  label: "My Tool",
+  icon: "chrome://browser/skin/devtools/tool-webconsole.svg",
+  url: "about:blank",
+  isTargetSupported: target =&gt; true,
+  build: (window, toolbox) =&gt; new MyToolPanel(window, toolbox)
+};</code>
+
+// Register it.
+gDevTools.registerTool(def);
+</pre>
+
+<h3 id="TargetType">TargetType</h3>
+
+<p>FIXME:</p>
+
+<h3 id="HostType">HostType</h3>
+
+<p>FIXME</p>
+
+<h3 id="ToolPanel">ToolPanel</h3>
+
+<p>The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that <code>ToolDefinition.build()</code> returns should implement the methods described below.</p>
+
+<h4 id="Methods_4">Methods</h4>
+
+<dl>
+ <dt>
+ <h5 id="open()"><code>open()</code></h5>
+ </dt>
+ <dd><strong>Optional</strong>. A method that can be used to perform asynchronous initialization. If the method returns a {{domxref("Promise")}}, many operations (e.g. {{anch("showToolbox(target_toolId_hostType_hostOptions)", "gDevTools.showToolbox()")}} or <code>toolbox.selectTool()</code>) and events (e.g. {{anch("toolbox-ready(toolbox)", "toolbox-ready")}}) are delayed until the promise has been fulfilled.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ The method should return a {{domxref("Promise")}} that is resolved with the <code>ToolPanel</code> object once it's ready to be used.</dd>
+ <dt>
+ <h5 id="destroy()_2"><code>destroy()</code></h5>
+ </dt>
+ <dd>
+ <p>A method that is called when the toolbox is closed or the tool is unregistered. If the tool needs to perform asynchronous operations during destruction the method should return a {{domxref("Promise")}} that is resolved once the process is complete.</p>
+
+ <p><strong>Return value:</strong><br>
+  A {{domxref("Promise")}} if the function performs asynchronous operations, otherwise <code>undefined</code>.</p>
+ </dd>
+</dl>
+
+<h4 id="Example_2">Example</h4>
+
+<p>Here's a basic template for a ToolPanel implementation.</p>
+
+<pre class="brush: js"><code>// In the ToolDefintion object, do
+//   build: (window, target) =&gt; new MyPanel(window, target),
+
+function MyPanel(window, target) {
+  // The window object that has loaded the URL defined in the ToolDefinition
+  this.window = window;
+  // The Target this toolbox is debugging.
+  this.target = target;
+
+  // Do synchronous initialization here.
+  window.document.body.addEventListener("click", this.handleClick);
+}
+
+MyPanel.prototype = {
+  open: function() {
+    // Any asynchronous operations should be done here.
+    return this.doSomethingAsynchronous()
+      .then(() =&gt; this);
+  },
+
+  destroy: function() {
+    // Synchronous destruction.
+    this.window.document.body.removeEventListener("click", this.handleClick);
+
+    // Async destruction.
+    return this.destroySomethingAsynchronosly()
+      .then(() =&gt; console.log("destroyed"));
+  },
+
+  handleClick: function(event) {
+    console.log("Clicked", event.originalTarget);
+  },
+};</code>
+</pre>
+
+<h3 id="EventEmitter">EventEmitter</h3>
+
+<p><code>EventEmitter</code> is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.</p>
+
+<p>When an event is emitted on the <code>EventEmitter</code>, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.</p>
+
+<div class="note">
+<p>Note: Some components use Add-on SDK event module instead of the DevTools EventEmitter. Unfortunately, their API's are a bit different and it's not always evident which one a certain component is using. The main differences between the two modules are that the first parameter for Add-on SDK events is the first payload argument instead of the event name and the <code>once</code> method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.</p>
+</div>
+
+<h4 id="Methods_5">Methods</h4>
+
+<p>The following methods are available on objects that have been decorated with the <code>EventEmitter</code> interface.</p>
+
+<dl>
+ <dt>
+ <h5 id="emit(eventName_...extraArguments)"><code>emit(eventName, ...extraArguments)</code></h5>
+ </dt>
+ <dd>Emits an event with the given name to this object.<br>
+ <br>
+ <strong>Parameters:</strong><br>
+ <em><code>eventName {String} - </code></em>The name of the event.<br>
+ <code><em>extraArguments {</em>...<em>Any} - </em></code>Extra arguments that are passed to the listeners.</dd>
+ <dt>
+ <h5 id="on(eventName_listener)"><code>on(eventName, listener)</code></h5>
+ </dt>
+ <dd>Adds a listener for the given event.</dd>
+ <dt>
+ <h5 id="off(eventName_listener)"><code>off(eventName, listener)</code></h5>
+ </dt>
+ <dd>Removes the previously added listener from the event.</dd>
+ <dt>
+ <h5 id="once(eventName_listener)"><code>once(eventName, listener)</code></h5>
+ </dt>
+ <dd>Adds a listener for the event that is removed after it has been emitted once.<br>
+ <br>
+ <strong>Return value:</strong><br>
+ A {{domxref("Promise")}} that is fulfilled with the first extra argument for the event when then event is emitted. If the event contains multiple payload arguments, the rest are discarded and can only be received by providing the listener function to this method.</dd>
+</dl>
+
+<h4 id="Examples">Examples</h4>
+
+<p>Here's a few examples using the {{anch("gDevTools")}} object.</p>
+
+<pre class="brush: js"><code>let onInit = (eventName, toolbox, netmonitor) =&gt; console.log("Netmonitor initialized!");
+
+// Attach a listener.
+gDevTools.on("netmonitor-init", onInit);
+
+// Remove a listener.
+gDevTools.off("netmonitor-init", onInit);
+
+// Attach a one time listener.
+gDevTools.once("netmonitor-init", (eventName, toolbox, netmonitor) =&gt; {
+  console.log("Network Monitor initialized once!", toolbox, netmonitor);
+});
+
+// Use the Promise returned by the once method.
+gDevTools.once("netmonitor-init").then(toolbox =&gt; {
+  // Note that the second argument is not available here.
+  console.log("Network Monitor initialized to toolbox", toolbox);
+});</code>
+</pre>
+
+<h3 id="ToolSidebar">ToolSidebar</h3>
+
+<p>To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:</p>
+
+<pre class="line"><code class="brush: html">    <span class="nt">&lt;splitter</span> <span class="na">class=</span><span class="s">"devtools-side-splitter"</span><span class="nt">/&gt;</span></code>
+<code>    <span class="nt">&lt;tabbox</span> <span class="na">id=</span><span class="s">"mytool-sidebar"</span> <span class="na">class=</span><span class="s">"devtools-sidebar-tabs"</span> <span class="na">hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span></code>
+<code>      <span class="nt">&lt;tabs/&gt;</span></code>
+<code>      <span class="nt">&lt;tabpanels</span> <span class="na">flex=</span><span class="s">"1"</span><span class="nt">/&gt;</span></code>
+<code>    <span class="nt">&lt;/tabbox&gt;</span></code></pre>
+
+<div class="line"> </div>
+
+<div class="line">A sidebar is composed of tabs. Each tab will hold an iframe. For example, in the Inspector, there are 3 tabs (Computed View, Rule View, Layout View). The user can select the tab he wants to see.</div>
+
+<div class="line"> </div>
+
+<div class="line">If the availability of the tabs depends on some tool-related conditions, we might want to not let the user select a tab. This API provides methods to hide the tabstripe. For example, in the Web Console, there are 2 views (Network View and Object View). These views are only available in certain conditions controlled by the WebConsole code. So it's up the WebConsole the hide and show the sidebar, and select the correct tab.</div>
+
+<div class="line"> </div>
+
+<div class="line">If the loaded document exposes a <code>window.setPanel(ToolPanel)</code> function, the sidebar will call it once the document is loaded.</div>
+
+<div class="line"> </div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Method</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)</code></td>
+   <td>ToolSidebar constructor</td>
+  </tr>
+  <tr>
+   <td><code>void addTab(tabId, url, selected=false)</code></td>
+   <td>Add a tab in the sidebar</td>
+  </tr>
+  <tr>
+   <td><code>void select(tabId)</code></td>
+   <td>Select a tab</td>
+  </tr>
+  <tr>
+   <td><code>void hide()</code></td>
+   <td>Hide the sidebar</td>
+  </tr>
+  <tr>
+   <td><code>void show()</code></td>
+   <td>Show the sidebar</td>
+  </tr>
+  <tr>
+   <td><code>void toggle()</code></td>
+   <td>Toggle the sidebar</td>
+  </tr>
+  <tr>
+   <td><code>void getWindowForTab(tabId)</code></td>
+   <td>Get the iframe containing the tab content</td>
+  </tr>
+  <tr>
+   <td><code>tabId getCurrentTabID()</code></td>
+   <td>Return the id of tabId of the current tab</td>
+  </tr>
+  <tr>
+   <td><code>tabbox getTab(tabId)</code></td>
+   <td>Return a tab given its id</td>
+  </tr>
+  <tr>
+   <td><code>destroy()</code></td>
+   <td>Destroy the ToolSidebar object</td>
+  </tr>
+  <tr>
+   <th>Events</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>new-tab-registered</code></td>
+   <td>A new tab has been added</td>
+  </tr>
+  <tr>
+   <td><code>{tabId}-ready</code></td>
+   <td>Tab is loaded and can be used</td>
+  </tr>
+  <tr>
+   <td><code>{tabId}-selected</code></td>
+   <td>Tab has been selected and is visible</td>
+  </tr>
+  <tr>
+   <td><code>{tabId}-unselected</code></td>
+   <td>Tab has been unselected and is not visible</td>
+  </tr>
+  <tr>
+   <td><code>show</code></td>
+   <td>The sidebar has been opened.</td>
+  </tr>
+  <tr>
+   <td><code>hide</code></td>
+   <td>The sidebar has been closed.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples_2">Examples</h2>
+
+<p>Register a tool</p>
+
+<pre class="brush: js">gDevTools.registerTool({
+  // FIXME: missing key related properties.
+  id: "inspector",
+  icon: "chrome://browser/skin/devtools/inspector-icon.png",
+  url: "chrome://browser/content/devtools/inspector/inspector.xul",
+  get label() {
+    let strings = Services.strings.createBundle("chrome://browser/locale/devtools/inspector.properties");
+    return strings.GetStringFromName("inspector.label");
+  },
+
+  isTargetSupported: function(target) {
+    return !target.isRemote;
+  },
+
+  build: function(iframeWindow, toolbox, node) {
+    return new InspectorPanel(iframeWindow, toolbox, node);
+  }
+});
+</pre>
+
+<p>Open a tool, or select it if the toolbox is already open:</p>
+
+<pre class="brush: js">let target = TargetFactory.forTab(gBrowser.selectedTab);
+let toolbox = gDevTools.openToolbox(target, null, "inspector");
+
+toolbox.once("inspector-ready", function(event, panel) {
+  let inspector = toolbox.getToolPanels().get("inspector");
+  inspector.selection.setNode(target, "browser-context-menu");
+});
+</pre>
+
+<p>Add a sidebar to an existing tool:</p>
+
+<pre class="brush: js">let sidebar = new ToolSidebar(xulTabbox, toolPanel, "toolId");
+sidebar.addTab("tab1", "chrome://browser/content/.../tab1.xhtml", true);
+sidebar.addTab("tab2", "chrome://browser/content/.../tab2.xhtml", false);
+sidebar.show();
+</pre>
diff --git a/files/pt-br/tools/editor_de_estilos/index.html b/files/pt-br/tools/editor_de_estilos/index.html
new file mode 100644
index 0000000000..903428edc7
--- /dev/null
+++ b/files/pt-br/tools/editor_de_estilos/index.html
@@ -0,0 +1,88 @@
+---
+title: Editor de Estilos
+slug: Tools/Editor_de_Estilos
+translation_of: Tools/Style_Editor
+---
+<div>{{ToolsSidebar}}</div><p>O Editor de Estilos permite que você:</p>
+
+<ul>
+ <li>veja e edite todas as folhas de estilo associadas com a página</li>
+ <li>crie novas folhas de estilo e as aplique na página</li>
+ <li>importe folhas de estilo existentes e as aplique na página</li>
+</ul>
+
+<p>{{EmbedYouTube("7839qc55r7o")}}</p>
+
+<p>Para abrir o Editor de Estilos escolha a opção "Editar Estilos" no menu "Desenvolvedor Web" (que é um submenu do menu "Ferramentas" no Mac) (which is a submenu in the "Tools" menu on the Mac). A <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Caixa de Ferramentas</a> aparecerá na parte de baixo da janela do navegador, com o Editor de Estilos ativado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Na esquerda (ou no topo, se sua janela estiver muito estreita) há uma lista com todas as folhas de estilo usadas no documento, e na direita (ou em baixo se a janela estiver estreita) está a fonte para a folha de estilo que você selecionou no painel de folhas de estilo.</p>
+
+<h2 id="O_painel_de_folha_de_estilos">O painel de folha de estilos</h2>
+
+<p>O painel de folha de estilos, na esquerda, lista todas as folhas de estilo que estão sendo usadas no documento atual. Você pode rapidamente trocar o uso de determinada folha de estilos clicando no olho que fica a direita do nome da folha de estilos. Você pode salvar qualquer mudança que fez na folha de estilos no seu computador local clicando no botão Salvar que está no canto inferior direito de cada lista de folha de estilos.</p>
+
+<h2 id="O_painel_editor">O painel editor</h2>
+
+<p>Na direita fica o painel editor. Aqui é onde o código da folha de estilo seleciona fica disponível para você ler e editar. Quaisquer alterações que você faz são aplicadas na página em tempo real. Isso faz com que fique realmente fácil experimentar, revisar e testar mudanças na aparença de sua página. Uma vez que você estiver satisfeito com suas mudanças, você pode salver uma cópia localmente clicando no botão Salvar que fica no painel de folha de estilos.</p>
+
+<p>O editor provê números de linha e marcação de sintaxe para ajudar a ficar fácil ler seu CSS. Veja <a href="/en/Tools/Using_the_Source_Editor" title="Using the Source Editor">Utilizando o Editor de Fonte</a> para documentação do editor em si, incluindo atalhos de teclado úteis.</p>
+
+<p>O Editor de Estilos automaticamente desminimiza folhas de estilo que ele detectar sem afetar o original. Isso faz com que fique muito mais fácil trabalhar em páginas que foram otimizadas.</p>
+
+<h3 id="Autocompletar">Autocompletar</h3>
+
+<div class="geckoVersionNote">
+<p>Autocompletar é novo no Firefox 29.</p>
+</div>
+
+<p>Do Firefox 29 em diante, o Editor de Estilos suporta o autocompletar. Apenas começa a digitar e ele oferecerá uma lista de sugestões.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Você pode desligar isso em  <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Configurações do Editor de Estilos</a>.</p>
+
+<h2 id="Criando_e_importando_folhas_de_estilos">Criando e importando folhas de estilos</h2>
+
+<p>Você pode cirar uma nova folha de estilos clicando no botão Novo na barra de ferramentas. Então você pode começar a inserir CSS em um novo editor e ver como os novos estilos são aplicados em tempo real assim como quaisquer mudanças em outras folhas de estilo.</p>
+
+<p>Você pode carregar um estilo do disco e aplicá-lo na página clicando no botão Importar.</p>
+
+<h2 id="Suporte_ao_mapa_de_fonte">Suporte ao mapa de fonte</h2>
+
+<div class="geckoVersionNote">
+<p>Suporte ao mapa da fonte de CSS é uma funcionalidade nova no Firefox 29.</p>
+</div>
+
+<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p>
+
+<p>Desenvolvedores web frequentemente criam arquivos CSS usando pré-processadores como <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, ou <a href="http://learnboost.github.io/stylus/">Stylus</a>. Essas ferramentas geram CSS de uma sintaxe mais rica e expressiva. Se você fizer isso,  ser capaz de ver e editar CSS gerado não é útil, porque o código que você mantém é a sintaxe do pré-processador, não o CSS gerado. Então você precisaria editar o CSS gerado e então manualmente descobrir como reaplicar na fonte original.</p>
+
+<p>Mapas de fonte viabilizam as ferramentas para mapear o CSS gerado agté sua fonte original, então mostrá-la e permitir que você edite os arquivos na fonte original. Do Firefox 29 em diante o Editor de Estilos compreende mapas de fonte de CSS.</p>
+
+<p>Isso significa que se você usa, por exemplo, Sass, então o editor irá mostrá-lo e permitir que você edite arquivos Sass, ao invés do CSS gerado por ele:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">Para isso funcionar, você deve:</p>
+
+<ul>
+ <li>usar um pré-processador de CSS que compreenda o <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Revisão 3 da Proposta do Mapa de fonte</a>. Atualmente isso significa o urrently this means the <a href="http://davidwalsh.name/future-sass">Pré-release da versão 3.3.0 do Sass</a>, ou a  <a href="http://roots.io/using-less-source-maps/">versão 1.5.0 do Less</a>. Outros pré-processadores estão ativamente trabalhando em adicionar suporte ou considerando isso.</li>
+ <li>instruir o pré-processador a gerar um mapa de fonte, por exemplo passando o  argumento <code>--sourcemap</code> para a ferramenta de linha de comando do Sass.</li>
+ <li>usar Firefox 29 ou superior.</li>
+</ul>
+
+<h3 id="Vendo_as_fontes_originais">Vendo as fontes originais</h3>
+
+<p>Agora, se você marcar "Mostrar fontes originais"  nas <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Configurações do Editor de Estilos</a>, os links próximos as regras de CSS em <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">ver Regras</a> irão levar as fontes originais no Editor de Estilos.</p>
+
+<h3 id="Editando_fontes_originais">Editando fontes originais</h3>
+
+<p>Você pode também editar fontes originais no Editor de Estilos e ver os resultas aplicados na página imediatamente. Para isso funcionar há dois passos extra:</p>
+
+<p>Primeiro, configure seu pré-processador para que ele direcione a fonte original e automaticamente gere outro CSS quando a fonte original mudar. Com o Sass você pode fazer isso simplesmente passando a opção <code>--watch</code>:</p>
+
+<pre>sass index.scss:index.css --sourcemap --watch</pre>
+
+<p>Em seguida, salve a fonte original no Editor de Estilos clicando no botão Salvar, perto do arquivo para então salvar o arquivo original.</p>
+
+<p>Agora quando você faz mudanças no arquivo fonte no Editor de Estilos é gerado um novo CSS você pode ver as mudanças em tempo real.</p>
+
+<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>
diff --git a/files/pt-br/tools/eyedropper/index.html b/files/pt-br/tools/eyedropper/index.html
new file mode 100644
index 0000000000..effd65b84d
--- /dev/null
+++ b/files/pt-br/tools/eyedropper/index.html
@@ -0,0 +1,47 @@
+---
+title: Eyedropper
+slug: Tools/Eyedropper
+tags:
+  - CSS
+  - Design
+  - Eyedropper
+  - colors
+translation_of: Tools/Eyedropper
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>O Eyedropper é novidade no Firefox 31.</p>
+</div>
+
+<p>A ferramenta Eyedropper permite que você selecione cores na página atual. Funciona como uma lupa através da página, permitindo que você selecione com uma precisão de pixels. Abaixo da lupa é mostrado o valor da cor do pixel atual, baseado na representação selecionada em <a href="/en-US/docs/Tools/Settings#Inspector">Settings &gt; Inspector</a> &gt; Default color unit:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="display: block; height: 204px; margin-left: auto; margin-right: auto; width: 305px;">Você pode usar para as seguintes finalidades:</p>
+
+<ul>
+ <li>para selecionar uma cor de uma página e copiá-la para a área de transferência.</li>
+ <li>para mudar o valor da cor nas Regras do Inspetor para uma nova cor que tenha sido selecionada na página.</li>
+</ul>
+
+<h2 id="Copiando_a_cor_para_a_clipboard">Copiando a cor para a clipboard</h2>
+
+<p>Abra o Eyedropper usando uma das seguintes maneiras:</p>
+
+<ul>
+ <li>selecione "Eyedropper" no menu "Web Developer"</li>
+ <li>click no botão do eyedropper na <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox toolbar</a> (note que este butão não é mostrado por padrão: você precisa adicioná-lo marcando "Grab a color from the page" <a href="/en-US/docs/Tools_Toolbox#Settings">Configurações do Developer Tools</a>)</li>
+</ul>
+
+<p>A medida que você movimenta o mouse através da página, você verá o valor da cor atual sendo alterado no Eyedorpper. Ao clicar, a cor atual será copiada à área de trasnferência.</p>
+
+<p>{{EmbedYouTube("xf2uk6UyRB8")}}</p>
+
+<h2 id="Alterando_o_valor_de_uma_cor_no_visualizador_de_regras.">Alterando o valor de uma cor no visualizador de regras. </h2>
+
+<p>Valores de cores que aparecem nas regras do Inspetor possuem amostras de cores próximas a elas: clicar na amostra habilita uma <a href="/en-US/docs/Tools/Page_Inspector#Color_picker">popup de seleção de cores</a>. Desde o Firefox 31, a popup possui um ícone do eyedropper: clique neste ícone para ativar o Eyedropper.</p>
+
+<p>Assim, quando você clicar no Eyedropper, a cor no visualizador de regras estará atribuída com o valor selecionado.</p>
+
+<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p>
+
+<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "eyedropper") }}</p>
diff --git a/files/pt-br/tools/index.html b/files/pt-br/tools/index.html
new file mode 100644
index 0000000000..46d40c34ff
--- /dev/null
+++ b/files/pt-br/tools/index.html
@@ -0,0 +1,189 @@
+---
+title: Ferramentas do Firefox para desenvolvedores
+slug: Tools
+tags:
+  - Developing Mozilla
+  - NeedsMarkupWork
+  - NeedsTechnicalReview
+  - NeedsTranslation
+  - Tools
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+translation_of: Tools
+---
+<div class="summary"><span class="seoSummary">Examine, edite e depure HTML, CSS e JavaScript no computador e no celular</span></div>
+
+<div class="column-container zone-callout"><a href="https://www.mozilla.org/pt-BR/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; color: white; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.3) 0px -1px 0px 0px inset;">Instalar o Firefox Developer Edition</a>
+
+<h3 id="Whats_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">Quais as novidades no Firefox Developer Edition?</h3>
+
+<p>O <a href="/pt-BR/Firefox/Developer_Edition">Firefox Developer Edition</a> é a versão do Firefox para desenvolvedores, com as mais recentes funcionalidades e ferramentas de desenvolvimento experimentais. Atualmente a Developer Edition inclui as seguintes atualizações para as ferramentas de desenvolvimento:</p>
+
+<ul>
+ <li><a href="/pt-BR/docs/Tools/Network_Monitor#Security">Painel de segurança no Network Monitor</a></li>
+ <li><a href="/pt-BR/docs/Tools/Page_Inspector#Animations_view">Painel de animações no Page Inspector</a></li>
+ <li><a href="/pt-BR/docs/Tools/WebIDE#Running_a_custom_build_step">Suporte para execução de builds customizados na WebIDE</a></li>
+</ul>
+</div>
+
+<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; color: white; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.3) 0px -1px 0px 0px inset;">Compartilhe suas ideias</a>
+
+<h3 id="Share_your_ideas" name="Share_your_ideas">Compartilhe suas ideias</h3>
+
+<p>Peça novas funcionalidades nas ferramentas de desenvolvimento ou vote em ideias de outros desenvolvedores.</p>
+</div>
+
+<p><img alt="" dir="ltr" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Creating" name="Creating">Criando</h2>
+
+<p>Ferramentas de criação de sites e aplicativos web.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Tools/Scratchpad">Scratchpad</a></dt>
+ <dd>Um editor de texto embutido no Firefox que permite editar e executar código JavaScript.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Editor_de_Estilos">Style Editor</a></dt>
+ <dd>Visualize e edite estilos CSS na página atual.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Shader_Editor">Shader Editor</a></dt>
+ <dd>Visualize e edite vértices e fragmentos de shaders usados pelo <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
+ <dd>Examine o gráfico de nós de audio num contexto de audio, e modifique seus parâmetros.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Exploring" name="Exploring">Explorando e depurando</h2>
+
+<p>Examine, explore e depure sites e aplicativos web.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Tools/Web_Console">Web Console</a></dt>
+ <dd>Visualize os logs de execução da página e interaja com ela usando JavaScript.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Page_Inspector">Page Inspector</a></dt>
+ <dd>Visualize e modifique a página HTML e CSS.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Depurador">JavaScript Debugger</a></dt>
+ <dd>Pare, analise e modifique o JavaScript em execução na página.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Network_Monitor">Network Monitor</a></dt>
+ <dd>Acompanhe as requisições de feitas à rede enquanto a página é carregada.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
+ <dd>Inspecione cookies, armazenamento local, indexedDB e armazenamento da sessão presentes na página.</dd>
+ <dt><a href="/pt-BR/docs/Tools/GCLI">Developer Toolbar</a></dt>
+ <dd>Uma interface de linha de comando para as ferramentas de desenvolvimento.</dd>
+ <dt><a href="/pt-BR/docs/Tools/3D_View">3D View</a></dt>
+ <dd>Visualização da página em 3D.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Eyedropper">Eyedropper</a></dt>
+ <dd>Obtenha o código da cor de um determinado pixel da página.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Working_with_iframes">Trabalhando com iframes</a></dt>
+ <dd>Como trabalhar com iframe.</dd>
+</dl>
+</div>
+</div>
+
+<div class="column-container" dir="ltr">
+<div class="column-half">
+<h2 id="Mobile" name="Mobile">Móvel</h2>
+
+<p>Ferramentas para desenvolvimento <em>mobile</em>.</p>
+
+<dl>
+ <dt><a href="/pt-BR/Firefox_OS/Using_the_App_Manager">Gerenciador de app</a></dt>
+ <dd>Design e desenvolvimento de apps para FirefoxOS
+ <hr></dd>
+ <dt><a href="/pt-BR/docs/Tools/WebIDE">WebIDE</a></dt>
+ <dd>O substituto do App Manager, disponível a partir da versão 33 do Firefox.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Simulador_Firefox_OS">Firefox OS Simulador</a></dt>
+ <dd>Simule e faça debug de sua aplicação para o Firefox OS no desktop, sem a necessidade de um aparelho com Firefox OS instalado.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Modo_Design_Adaptavel">Responsive Design View</a></dt>
+ <dd>Veja como o seu site ou app responde a diferentes resoluções de tela, sem precisar ficar redimensionando a janela do browser.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging no Firefox for Android</a></dt>
+ <dd>Developer tools para o Firefox for Android.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Performance" name="Performance">Performance</h2>
+
+<p>Diagnosticando e corrigindo problemas.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Tools/Performance">Performance tool</a></dt>
+ <dd>Renovada o perfil JS e o cronograma de taxa de quadros</dd>
+</dl>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Tools/Profiler">JavaScript Profiler</a></dt>
+ <dd>Descubra onde seu código JavaScript está gastando seu tempo.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
+ <dd>Destaque as partes da página que são redesenhados em resposta a eventos.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt>
+ <dd>Veja eventos de reflow no web console.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt>
+ <dd>Veja quanto tempo as partes do seu site levam pra carregar.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<div class="column-container" dir="ltr">
+<div class="column-half">
+<h2 id="Debugging_the_browser" name="Debugging_the_browser">Depurando no navegador</h2>
+
+<p>Por padrão, a ferramenta de desenvolvimento é ligada a uma página web ou web <em>app</em>. Mas você pode também conecta-los ao navegador como um todo. Isso é útil para o desenvolvimento para navegador e para add-ons.</p>
+
+<dl>
+ <dt><a href="/pt-BR/docs/Tools/Browser_Console">Browser Console</a></dt>
+ <dd>Veja as mensagens de log do browser e de add-ons, e execute JavaScript no escopo do browser.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
+ <dd>Anexe o Developer Tools para o próprio navegador.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h2 id="Extending_the_devtools" name="Extending_the_devtools">Estendendo o devtools</h2>
+
+<p>As ferramentas de desenvolvimentos são desenhadas para serem extensíveis. Add-ons do Firefox podem acessar as ferramentas de desenvolvimento e os componentes que eles usam para estender ferramentas existentes e adicionar novas. Com o protocolo remoto de debugging você pode implementar seu próprio cliente de debugging e servidores, permitindo a você o debug de websites usando suas próprias ferramentas ou debuggando diferentes alvos usando as ferramentas do Firefox.</p>
+
+<dl>
+ <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
+ <dd>O protocolo usado para conectar o Firefox Developer Tools a um destino de debuggin como uma instância do Firefox ou um aparelho com Firefox OS.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Editor">Editor de código</a></dt>
+ <dd>Um editor de código embutido dentro do Firefox que pode ser incorporado no seu add-on.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Debugger-API">A interface do <code>Debugger</code></a></dt>
+ <dd>Uma API que permite que o código JavaScript observe a execução de outro código JavaScript. O Firefox Developer Tools usa essa API para implementar o debugger JavaScript.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Web_Console/Custom_output">Output do Web Console personalizado</a></dt>
+ <dd>Como estender e customizar o output do <a href="/en-US/docs/Tools/Web_Console">Web Console</a>  e o <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 dir="ltr" id="More_resources" name="More_resources">Mais recursos</h2>
+
+<p dir="ltr">Essa seção lista recursos que não são mantidos pela equipe do developer tools da Mozilla, mas que são largamente usados por desenvolvedores web. Nós temos incluído alguns add-ons do Firefox nessa lista, mas para uma lista completa veja a <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">categoria “Web Development” em addons.mozilla.org</a>.</p>
+
+<div class="column-container" dir="ltr">
+<div class="column-half">
+<dl>
+ <dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
+ <dd>Uma ferramenta de desenvolvimento muito popular e poderosa, que inclue um debugger JavaScript, visualizador e editor de HTML e CSS, e um monitor de rede.</dd>
+ <dt><a href="/pt-BR/docs/DOM_Inspector">DOM Inspector</a></dt>
+ <dd>Inspeciona, navega e edita o DOM de páginas web ou janelas XUL.</dd>
+ <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt>
+ <dd>Adiciona um menu e uma barra de ferramentas ao browser com várias ferramentas de desenvolvimento web.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt>
+ <dd>Um conjunto de ferramentas desenvolvidas pela Mozilla, destinada a pessoas que estão começando no desenvolvimento Web.</dd>
+ <dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt>
+ <dd>O site W3C hospeda um número de ferramentas para checar a validação do seu website, incluindo <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> e <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
+ <dt><a href="http://www.jshint.com/">JSHint</a></dt>
+ <dd>Ferramenta de análise de código JavaScript.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/pt-br/tools/inspetor_de_armazenamento/index.html b/files/pt-br/tools/inspetor_de_armazenamento/index.html
new file mode 100644
index 0000000000..82215530a4
--- /dev/null
+++ b/files/pt-br/tools/inspetor_de_armazenamento/index.html
@@ -0,0 +1,137 @@
+---
+title: Inspetor de Armazenamento
+slug: Tools/Inspetor_de_Armazenamento
+tags:
+  - Armazenamento
+  - Armazenamento Local
+  - Ferramentas
+  - Guía
+  - Sidebar
+  - ferramentas do desenvolvedor
+  - inspetor de armazenamento
+  - seção
+translation_of: Tools/Storage_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="geckoVersionNote">
+<p>O Inspetor de Armazenamento é novo no Firefox 34.</p>
+
+<p>Inspetor de Armazenamento vem desabilitado por padrão. Habilite-o nas <a href="/en-US/docs/Tools_Toolbox#Settings">Configurações de Ferramentas do Desenvolvedor</a>.</p>
+</div>
+
+<p>O Inspetor de Armazenamento permite a você inspecionar diversos tipos de armazenamento que uma página na web pode usar. Atualmente ele pode ser usado para inspecionar os seguintes tipos de armazenamento:</p>
+
+<ul>
+ <li><em>Cookies</em> - Todos os cookies criados pela página ou quaisquer iframes dentro da página. Cookies criados como parte de uma resposta de chamada de rede também são listados, mas apenas para chamadas que aconteceram enquanto a ferramenta estava aberta.</li>
+ <li><em>Local Storage</em> - Todos os itens de armazenamentos locais criados pela página ou quaisquer iframes dentro da página.</li>
+ <li><em>Session Storage</em> - Todas os itens de armazenamento de sessão criados pela página ou quaisquer iframes dentro da página.</li>
+ <li><em>IndexedDB</em> - Todos os bancos de dados IndexedDB criados pela página ou quaisquer iframes dentro da página, seus Object Stores e os itens armazenados nestes Object Stores.</li>
+</ul>
+
+<p>Pelo tempo presente, o Inspetor de Armazenamento fornece apenas uma visão <em>read-only </em>do armazenamento. Mas estamos trabalhando para permitir a você editar o conteúdo do armazenamento em futuros lançamentos.</p>
+
+<h2 id="Abrindo_o_Inspetor_de_Armazenamento">Abrindo o Inspetor de Armazenamento</h2>
+
+<p>Uma vez habilitado, você poderá abrir o Inspetor de Armazenamento selecionando "Inspetor de Armazenamento" a partir do submenu do Desenvolvedor Web no Painel de Menu do Firefox (ou menu de Ferramentas se você exibir a barra de menu ou estiver no Mac OS X), or pressionando o atalho de teclado Shift + F9.</p>
+
+<p>A  <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Caixa de Ferramentas</a> vai aparecer na parte de baixo da janela do navegador, com o Inspetor de Armazenamento ativado. Ele é chamado apenas de "Armazenamento" na Caixa de Ferramentas do Desenvolvedor.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8503/Capture1.JPG" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Interface_de_Usuário_do_Inspetor_de_Armazenamento">Interface de Usuário do Inspetor de Armazenamento</h2>
+
+<p>A UI do Inspetor de Armazenamento é dividida em três componentes principais:</p>
+
+<ul>
+ <li><a href="#storage-tree">Árvore de armazenamento</a></li>
+ <li><a href="#table-widget">Table Widget</a></li>
+ <li><a href="#sidebar">Sidebar</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8507/capture2.jpg" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Árvore_de_armazenamento"><a name="storage-tree">Árvore de armazenamento</a></h3>
+
+<p>A árvore de armazenamento lista todos os tipos de armazenamentos que o Inspetor de Armazenamento pode inspecionar. Para cada tipo, ele possui uma lista de todas as possíveis origens disponíveis. Uma origem é um domínio ou um <em>hostname</em> para diferentes tipos de armazenamento. Para cookies, o protocolo não diferencia a origem. Para indexedDB ou armazenamento local uma origem é uma combinação de protocolo + hostname. Por exemplo, "http://mozilla.org" e "https://mozilla.org" são duas origens diferentes então itens de armazenamento local não podem ser compartilhados entre eles.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8509/capture3.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Enquanto cookies, armazenamento local e itens de armazenamento de sessão são diretamente associados a uma origem, para indexedDB a hierarquia tem mais níveis. Todos os itens de indexedDB são associados com um objeto de armazenamento que é então associado a um banco de dados, e finalmente um banco de dados é associado a uma origem.</p>
+
+<p>Você pode clicar em cada item da árvore para expandir ou contrair seus filhos. A árvore funciona em tempo real, então se um novo objeto for adicionado (adicionando um iframe, por exemplo), ele vai ser adicionado para cada tipo de armazenamento automaticamente. Clicar nos itens da árvore vai mudar os dados de na tabela à direita. Por exemplo, clicar em uma origem que é uma filha do tipo armazemento de Cookies  mostrará todos os cookies pertencentes àquele domínio.</p>
+
+<h3 id="Widget_tabela"><a name="table-widget">Widget tabela</a></h3>
+
+<p>O widget tabela é um local onde todos os itens correspondentes ao item da árvore selecionada (seja uma origem, ou banco de dados) são listados. Dependendo do tipo de armazenamento  e do item da árvore, o número de colunas pode variar.</p>
+
+<p>Todas as colunas no Widget Tabela são redimencionáveis e podem ser ocultados via menu de contexto no cabeçalho da tabela até que apenas duas colunas estejam visíveis.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8511/capture4.jpg" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Cookies">Cookies</h4>
+
+<p>When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table. The table then has the following columns:</p>
+
+<ul>
+ <li><em>Name</em> - The name of the cookie</li>
+ <li><em>Path</em> - The path property of the cookie</li>
+ <li><em>Domain</em> - The domain of the cookie</li>
+ <li><em>Expires On</em> - The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session"</li>
+ <li><em>Created On</em> - When the cookie was created</li>
+ <li><em>Last Accessed On</em> - When the cookie was last read</li>
+ <li><em>Value</em> - The value of the cookie</li>
+ <li><em>isDomain</em> - Is this cookie a domain cookie: that is, the domain value starts with a "."</li>
+ <li><em>isSecure</em> - Is this cookie a secure cookie</li>
+ <li><em>isHttpOnly</em> - Is this cookie http only.</li>
+</ul>
+
+<h4 id="Local_storage_Session_storage">Local storage / Session storage</h4>
+
+<p>When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.</p>
+
+<h4 id="IndexedDB_origin">IndexedDB origin</h4>
+
+<p>When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin. Databases have the following details:</p>
+
+<ul>
+ <li><em>Database Name</em> - The name of the database</li>
+ <li><em>Origin</em> - Its origin</li>
+ <li><em>Version</em> - The database version</li>
+ <li><em>Object Stores</em> - Number of object stores in the database</li>
+</ul>
+
+<h4 id="IndexedDB_Database">IndexedDB Database</h4>
+
+<p>When an IndexedDB database is selected in the storage tree, details about all the object stores is listed in the table. Any object store has the following details:</p>
+
+<ul>
+ <li><em>Object Store Name</em> - The name of the object store</li>
+ <li><em>Key</em> - The keyPath property of the object store.</li>
+ <li><em>Auto Increment</em> - Whether auto increment is enabled</li>
+ <li><em>Indexes</em> - Array of indexes present in the object store as shown below</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8513/capture5.jpg" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="IndexedDB_object_store">IndexedDB object store</h4>
+
+<p>When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.</p>
+
+<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3>
+
+<p>Quando você seleciona qualquer linha na tabela de ferramentas de armazenamento, a sidebar é mostrada com detalhes sobre a linha selecionada. Se um cookie é selecionado, a sidebar listará todos os detalhes sobre o cookie selecionado.</p>
+
+<p>A sidebar pode analisar o valor do cookie, um ítem do armazenamento local ou um ítem do IndexedDB e covertê-lo em um objeto significante ao invés de apenas uma string. Por exemplo, um JSON convertido como <code>'{"foo": "bar"}'</code> é mostrado como a origem JSON<code> {foo: "bar"}</code>, o valor da chave separado como <code>1~2~3~4</code> é mostrado como um array <code>[1, 2, 3, 4]</code>. Abaixo há algumas telas mostrando exemplos de diferentes tipos de valores analisados:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8517/capture6.jpg" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p style="text-align: center;"><em>Um JSON convertido em string sendo mostrado como o JSON original na seção parsed value da sidebar</em></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8519/capture7.jpg" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p style="text-align: center;"><em>Uma string contendo um par chave-valor sendo mostrada como JSON na seção parsed value da sidebar</em></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8521/capture8.jpg" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p style="text-align: center;"><em>Uma string contendo chave e valor separados sendo mostrada como um Array na seção parsed value da sidebar</em></p>
diff --git a/files/pt-br/tools/keyboard_shortcuts/index.html b/files/pt-br/tools/keyboard_shortcuts/index.html
new file mode 100644
index 0000000000..273bb3c263
--- /dev/null
+++ b/files/pt-br/tools/keyboard_shortcuts/index.html
@@ -0,0 +1,968 @@
+---
+title: Atalhos do Teclado
+slug: Tools/Keyboard_shortcuts
+translation_of: Tools/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div><p>Essa página Lista todos os atalhos de teclados para usar com as ferramentas de desenvolvedor dentro do Firefox.</p>
+
+<p>A primeira seção lista o atalho para abrir cada ferramenta e a segunda seção lista atalhos que são aplicáveis à própria caixa de ferramentas. Depois disso há uma seção para cada ferramenta, que lista os atalhos que você pode usar dentro dessa ferramenta.</p>
+
+<p>Por que as chaves de acesso são dependentes do local, eles não estão documentadas neste página.</p>
+
+<h2 id="Ferramentas_de_abertura_e_fechamento">Ferramentas de abertura e fechamento</h2>
+
+<p>Esses atalhos funcionam na janela principal do navegador para abrir a ferramenta especificada. Para ferramentas que são hospedados na caixa de ferramentas, eles trabalham para fechar a ferramenta se estiver ativo. Para ferramentas como o Console do navegador que abrir em uma nova janela, você tem que fechar a janela para fechar a ferramenta.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Abre o Toolbox (com a ferramenta mais recente ativado)</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Traz o Toolbox para primeiro plano (se a caixa de ferramentas está em uma janela separada e não em primeiro plano)</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Fechar Toolbox (se a caixa de ferramentas está em uma janela separada e está em primeiro plano)</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre o Web console<a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Alternar Inspetor</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre o Debugger</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre o Editor de Estilo (CSS)</th>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre o Desempenho da Página</th>
+   <td><kbd>Shift</kbd> + <kbd>F5</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F5</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Shift</kbd> + <kbd>F5</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre o Monitor</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Altera a Barra de Desenvolvedor</th>
+   <td><kbd>Shift</kbd> + <kbd>F2</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F2</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>Shift</kbd> + <kbd>F2</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Altera a Visualização de Design Responsivo</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre o Console do navegador<a href="#opening-closing-browser-console-note"><sup>2</sup></a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre o Console do Navegador (Apartir do Firefox 39)</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre o Scratchpad</th>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Abre o WebIDE</th>
+   <td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Inspetor de Armazenamento<a href="#disabled-tools-shortcut"><sup>3</sup></a></th>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="opening-closing-web-console-note">1. Ao contrário das outras ferramentas hospedadas na caixa de ferramentas, esse atalho também não fecha o Web Console. Em vez disso, concentra-se na linha de comando do Web Console. Para fechar o Web Console, use o atalho caixa de ferramentas global de <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd> (<kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>I</kbd> no MAC).</a></p>
+
+<p><a name="opening-closing-browser-console-note">2. Até o Firefox 38, quando o navegador Console estava oculta por uma janela do Firefox normal, a mesma combinação de teclas fecha o Console do Navegador. Do Firefox 38 em diante, se o Console do Navegador está oculta por uma janela do Firefox normal, esta combinação de teclas traz o navegador Console de volta ao topo e se concentra nele.</a></p>
+
+<p><a href="/en-US/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">3. A ferramenta está desativado por padrão, de modo que o atalho não iria funcionar até que seja ativada a partir do Painel de ajustes</a></p>
+
+<h2 id="Caixa_de_Ferramentas">Caixa de Ferramentas</h2>
+
+<div id="toolbox-shortcuts">
+<p>Estes atalhos funcionam sempre que o toolbox estiver aberto, não importando qual ferramenta esteja ativa.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Navega pelas ferramentas da esquerda para direita</th>
+   <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>]</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Navega pelas ferramentas da direita para esquerda</th>
+   <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>[</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Troca entre a ferramenta ativa e configurações</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Troca entre a ferramenta ativa e configurações (no no Firefox 43)</th>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+   <td><kbd>F1</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>Alterna a caixa de ferramentas entre os dois <a href="/en-US/docs/Tools/Tools_Toolbox#Docking_mode">modos de posicionamento da caixa de ferramentas</a> (novo no Firefox 41).</p>
+   </th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Aparece e desaparece o console (exceto quando já está na aba console)</th>
+   <td><kbd>ESC</kbd></td>
+   <td><kbd>ESC</kbd></td>
+   <td><kbd>ESC</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="all-toolbox-tools">
+<p>Estes atalhos funcionam em todas as ferramentas que estão disponíveis na caixa de ferramentas.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Aumentar o tamanho da fonte</th>
+   <td><kbd>Ctrl</kbd> + <kbd>+</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>+</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>+</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Diminuir o tamanho da fonte</th>
+   <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>-</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Voltar fonte para o tamanho normal</th>
+   <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>0</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Editor_de_Código">Editor de Código</h2>
+
+<div id="source-editor">
+<p>Esta tabela lista todos os atalhos padrões do editor de código.</p>
+
+<p>Na seção <a href="/en-US/docs/Tools/Tools_Toolbox#Editor_Preferences">preferências do editor</a> em configurações das ferramentas de desenvolvimento, você pode escolher usar as associações do teclado do Vim, Emacs, ou Sublime Text.</p>
+
+<p>Para selecionar este, acesse <code>about:config</code>, selecione configurações <code>devtools.editor.keymap</code>, e adicione "vim" ou "emacs", ou "sublime" para esta configuração. Se você fazer isso, as associações de tecla serão usadas para todas ferramentas da caixa de ferramentas que utilizam o editor de código. É necessário reabrir o editor de código para as configurações terem efeito.</p>
+
+<p>A partir do Firefox 33, as configurações mencionadas acima podem ser realizadas nas configurações das ferramentas do desenvolvedor no na seção <a href="/en-US/docs/Tools/Tools_Toolbox#Editor_Preferences">Editor de Preferências</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Ir para a linha</th>
+   <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>J</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Encontrar no arquivo</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Buscar novamente</th>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>G</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Selecionar tudo</th>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Cortar</th>
+   <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>X</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Copiar</th>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Colar</th>
+   <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Desfazer</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Refazer</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Identar</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Desfazer Identar</th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Mover linha(s) acima</th>
+   <td><kbd>Alt</kbd> + <kbd>Up</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Up</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Mover linha(s) abaixo</th>
+   <td><kbd>Alt</kbd> + <kbd>Down</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Down</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Comentar/descomentar linha(s)</th>
+   <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>/</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Inspetor_de_Página">Inspetor de Página</h2>
+
+<div id="page-inspector">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Comando</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>Abrir o Inspetor</p>
+   </th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="HTML_pane">HTML pane</h3>
+
+<p>These shortcuts work while you're in the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML" title="/en-US/docs/Tools/Page_Inspector#HTML_pane">Inspector's HTML pane</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Delete the selected node</th>
+   <td><kbd>Delete</kbd></td>
+   <td><kbd>Delete</kbd></td>
+   <td><kbd>Delete</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Undo delete of a node</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Redo delete of a node</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Move to next node (expanded nodes only)</th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Move to previous node</th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Expand currently selected node</th>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Collapse currently selected node</th>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+   <td><kbd>Right arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Step forward through the attributes of a node</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Step backward through the attributes of a node</th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Start editing the selected attribute</th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Hide/show the selected node</th>
+   <td><kbd>H</kbd></td>
+   <td><kbd>H</kbd></td>
+   <td><kbd>H</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Focus on the search box in the HTML pane</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Edit as HTML</th>
+   <td><kbd>F2</kbd></td>
+   <td><kbd>F2</kbd></td>
+   <td><kbd>F2</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="CSS_pane">CSS pane</h3>
+
+<p>These shortcuts work when you're in the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS" title="/en-US/docs/Tools/Page_Inspector#CSS_pane">Inspector's CSS pane</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Step forward through properties and values</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Step backwards through properties and values</th>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Increment selected value by one</th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Decrement selected value by one</th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Increment selected value by 10</th>
+   <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Decrement selected value by 10</th>
+   <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Increment selected value by 0.1</th>
+   <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Opt</kbd> + <kbd>Up arrow</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Decrement selected value by 0.1</th>
+   <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Opt</kbd> + <kbd>Down arrow</kbd></td>
+   <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Debugger">Debugger</h2>
+
+<div id="debugger">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Open the Debugger</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Search in the current source using the <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Find next in the current source</th>
+   <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td>
+   <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td>
+   <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Find previous in the current source</th>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Search in all sources using the <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Search for scripts by name</th>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Search for function definitions</th>
+   <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>D</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Filter variables when execution is paused</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>V</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Resume execution when at a breakpoint</th>
+   <td><kbd>F8</kbd></td>
+   <td><kbd>F8</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F8</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Step over</th>
+   <td><kbd>F10</kbd></td>
+   <td><kbd>F10</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td>
+   <td><kbd>F10</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Step into</th>
+   <td><kbd>F11</kbd></td>
+   <td><kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Step out</th>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td>
+   <td><kbd>Shift</kbd> + <kbd>F11</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Toggle breakpoint on the currently selected line</th>
+   <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Toggle conditional breakpoint on the currently selected line</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Add selected text to Watch expressions</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Go to line using the <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Search using the <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<p><a name="mac-function-key-note">1. By default, on some Macs, the function key is remapped to use a special feature: for example, to change the screen brightness or the volume. See this </a><a href="http://support.apple.com/kb/HT3399" title="http://support.apple.com/kb/HT3399">guide to using these keys as standard function keys</a>. To use a remapped key as a standard function key, hold the Function key down as well (so to open the Profiler, use <kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd>).</p>
+</div>
+
+<h2 id="Web_Console">Web Console</h2>
+
+<div id="web-console">
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Open the Web Console</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Search in the message display pane</th>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>F</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Clear the <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">object inspector pane</a></th>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Focus on the command line</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Clear output</th>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Command_line_interpreter">Command line interpreter</h3>
+
+<p>These shortcuts apply when you're in the <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/Tools/Web_Console#The_command_line_interpreter">command line interpreter</a>.</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Scroll to start of console output (new in Firefox 34, and only if the command line is empty)</th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Scroll to end of console output (new in Firefox 34, and only if the command line is empty)</th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Page up through console output</th>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Page down through console output</th>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Go backwards through <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">command history</a></th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Go forward through command history</th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Move to the beginning of the line</th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Move to the end of the line</th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Execute the current expression</th>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Return</kbd></td>
+   <td><kbd>Return</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Add a new line, for entering multiline expressions</th>
+   <td><kbd>Shift</kbd> + <kbd>Return</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Return</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Return</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Autocomplete_popup">Autocomplete popup</h3>
+
+<p>These shortcuts apply while the <a href="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete popup</a> is open:</p>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Choose the current autocomplete suggestion</th>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+   <td><kbd>Tab</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Cancel the autocomplete popup</th>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Move to the previous autocomplete suggestion</th>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+   <td><kbd>Up arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Move to the next autocomplete suggestion</th>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+   <td><kbd>Down arrow</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Page up through autocomplete suggestions</th>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+   <td><kbd>Page up</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Page down through autocomplete suggestions</th>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+   <td><kbd>Page down</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Scroll to start of autocomplete suggestions (new in Firefox 34)</th>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+   <td><kbd>Home</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Scroll to end of autocomplete suggestions (new in Firefox 34)</th>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+   <td><kbd>End</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Style_Editor">Style Editor</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Open the Style Editor</th>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Open auto completion popup</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+  </tr>
+ </tbody>
+</table>
+
+<div id="scratchpad">
+<h2 id="Scratchpad">Scratchpad</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Open the Scratchpad</th>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Run Scratchpad code</th>
+   <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Run Scratchpad code, display the result in the <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">object inspector</a></th>
+   <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>I</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Run Scratchpad code, insert the result as a comment</th>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>L</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Re-evaluate current function</th>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>E</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Reload the current page, then run Scratchpad code</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Save the pad</th>
+   <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>S</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Open an existing pad</th>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>O</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Create a new pad</th>
+   <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>N</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Close Scratchpad</th>
+   <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>W</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Pretty print the code in Scratchpad</th>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Cmd</kbd> + <kbd>P</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Show autocomplete suggestions (new in Firefox 32)</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Show inline documentation (Firefox 32 only)</th>
+   <td><kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>Space</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Show inline documentation (Firefox 33 onwards)</th>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td>
+   <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="eyedropper">
+<h2 id="Eyedropper">Eyedropper</h2>
+
+<table class="fullwidth-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 40%;">Command</th>
+   <th scope="col">Windows</th>
+   <th scope="col">OS X</th>
+   <th scope="col">Linux</th>
+  </tr>
+  <tr>
+   <th scope="row">Select the current color</th>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Enter</kbd></td>
+   <td><kbd>Enter</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Dismiss the Eyedropper</th>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+   <td><kbd>Escape</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Move by 1 pixel</th>
+   <td><kbd>Arrow keys</kbd></td>
+   <td><kbd>Arrow keys</kbd></td>
+   <td><kbd>Arrow keys</kbd></td>
+  </tr>
+  <tr>
+   <th scope="row">Move by 10 pixels</th>
+   <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td>
+   <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html b/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html
new file mode 100644
index 0000000000..005813bc8f
--- /dev/null
+++ b/files/pt-br/tools/medir_uma_porcao_da_pagina/index.html
@@ -0,0 +1,38 @@
+---
+title: Medir uma porção da página
+slug: Tools/Medir_uma_porcao_da_pagina
+tags:
+  - DevTools
+  - Exibir coordenadas
+  - Ferramentas de estilo
+  - Medir com o mouse
+  - ferramentas do desenvolvedor
+  - régua
+translation_of: Tools/Measure_a_portion_of_the_page
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="geckoVersionNote">Novidade do Firefox 59.</p>
+
+<p>Desde o Firefox 59, você pode medir uma área específica da página web ao utilizar a ferramenta de medida de porção da página.</p>
+
+<p>Esta ferramenta está oculta por padrão. Para habilitar o seu botão faça:</p>
+
+<ul>
+ <li>Vá para as <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Configurações</a> do DevTools.</li>
+ <li>Na seção Botões disponíveis da caixa de ferramentas (<em>Available Toolbox Buttons) marque a opção</em> ferramenta de medida de porção da página (<em>Measure a portion of the page)</em>.</li>
+</ul>
+
+<p>Você verá o botão da ferramenta de medida de porção da página na parte superior direita da tela DevTools, no mesmo local dos botões de opções e configurações do mesmo.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15787/measure-button.png" style="display: block; height: 190px; margin: 0px auto; width: 324px;"></p>
+
+<p>Quando você quiser utilizar a ferramenta, clique em seu botão. A partir de agora, quando você passar o mouse sobre a página web, você verá que o cursor do mouse será em formato de cruz e a sua coordenada atual será exibida ao lado do cursor.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15786/cursor-shown.png" style="border-style: solid; border-width: 1px; display: block; height: 277px; margin: 0px auto; width: 447px;"></p>
+
+<p>Quando você manter pressionado o botão esquerdo do mouse e arrastá-lo, será desenhado um retângulo, com as suas dimensões  X,Y e diagonal sendo exibidas. A unidade de medida se dá em pixels.</p>
+
+<p>Quando você soltar o botão do muose, o retângulo permanecerá exibido em tela até que você clique novamente dentro da página web, isso permite que durante esse meio tempo, você possa efetuar screenshots da tela, tomar os dados exibidos para anotações externas, etc.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15785/box-shown.png" style="border-style: solid; border-width: 1px; display: block; height: 303px; margin: 0px auto; width: 438px;"></p>
diff --git a/files/pt-br/tools/memory/index.html b/files/pt-br/tools/memory/index.html
new file mode 100644
index 0000000000..9dce9be076
--- /dev/null
+++ b/files/pt-br/tools/memory/index.html
@@ -0,0 +1,60 @@
+---
+title: Memory
+slug: Tools/Memory
+translation_of: Tools/Memory
+---
+<div>{{ToolsSidebar}}</div><p>A ferramenta de memória permite que você tire um snapshot da aba atual de memória <a class="external external-icon" href="http://en.wikipedia.org/wiki/Memory_management#HEAP" title="heap">heap</a>. Então fornece um número de visualizações do heap que lhe mostrar quais objetis account for memory usage and exactly where in your code you are allocating memory.</p>
+
+<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p>
+
+<hr>
+<h3 id="Básico">Básico</h3>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Opening_the_Memory_tool">Abrindo a ferramenta de memória</a></li>
+ <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Taking_a_heap_snapshot">Taking a heap snapshot</a></li>
+ <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Comparing_snapshots">Comparando dois snapshots</a></li>
+ <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Clearing_a_snapshot">Deletando snapshots</a></li>
+ <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Saving_and_loading_snapshots">Salvando e carregando snapshots</a></li>
+ <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Recording_call_stacks">Recording call stacks</a></li>
+</ul>
+</div>
+
+<hr>
+<h3 id="Analisando_snapshots">Analisando snapshots</h3>
+
+<div class="geckoVersionNote">
+<p>A visualização do mapa de arvore é nova no Firefox 48, and the Dominators view is new in Firefox 46.</p>
+</div>
+
+<p>Uma vez que você tirou um snapshot, existem três principais visualizações que a ferramenta de Memória fornece:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Memory/Tree_Map_view">the Tree map view</a> shows memory usage as a <a href="https://en.wikipedia.org/wiki/Treemapping">treemap</a>.</li>
+ <li><a href="/en-US/docs/Tools/Memory/Aggregate_view">the Aggregate view</a> shows memory usage as a table of allocated types.</li>
+ <li><a href="/en-US/docs/Tools/Memory/Dominators_view">the Dominators view</a> shows the "retained size" of objects: that is, the size of objects plus the size of other objects that they keep alive through references.</li>
+</ul>
+
+<p>If you've opted to record allocation stacks for the snapshot, the Aggregate and Dominators views can show you exactly where in your code allocations are happening.</p>
+
+<hr>
+<h3 id="Conceitos">Conceitos</h3>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Memory/Dominators">Dominators</a></li>
+</ul>
+</div>
+
+<hr>
+<h3 id="Páginas_de_exemplo">Páginas de exemplo</h3>
+
+<p>Exemplos usados na documentação da Memory took.</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/en-US/docs/Tools/Memory/Monster_example">Monster example</a></li>
+ <li><a href="/en-US/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a></li>
+</ul>
+</div>
diff --git a/files/pt-br/tools/modo_design_adaptavel/index.html b/files/pt-br/tools/modo_design_adaptavel/index.html
new file mode 100644
index 0000000000..a5b6935fd3
--- /dev/null
+++ b/files/pt-br/tools/modo_design_adaptavel/index.html
@@ -0,0 +1,121 @@
+---
+title: Modo Design Adaptável
+slug: Tools/Modo_Design_Adaptavel
+tags:
+  - Desenvolvimento Web
+  - Design
+  - Design Adaptável
+  - Design Responsivo
+  - Ferramentas
+  - Ferramentas de Desenvolvimento
+  - Firefox
+  - Guia(2)
+  - Guide
+  - Guía
+  - 'I10n:priority'
+  - Responsive Design
+  - Tools
+translation_of: Tools/Responsive_Design_Mode
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="result_box" lang="pt"><a href="https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design"><span class="alt-edited hps">Designs</span> <span class="alt-edited hps">Responsivos</span></a> <span class="alt-edited hps">se adaptam a</span> <span class="hps">diferentes tamanhos de tela</span> <span class="hps">para fornecer</span> <span class="hps">uma apresentação</span> <span class="alt-edited hps">que seja adequada para</span> <span class="hps">diferentes tipos de</span> <span class="hps">dispositivos, como</span> <span class="hps">telefones celulares ou</span> <span class="hps">tablets.</span> <span class="alt-edited hps">O</span> Modo de Design Adaptável <span class="alt-edited hps">tornar mais fácil</span> <span class="alt-edited hps">de ver como</span> <span class="hps">seu site ou</span> <span class="hps">aplicativo web</span> <span class="hps">vai olhar para</span> <span class="hps">diferentes tamanhos de tela</span><span>.</span></span></div>
+</div>
+
+<p>{{EmbedYouTube("LBcE72sG2s8")}}</p>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="pt"><span class="hps">A imagem abaixo mostra</span> <span class="hps">uma página na</span> <span class="hps">versão móvel da</span> <span class="hps">Wikipedia</span> <span class="hps">visto com</span> <span class="hps">uma</span> <span class="hps">área de 320</span> <span class="hps">por 480</span><span class="hps"> de conteúdo.</span></span></div>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6137/responsive-design-view.png"></p>
+
+<p><span id="result_box" lang="pt"><span class="alt-edited hps">O</span> Modo de Design Adaptável <span class="hps">é conveniente porque</span> <span class="hps">você pode rapidamente e</span> <span class="hps">precisamente</span> <span class="hps">alterar o tamanho</span> <span class="hps">da área de conteúdo</span><span>.</span><br>
+ <br>
+ <span class="hps">Claro</span><span>, você pode simplesmente</span> <span class="hps">redimensionar a janela do</span> <span class="hps">navegador:</span> <span class="hps">mas diminuir</span> <span class="hps">a janela do navegador</span> torna <span class="hps">menor</span> <span class="hps">todas as suas outras</span> <span class="hps">abas</span> <span class="hps">menores</span> <span class="hps">também, e</span> <span class="hps">pode fazer</span> <span class="hps">a interface do</span> <span class="hps">navegador</span> <span class="hps">ficar muito mais difícil de</span> <span class="hps">usar.</span><br>
+ <br>
+ <span class="hps">Enquanto o</span> Modo de Design Adaptável <span class="hps">estiver ativado, você</span> <span class="hps">pode</span> <span class="hps">continuar a navegação</span><span>, como faria normalmente</span> <span class="hps">na área de conteúdo</span> <span class="hps">redimensionada</span><span>.</span></span></p>
+
+<h2 id="Ativando_e_Desativando">Ativando e Desativando</h2>
+
+<p>Existem três maneiras de ativar o Modo de Design Adaptável:</p>
+
+<ul>
+ <li><span id="result_box" lang="pt"><span class="hps">Selecione</span> <span class="atn hps">"</span>Modo de Design Adaptável<span>" do submenu</span> <span class="hps">Web Developer</span> <span class="hps">no menu</span> <span class="hps">Firefox</span> <span class="hps">(ou</span> <span class="hps">no menu Ferramentas</span><span>, se você</span> <span class="hps">exibir a barra de</span> <span class="hps">menu ou</span> <span class="hps">estão no</span> <span class="hps">OS</span> <span class="hps">X)</span></span></li>
+ <li>Pressione o botão "Modo Design Adaptável" na <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Toolbar">barra de ferramentas da caixa de ferramentas</a></li>
+ <li>Pressione Ctrl + Shift + M, (ou Cmd + Opt + M no Mac OS X)</li>
+</ul>
+
+<p>e três maneiras de retirar o Modo Design Adaptável:</p>
+
+<ul>
+ <li>Selecione o item de menu "Modo Design Adaptável" novamente</li>
+ <li>Clique no botão "fechar" no canto superior esquerdo da janela</li>
+ <li>Pressione Ctrl + Shift + M, (ou Cmd + Opt + M no Mac OS X). Antes do Firefox 34, Escape, também irá fechar o Modo Design adaptável.</li>
+</ul>
+
+<h2 id="Redimensionamento">Redimensionamento</h2>
+
+<p>Você pode redimensionar a área de contéudo de duas maneiras:</p>
+
+<ul>
+ <li><span id="ouHighlight__0_4TO0_5">usando</span><span id="noHighlight_0.5403134427457869"> </span><span id="ouHighlight__6_8TO7_7">o</span><span id="noHighlight_0.06010892189594241"> </span><a href="/en-US/docs/Tools/Responsive_Design_View$translate?tolocale=pt-BR#select-size"><span id="ouHighlight__24_30TO9_16">controle</span><span id="noHighlight_0.12094158215310513"> </span><span id="ouHighlight__10_16TO18_27">"Selecione</span><span id="noHighlight_0.07769393147396586"> </span><span id="ouHighlight__18_21TO29_36">tamanho"</span></a></li>
+ <li><span class="highlight" id="ouHighlight__0_7TO0_7">clicando</span><span id="noHighlight_0.8326165955795358"> </span><span id="ouHighlight__9_11TO9_9">e</span><span id="noHighlight_0.5805372790500697"> </span><span id="ouHighlight__13_20TO11_20">arrastando</span><span id="noHighlight_0.11158011591201744"> </span><span id="ouHighlight__25_27TO22_23">os</span><span id="noHighlight_0.6293012360514642"> </span><span id="ouHighlight__29_36TO25_33">controles</span><span id="noHighlight_0.8869847575190439"> </span><span id="ouHighlight__41_43TO35_36">do</span><span id="noHighlight_0.9673397683973173"> </span><span id="ouHighlight__62_66TO38_41">lado</span><span id="noHighlight_0.9241360200103401"> </span><span id="ouHighlight__45_49TO43_49">direito</span><span id="noHighlight_0.424347904316591"> </span><span id="ouHighlight__51_53TO51_51">e</span><span id="noHighlight_0.6767187887297804"> </span><span id="ouHighlight__55_60TO53_60">inferior</span><span id="noHighlight_0.19151763438304825"> </span><span id="ouHighlight__68_69TO62_63">da</span><span id="noHighlight_0.1219278136649814"> </span><span id="ouHighlight__83_86TO65_68">área</span><span id="noHighlight_0.13771615517950997"> de </span><span id="ouHighlight__75_81TO73_80">conteúdo</span><span id="noHighlight_0.17821394692938886">,</span><span id="noHighlight_0.39006493792224095"> </span><span id="ouHighlight__89_90TO83_84">ou</span><span id="noHighlight_0.09505792682868852"> </span><span id="ouHighlight__92_93TO86_87">no</span><span id="noHighlight_0.4623385424525679"> </span><span id="ouHighlight__112_117TO89_93">canto</span><span id="noHighlight_0.6261242674147262"> </span><span id="ouHighlight__99_110TO95_110">inferior direito</span></li>
+</ul>
+
+<p><span id="result_box" lang="pt"><span class="hps">Se você redimensionar</span> <span class="hps">usando</span> <span class="hps">clique-e</span><span class="atn">-</span><span>arraste</span> <span class="hps">você pode</span> <span class="hps">manter pressionada a tecla</span> <span class="atn hps">Control (</span><span>Cmd</span> <span class="alt-edited hps">no</span> <span class="hps">Max</span> <span class="hps">OS</span> <span class="hps">X)</span> <span class="hps">para abrandar</span> <span class="hps">a velocidade com que</span> <span class="hps">a área</span> <span class="hps">é redimensionado</span><span>.</span> <span class="hps">Isto</span> <span class="hps">faz com que seja</span> <span class="hps">mais fácil</span> <span class="hps">para ajustar o</span> <span class="hps">tamanho</span> <span class="hps">precisamente</span><span>.</span></span></p>
+
+<div style="overflow: hidden;">
+<h2 id="Controles_do_Modo_Design_Adaptável">Controles do Modo Design Adaptável</h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6139/responsive-design-view-controls.png" style="display: block; height: 356px; margin-left: auto; margin-right: auto; width: 545px;"><span id="ouHighlight__6_8TO0_1">Na</span><span id="noHighlight_0.3992395743187196"> </span><span id="ouHighlight__10_12TO3_16">parte superior</span><span id="noHighlight_0.029530961761023766"> </span><span id="ouHighlight__14_15TO18_19">da</span><span id="noHighlight_0.5328966262421795"> </span><span id="ouHighlight__17_26TO21_26">janela</span><span id="noHighlight_0.3739015015495417"> </span><span id="ouHighlight__28_29TO28_29">em</span><span id="noHighlight_0.14187017270829438"> </span><span id="ouHighlight__31_35TO31_33">que</span><span id="noHighlight_0.16468671241646282"> o </span><span id="ouHighlight__55_58TO48_51">Modo</span><span id="noHighlight_0.9215700015444891"> </span><span id="ouHighlight__48_53TO53_58">Design</span><span id="noHighlight_0.9981710228733524"> Adaptável </span><span id="ouHighlight__60_67TO60_64">exibe</span><span id="noHighlight_0.5200181544401548"> </span><span id="ouHighlight__69_71TO66_66">a</span><span id="noHighlight_0.19604424239869145"> </span><span id="ouHighlight__73_76TO68_73">página</span><span id="noHighlight_0.8681670677634923">,</span><span id="noHighlight_0.2049457735100454"> </span><span id="ouHighlight__79_87TO76_82">existem</span><span id="noHighlight_0.39488315206134206"> </span><span id="ouHighlight__89_92TO84_88">cinco</span><span id="noHighlight_0.490502210768601"> </span><span id="ouHighlight__94_101TO90_98">controles</span><span id="noHighlight_0.31393361318969104">:</span></p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><strong>Close</strong> (Fechar)</td>
+   <td>Fechar Modo Design Adaptável e retornar à navegação normal</td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><a name="select-size">Select size</a></strong> (Selecionar o tamanho)</p>
+   </td>
+   <td>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+    <div><span id="ouHighlight__0_5TO0_7">Escolher</span><span id="noHighlight_0.05510603446027207"> </span><span id="ouHighlight__7_10TO9_13">entre</span><span id="noHighlight_0.012267693134043411"> </span><span id="ouHighlight__12_12TO15_17">uma</span><span id="noHighlight_0.014932811650671063"> </span><span id="ouHighlight__14_19TO19_23">série</span><span id="noHighlight_0.758006041014549"> </span><span id="ouHighlight__21_22TO25_26">de</span><span id="noHighlight_0.10495600081798528"> </span><span id="ouHighlight__31_35TO28_34">largura</span><span id="noHighlight_0.5216275624470126"> </span><span id="ouHighlight__24_29TO36_46">predefinida</span><span id="noHighlight_0.46611446599781203"> </span><span id="ouHighlight__37_37TO48_48">x</span><span id="noHighlight_0.1649472149451352"> </span><span id="ouHighlight__46_57TO50_60">combinações</span><span id="noHighlight_0.6836811381784039"> de </span><span id="ouHighlight__39_44TO65_70">altura</span><span id="noHighlight_0.4570348654255373">,</span><span id="noHighlight_0.12098261582483505"> </span><span id="ouHighlight__60_61TO73_74">ou</span><span id="noHighlight_0.7087637160384633"> </span><span id="ouHighlight__63_68TO76_82">definir</span><span id="noHighlight_0.496894860322988"> o </span><span id="ouHighlight__70_73TO86_88">seu</span><span id="noHighlight_0.9140920298253061"> </span><span id="ouHighlight__75_77TO90_96">próprio</span><span id="noHighlight_0.5010510106372641">.</span></div>
+
+
+    <div><span id="ouHighlight__5_11TO0_6">Firefox</span><span id="noHighlight_0.5756585704510945"> </span><span id="ouHighlight__13_14TO8_9">33</span><span id="noHighlight_0.09975119408724631"> </span><span id="ouHighlight__16_22TO11_19">em diante</span><span id="noHighlight_0.6635935281245849">,</span><span id="noHighlight_0.7438692970514831"> </span><span id="ouHighlight__25_27TO22_23">os</span><span id="noHighlight_0.4355831475066668"> </span><span id="ouHighlight__29_35TO25_31">números</span><span id="noHighlight_0.8851799775263688"> </span><span id="ouHighlight__37_45TO33_40">exibidos</span><span id="noHighlight_0.2014015796894374"> </span><span id="ouHighlight__47_50TO42_45">aqui</span><span id="noHighlight_0.5104628333754239"> </span><span id="ouHighlight__52_54TO47_49">são</span><span id="noHighlight_0.6550056061906334"> </span><span id="ouHighlight__65_72TO51_59">editáveis</span><span id="noHighlight_0.7464375519364586"> </span><span id="ouHighlight__56_63TO61_71">diretamente</span><span id="noHighlight_0.1684100599266043">,</span><span id="noHighlight_0.6375848196470268"> </span><span id="ouHighlight__75_76TO74_78">assim</span><span id="noHighlight_0.6432344737164473"> </span><span id="ouHighlight__78_80TO80_83">você</span><span id="noHighlight_0.21115858116274067"> </span><span id="ouHighlight__82_84TO85_88">pode</span><span id="noHighlight_0.5714140381614318"> </span><span id="ouHighlight__86_91TO90_99">facilmente</span><span id="noHighlight_0.5590636878226835"> </span><span id="ouHighlight__93_98TO101_107">definir</span><span id="noHighlight_0.38528303753948656"> </span><span id="ouHighlight__107_116TO109_117">dimensões</span><span id="noHighlight_0.19108673596595993"> </span><span id="ouHighlight__100_105TO119_132">personalizadas</span><span id="noHighlight_0.8081630914805079">.</span></div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><strong>Portrait/Landscape</strong> (Retrato/Paisagem)</td>
+   <td>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+    <div><span id="ouHighlight__0_5TO0_6">Alterne</span><span id="noHighlight_0.6652050815279689"> </span><span id="ouHighlight__7_9TO8_8">a</span><span id="noHighlight_0.7179117059359613"> </span><span id="ouHighlight__11_16TO10_13">tela</span><span id="noHighlight_0.33497462507156583"> </span><span id="ouHighlight__18_24TO15_19">entre</span><span id="noHighlight_0.34310517333772883"> </span><span id="ouHighlight__49_52TO21_32">visualização</span><span id="noHighlight_0.7396021998958475"> </span><span id="ouHighlight__26_33TO34_40">retrato</span><span id="noHighlight_0.9722827215437846"> </span><span id="ouHighlight__35_37TO42_42">e</span><span id="noHighlight_0.18911941048212988"> </span><span id="ouHighlight__39_47TO44_51">paisagem</span><span id="noHighlight_0.9689423906659975">.</span></div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>Simulate touch events</strong> (Simular eventos de toque)</p>
+   </td>
+   <td>
+    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+    <div><span class="highlight" id="ouHighlight__0_13TO0_15">Ativar/desativar</span><span id="noHighlight_0.7314583975835754"> </span><span id="ouHighlight__15_19TO17_21">simulação de eventos de toque</span><span id="noHighlight_0.29946720516432024">: </span><span id="ouHighlight__39_43TO41_48">enquanto</span><span id="noHighlight_0.3003017304493243"> a </span><span id="ouHighlight__57_66TO52_60">simulação</span><span id="noHighlight_0.2539792794784823"> de </span><span id="ouHighlight__51_55TO65_71">eventos</span><span id="noHighlight_0.4752854432379472"> de </span><span id="ouHighlight__45_49TO76_80">toque</span><span id="noHighlight_0.9606273334036314"> </span><span id="ouHighlight__68_69TO82_85">está</span><span id="noHighlight_0.17017646489179272"> </span><span id="ouHighlight__71_77TO87_96">habilitada</span><span id="noHighlight_0.6582178888414498">,</span><span id="noHighlight_0.06081356504641222"> </span><span id="ouHighlight__86_91TO99_105">eventos</span><span id="noHighlight_0.3352930944939859"> de </span><span id="ouHighlight__80_84TO110_114">mouse</span><span id="noHighlight_0.8437336217817044"> </span><span id="ouHighlight__93_95TO116_118">são</span><span id="noHighlight_0.4506537870215023"> </span><span id="ouHighlight__97_106TO120_129">traduzidos</span><span id="noHighlight_0.43558949167422756"> </span><span id="ouHighlight__108_111TO131_132">em</span><span id="noHighlight_0.9974495078330906"> </span><a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events"><span id="ouHighlight__119_124TO134_140">eventos</span><span id="noHighlight_0.37276704321010756"> de </span><span id="ouHighlight__113_117TO145_149">toque</span></a><span id="noHighlight_0.4414145507777094">.</span></div>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>Take screenshot</strong> (Captura de Tela)</p>
+   </td>
+   <td><span id="result_box" lang="pt"><span class="hps">Tira uma captura de tela</span> <span class="hps">da área de conteúdo</span><span>.</span></span>
+    <div><span id="ouHighlight__0_10TO0_10">Capturas de Tela </span><span id="ouHighlight__12_14TO12_14">são</span><span id="noHighlight_0.7756256980434241"> </span><span id="ouHighlight__16_20TO16_21">salvas</span><span id="noHighlight_0.7416410116405266"> </span><span id="ouHighlight__22_23TO23_26">para</span><span id="noHighlight_0.3153622479901257"> o </span><span id="ouHighlight__52_59TO30_34">local</span><span id="noHighlight_0.5546600825899267"> de </span><span id="ouHighlight__43_50TO39_46">download</span><span id="noHighlight_0.276958216264765"> </span><span id="ouHighlight__35_41TO48_53">padrão</span><span id="noHighlight_0.9675183455517207"> </span><span id="ouHighlight__25_33TO55_64">do Firefox</span><span id="noHighlight_0.9916051206430999">.</span></div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/pt-br/tools/network_monitor/index.html b/files/pt-br/tools/network_monitor/index.html
new file mode 100644
index 0000000000..04db23ec53
--- /dev/null
+++ b/files/pt-br/tools/network_monitor/index.html
@@ -0,0 +1,192 @@
+---
+title: Monitor de Rede
+slug: Tools/Network_Monitor
+tags:
+  - Depuração
+  - Desenvolvimento
+  - Ferramentas
+  - Guía
+  - Redes
+translation_of: Tools/Network_Monitor
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>O Monitor de Rede mostra todas as solicitações realizadas por uma página, o quanto a solicitação demorou, entre outros detalhes. Ao ir no menu "Ferramentas do Desenvolvedor Web" e clicar em "Rede" o monitor irá aparecer na parte de baixo da janela.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7405/nm-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Lista_de_Requisições_de_Rede">Lista de Requisições de Rede</h2>
+
+<p>O Monitor de Rede irá mostrar as solicitações em uma tabela ao carregar uma página, cada requisição aparece em uma linha diferente:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7419/nm-row.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>A cada atualização, o monitor é limpo antes de mostrar as novas solicitções. Para modificar essa opção marque "Ativar logs persistentes" na Caixxa de Ferramentas.</p>
+
+<h3 id="Campos_solicitados">Campos solicitados</h3>
+
+<p>Cada linha mostra:</p>
+
+<ul>
+ <li><strong>√</strong>: o status retornado pelo HTTP. A identificação é feita através de diferentes cores: verde para sucesso (2XX codes), laranja para redirecionamento (3XX), ou vermelho para errors (4XX and 5XX). A partir do Firefox 30, o código correspondente é mostrado logo após.</li>
+ <li><strong>Método</strong>: método de requisição HTTP</li>
+ <li><strong>Arquivo</strong>: nome do arquivo solicitado.</li>
+ <li><strong>Servidor</strong>: dominio do arquivo solicitado.</li>
+ <li><strong>Tipo</strong>: <code>Content-type</code> da resposta;</li>
+ <li><strong>Tamanho</strong>: tamanho da resposta, depois de descomprimida.</li>
+</ul>
+
+<p>Ao clicar no nome de uma das colunas, as requisições são organizadas pela coluna selecionada.</p>
+
+<p>A partir do Firefox 30, se o arquivo for uma imagem, a linha mostrá uma miniatura da imagem, e ao por o apontador sobre o nome poderá visualizá-la um pouco maior:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7403/nm-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Linha_de_Tempo">Linha de Tempo</h3>
+
+<p> A lista de requisição também mostra a linha de tempo para diferentes partes de cada requisição. Cada linha de tempo é dada pela posição horizontal em cada linha relativa a outra requisição de rede, entaão você pode ver o tempo total levado para carregar a página. Para mais detalhes sobre a cor do código usado aqui, veja a sessão <a href="/pt-BR/docs/Tools/Network_Monitor#Tempos">Tempos</a>.</p>
+
+<h3 id="Filtrando_pelo_Tipo_de_Conteúdo">Filtrando pelo Tipo de Conteúdo</h3>
+
+<p>Na parte inferior da janela uma linha de botões lhe abilita a filtrar requisições pelo tipo de conteúdo da resposta:<img alt="" src="https://mdn.mozillademos.org/files/7395/nm-filter-by-type.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Na extrema direita há um botão chamado "Limpar": como você pode imaginar, ele permite limpar a lista de requisições de rede.</p>
+
+<h3 id="Menu_de_Contexto">Menu de Contexto</h3>
+
+<p>Clique-direito em uma linha da lista exibe um menu de contexto com as seguintes opções:</p>
+
+<ul>
+ <li>Abrir em nova aba</li>
+ <li>Copiar URL</li>
+ <li>Copiar como cURL (só do Firefox 31 em diante)</li>
+ <li>Copiar imagem como URI de dados (só para imagens)</li>
+ <li>Editar e reenviar</li>
+ <li>Iniciar <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Análise de Performance</a> para a página</li>
+</ul>
+
+<h4 id="Editar_e_Reenviar">Editar e Reenviar</h4>
+
+<p>Esta opção abre um editor e lhe abilita a editar o método, a URL e os parametros da requisição, editar os cabeçalhos, e reenviar a requisição.</p>
+
+<h4 id="Copiar_como_cURL">Copiar como cURL</h4>
+
+<div class="geckoVersionNote">
+<p>Isto é novo no Firefox 31.</p>
+</div>
+
+<p>Esta opção copia a requisição de rede para a área de transferência como um comando <a href="http://curl.haxx.se/">cURL</a>, de modo a você poder executá-lo em uma linha de comando. O comando pode incluir as seguintes opções:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>-X [METHOD]</code></td>
+   <td>Se o método não for GET ou POST</td>
+  </tr>
+  <tr>
+   <td><code>--data</code></td>
+   <td>Para parâmetros da requisição codificados para URL</td>
+  </tr>
+  <tr>
+   <td><code>--data-binary</code></td>
+   <td>Para parâmetros de requisição multipart</td>
+  </tr>
+  <tr>
+   <td><code>--http/VERSION</code></td>
+   <td>Se a versão HTTP não for 1.1</td>
+  </tr>
+  <tr>
+   <td><code>-I</code></td>
+   <td>Se o método for HEAD</td>
+  </tr>
+  <tr>
+   <td><code>-H</code></td>
+   <td>
+    <p>Um para cada cabeçalho de requisição.</p>
+
+    <p>Desde o Firefox 34, se o cabeçalho "Accept-Encoding" está presente, o comando cURL incluirá <code>--compressed</code> em vez de <code>-H "Accept-Encoding: gzip, deflate"</code>. Isto significa que a resposta será automaticamente descomprimida.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Detalhes_de_Requisições_de_Rede">Detalhes de Requisições de Rede</h2>
+
+<p>O clique em uma linha exibe um novo painel à direita do monitor de rede, que dá informações mais detalhadas sobre a requisição.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7393/nm-details-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">As abas no topo deste painel lhe permitem alternar entre cinco páginas diferentes:</p>
+
+<ul>
+ <li><strong>Headers</strong></li>
+ <li><strong>Cookies</strong></li>
+ <li><strong>Params</strong></li>
+ <li><strong>Response</strong></li>
+ <li><strong>Timings</strong></li>
+</ul>
+
+<p>Do Firefox 30 em diante, há uma sexta página que aparece se o tipo de conteúdo é HTML, a página <strong>Preview</strong>.</p>
+
+<p>Um clique no ícone à esquerda das abas fecha o painel e retorna à visão de lista.</p>
+
+<h3 id="Headers">Headers</h3>
+
+<p>Esta aba lista informações básicas sobre a requisição incluindo URL e código de status, e também os cabeçalhos HTTP de requisição e resposta que foram enviados:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7397/nm-headers.png" style="display: block; margin-left: auto; margin-right: auto;">Você pode filtrar os cabeçalhos que são exibidos:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7399/nm-headers-filtered.png" style="display: block; height: 221px; margin-left: auto; margin-right: auto; width: 684px;"></p>
+
+<h3 id="Cookies">Cookies</h3>
+
+<p>Esta aba lista detalhes completos de qualquer cookie enviado com a requisição ou a resposta:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7391/nm-cookies.png" style="display: block; margin-left: auto; margin-right: auto;">Asim como os Headers, você pode filtrar a lista de cookies exibidos.</p>
+
+<h3 id="Params">Params</h3>
+
+<p>Esta aba exibe os parâmetros de GET e os dados de POST de uma requisição:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7407/nm-params.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Response">Response</h3>
+
+<p>O conteúdo completo da resposta. Se a resposta é HTML, JS, ou CSS, ela será mostrada como texto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7413/nm-response-html.png" style="display: block; margin-left: auto; margin-right: auto;">Se a resposta for JSON, será exibida como um objeto inspecionável:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7421/nm-response-json.png" style="display: block; margin-left: auto; margin-right: auto;">Se a resposta é uma imagem, a aba exibe uma amostra:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7415/nm-response-image.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Timings">Timings</h3>
+
+<p>A aba Timings tem uma visão mais detalhada, anotada, da barra da linha do tempo para a requisição, mostrando a divisão do tempo total entre os vários estágios:<img alt="" src="https://mdn.mozillademos.org/files/7417/nm-timings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Preview">Preview</h3>
+
+<div class="geckoVersionNote">
+<p>Este recurso é novo no Firefox 30.</p>
+</div>
+
+<p>Do Firefox 30 em diante, se o tipo de arquivo é HTML uma sexta aba aparece, rotulada de "Preview". Ela renderiza o HTML:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7401/nm-html-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Análise_de_Desempenho">Análise de Desempenho</h2>
+
+<div class="geckoVersionNote">
+<p>A ferramenta de análise de desempenho é nova no Firefox 29.</p>
+</div>
+
+<p>Do Firefox 29 em diante, o Monitor de Rede inclui uma ferramenta de análise de desempenho, para ajudar a lhe mostrar quanto tempo o navegador levou para descarregar as diferentes partes de seu sítio.<br>
+ <br>
+ Para executar a ferramenta de análise de desempenho clique no ícone de cronômetro na barra de ferramentas, no rodapé do Monitor de Rede:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7411/nm-performance-button.png" style="display: block; margin-left: auto; margin-right: auto;">(Alternativamente, se você acabou de abrir o Monitor de Rede e ele ainda não está populado com a lista de requisições, você terá o ícone de cronômetro na janela principal.)</p>
+
+<p>O Monitor de Rede, então, carrega o sítio duas vezes: uma com o cache do navegador vazio e outra com o cache já preparado. Isto simula a primeira visita de um usuário ao seu sítio, e as visitas subsequentes. Ele exibe os resultados de cada execução lado a lado ou verticalmente, se a janela for estreita:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7409/nm-performance.png" style="display: block; margin-left: auto; margin-right: auto;">Os resultados de cada execução são sumarizados em uma tabela e em um gráfico de pizza. A tabela agrupa os recursos por tipo, e mostra o tamanho total de cada recurso e o tempo total que ele levou para carregá-los. O gráfico de pizza mostra o tamanho relativo de cada tipo de recurso.</p>
+
+<p>Para voltar à lista de requisições de rede do Monitor de Rede clique no botão "Back" à esquerda.</p>
+
+<p>Clicar em uma fatia da pizza leva você ao Monitor de Rede daquela execução, com um filtro automaticamente aplicado para ver <a href="/pt-BR/docs/Tools/Network_Monitor#Filtering_by_content_type">só aquele tipo de recurso</a>.</p>
diff --git a/files/pt-br/tools/notas_de_lancamento/index.html b/files/pt-br/tools/notas_de_lancamento/index.html
new file mode 100644
index 0000000000..fcfcc58fb3
--- /dev/null
+++ b/files/pt-br/tools/notas_de_lancamento/index.html
@@ -0,0 +1,427 @@
+---
+title: Notas de lançamento
+slug: Tools/Notas_de_lancamento
+tags:
+  - Notas de lançamento
+translation_of: Mozilla/Firefox/Releases
+---
+<div>{{ToolsSidebar}}</div><h2 id="Firefox_53">Firefox 53</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Veja escuta de eventos React no Inspector.</a></li>
+ <li><a href="/en-US/docs/Tools/Taking_screenshots#Copying_screenshots_to_the_clipboard">Copie capturas de tela da área de transferência.</a></li>
+ <li><a href="/en-US/docs/Tools/JSON_viewer">Visualizador de JSON é habilitado no Firefox Beta e versões públicas.</a></li>
+</ul>
+
+<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2017-01-23%20&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2016-11-14&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20DOM&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Design%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Shared%20Components&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=13578264">Todas ferramentas de desenvolvimento tiveram os erros corrigidos entre os Firefox 52 e 53</a>.</p>
+
+<h2 id="Firefox_52">Firefox 52</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Responsive_Design_Mode">Completely revamped Responsive Design Mode, including UA selection and network throttling.</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger">New JavaScript Debugger, including a redesigned UI.</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">The Animation Inspector now displays timing functions.</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">The Page Inspector now includes a CSS grid highlighter.</a></li>
+ <li><a href="/en-US/docs/Tools/about:debugging#Service_worker_state">about:debugging now shows service worker state.</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#element_rule">The Page Inspector includes an easy way to highlight the selected element.</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Whitespace-only_text_nodes">The Page Inspector displays whitespace-only text nodes.</a></li>
+</ul>
+
+<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2016-11-14&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2016-09-19&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20DOM&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Design%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Shared%20Components&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=13333174">All devtools bugs fixed between Firefox 51 and Firefox 52</a>.</p>
+
+<h2 id="Firefox_51">Firefox 51</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Timings">Network Monitor now shows a "Blocked" state for network requests.</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263768&amp;resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2016-09-19&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2016-08-01&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20DOM&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Design%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Shared%20Components&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox">All devtools bugs fixed between Firefox 50 and Firefox 51</a>.</p>
+
+<h2 id="Firefox_50">Firefox 50</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Source_maps">The Web Console now understands source maps.</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector#IndexedDB">The Storage Inspector now lets you delete items from IndexedDB object stores.</a></li>
+ <li><a href="/en-US/docs/Tools/Memory">The Memory tool is enabled by default.</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">The Box model view is moved into the Computed view.</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">The Web Console now displays stack traces for XHR or Fetch() network requests.</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263766&amp;chfield=resolution&amp;chfieldfrom=2016-06-06&amp;chfieldvalue=FIXED&amp;resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2016-08-01&amp;query_format=advanced&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20DOM&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Design%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Shared%20Components&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox">All devtools bugs fixed between Firefox 49 and Firefox 50</a>.</p>
+
+<h2 id="Firefox_49">Firefox 49</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#JS">JavaScript errors logged in the console now link to MDN help pages.</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Further_information_about_animation_compositing">The Animation Inspector now shows performance information.</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_context_menu">The Inspector's context menu has been reorganized.</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Cause_column">The Network Monitor now shows the cause of each network request.</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector#IndexedDB">The Storage Inspector lets you delete IndexedDB databases.</a></li>
+ <li><a href="/en-US/docs/Tools/about:debugging#Tabs">about:debugging now has a new Tabs page, to debug any open tab.</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263762&amp;chfield=resolution&amp;chfieldfrom=2016-04-25&amp;chfieldvalue=FIXED&amp;resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2016-06-06&amp;query_format=advanced&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20DOM&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Design%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Shared%20Components&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox">All devtools bugs fixed between Firefox 48 and Firefox 49</a>.</p>
+
+<h2 id="Firefox_48">Firefox 48</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector#Editing_storage_items">Edit stored items in the Storage Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Memory/Tree_Map_view">Memory tool treemap view</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements by dragging them around the page</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">See HTTP request details in the Web Console </a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Animation inspector updates for Web Animations API</a></li>
+ <li><a href="/en-US/docs/Tools/Settings#Choose_DevTools_theme">Firebug theme</a></li>
+ <li><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263745&amp;resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2016-04-25&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2016-03-07&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20DOM&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Design%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Shared%20Components&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox">All devtools bugs fixed between Firefox 47 and Firefox 48</a>.</p>
+
+<h2 id="Firefox_47">Firefox 47</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/about:debugging#Workers">Debug registered Service Workers</a></li>
+ <li><a href="/en-US/docs/Tools/Storage_Inspector#Cache_Storage">Cache storage is now visible in the Storage Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">Dominators view shows retaining paths</a></li>
+ <li><a href="/en-US/docs/Tools/Browser_Toolbox#Debugging_popups">Prevent panels from hiding automatically, to aid browser and add-on debugging</a></li>
+ <li><a href="/en-US/docs/Tools/3D_View">3D view (Tilt) has been removed</a></li>
+ <li><a href="/en-US/docs/Tools/Responsive_Design_Mode#Responsive_Design_Mode_controls">Set a custom User Agent string in Responsive Design Mode</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">Font Inspector is now disabled by default</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Entering_expressions">Console detects incomplete input and switches to multiline mode</a></li>
+ <li><a href="/en-US/docs/Tools/Contributing/Contribute_on_nightly">Devtools Reload lets you hack the devtools without rebuilding Firefox</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263761&amp;chfield=resolution&amp;chfieldfrom=2016-01-25&amp;chfieldvalue=FIXED&amp;resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2016-03-07&amp;query_format=advanced&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20DOM&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Design%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Shared%20Components&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox">All devtools bugs fixed between Firefox 46 and Firefox 47</a>.</p>
+
+<h2 id="Firefox_46">Firefox 46</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Memory/Dominators_view">Dominators view in the Memory tool</a></li>
+ <li><a href="/en-US/docs/Tools/Performance/Allocations">Allocations view in the Performance tool</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">One click to apply <code>@media</code> rule conditions in the Style Editor</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263754&amp;resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2016-01-25&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2015-12-14&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20DOM&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Design%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Shared%20Components&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox">All devtools bugs fixed between Firefox 45 and Firefox 46</a>.</p>
+
+<h2 id="Firefox_45">Firefox 45</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">Full-text search in the Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Memory#Diffing_heap_snapshots">Heap snapshot diffing in the Memory tool</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Timeline">DomContentLoaded and load events shown in the Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animation inspector improvements</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;chfield=resolution&amp;chfieldfrom=2015-10-29&amp;chfieldto=2015-12-14&amp;chfieldvalue=FIXED&amp;classification=Client%20Software&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20about%3Adebugging&amp;component=Developer%20Tools%3A%20Animation%20Inspector&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Font%20Inspector&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20JSON%20Viewer&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;resolution=FIXED&amp;list_id=12753878">All devtools bugs fixed between Firefox 44 and Firefox 45</a>.</p>
+
+<h2 id="Firefox_44">Firefox 44</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Memory">Memory tool</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animation inspector improvements</a></li>
+ <li><a href="/en-US/docs/Tools/Performance/Waterfall#Markers">New Waterfall markers: DomContentLoaded, load, worker messages</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2015-11-03&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2015-09-19&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=12582678">All devtools bugs fixed between Firefox 43 and Firefox 44</a>.</p>
+
+<h2 id="Firefox_43">Firefox 43</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_43">New animation inspector UI</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Server">Server logging in the Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">Quickly find the rule that overrode a CSS declaration</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">"Use in Console" context menu item in Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Strict_search">"Strict" option for filtering in the Rules view</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Network">Network entries in the Console now link to the Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/WebIDE">New sidebar UI for WebIDE</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2015-09-19&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2015-08-10&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=12582678">All devtools bugs fixed between Firefox 42 and Firefox 43</a>.</p>
+
+<h2 id="Firefox_42">Firefox 42</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Debugging Firefox for Android over Wifi</a></li>
+ <li><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Configuring_Simulators">Firefox OS Simulator configuration in WebIDE</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters#Saving_filter_presets">CSS filter presets</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2015-08-10&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2015-06-29&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=12478437">All devtools bugs fixed between Firefox 41 and Firefox 42</a>.</p>
+
+<h2 id="Firefox_41">Firefox 41</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">Take a screenshot of a DOM node</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#CopySave_All_As_HAR">Copy as HAR/save as HAR</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Add_rules">"Add Rule" button in the Rules view</a></li>
+ <li><a href="/en-US/docs/Tools/View_source">View source in a tab</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Copy_rules">More options to copy CSS rules</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">Copy image as data: URI in the Rules view</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2015-06-29&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2015-05-11&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=12283503">All devtools bugs fixed between Firefox 40 and Firefox 41</a>. Note that many of these bugs, especially those relating to the performance tools, were uplifted to Firefox 40.</p>
+
+<h2 id="Firefox_40">Firefox 40</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_40">Improvements to the Animations view</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">Get help from MDN for CSS property syntax</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit filters in the Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#console_API_messages">Web Console now shows messages from workers</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_URL">Filter requests by URL in the Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Context_menu">Many new context menu options in the Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Network_request_fields">Show when network resources are fetched from the browser cache</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Filtering_rules">Filter rules in the Page Inspector</a></li>
+</ul>
+
+<p>More:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Break at debugger; statements in unnamed eval sources</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Copy URL/Open in New Tab context menu items for Debugger source list pane</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Log_messages">console.dirxml support in the Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor#The_style_sheet_pane">Style Editor: "Open Link In New Tab" item added to stylesheet list</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">Inspector selector search now includes class/id results even without css prefix</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">Tooltips in box-model view saying which CSS rule caused the value</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Switch between color unit format in the Inspector using Shift+click</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">Implement "Scroll Into View" menu item for the Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">Linkify url/id/resource attributes in the Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Network_request_fields">IP address tooltip in the Network Monitor</a></li>
+</ul>
+
+<p>Everything: <a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2015-05-11&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2015-03-31&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=12283503">all devtools bugs fixed between Firefox 39 and Firefox 40</a>.</p>
+
+<h2 id="Firefox_39">Firefox 39</h2>
+
+<p>Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">WebIDE now supports debugging Firefox OS devices over Wi-Fi</a></li>
+ <li><a href="/en-US/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">WebIDE now supports Cordova projects</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_39">Animations view: rewind, fast-forward, and jump to a specific time</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_39">The cubic Bézier curve editor now includes 31 presets</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Drag_and_drop">Drag and drop elements in the Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Command_history">Web console command history is now persisted across sessions</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Helper_commands">$_ console command to print the last result evaluated</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#Firefox_39">Better box model highlighting for inline elements</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;query_based_on=devtools_resolved_week&amp;chfieldto=2015-03-31&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2015-02-22&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;bug_status=CLOSED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;known_name=devtools_resolved_week&amp;list_id=12157026">All devtools bugs fixed between Firefox 38 and Firefox 39</a>.</p>
+
+<h2 id="Firefox_38">Firefox 38</h2>
+
+<p>Destaques:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Audio_Editor#Bypassing_nodes">Bypass audio nodes in Web Audio Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Helper_commands">"copy" command in Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#XHR">Highlight and filter XmlHttpRequests in Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">See optimized-out variables in the Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Security">See security warnings in the Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Network_request_fields">See transferred sizes in the Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animations_view">Play/pause all animations in the page</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2015-02-23&amp;query_format=advanced&amp;chfield=resolution&amp;chfieldfrom=2015-01-12&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20Timeline&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=12076303">All devtools bugs fixed between Firefox 37 and Firefox 38</a>.</p>
+
+<h2 id="Firefox_37">Firefox 37</h2>
+
+<p>Destaques:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Security">Security panel in the Network Monitor</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animations panel in the Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Running_a_custom_build_step">Support for running a custom build step in WebIDE</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2015-01-12&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2014-11-28&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20Timeline&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=11892733">All devtools bugs fixed between Firefox 36 and Firefox 37</a>.</p>
+
+<h2 id="Firefox_36">Firefox 36</h2>
+
+<p>Destaques:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">eval sources now appear in the Debugger</a></li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Simpler process for connecting to Firefox for Android</a></li>
+ <li>Box Model Highlighter works on remote targets</li>
+ <li><a href="/en-US/docs/Tools/Performance#Inverting_the_call_tree">"Invert the call tree" option in the Profiler </a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Type-specific_rich_output">Inspect DOM promises in the console</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">Extra "Paste" commands in the Inspector</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2014-11-28&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2014-10-13&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20Timeline&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;product=Firefox&amp;list_id=11736454">All devtools bugs fixed between Firefox 35 and Firefox 36</a>.</p>
+
+<h2 id="Firefox_35">Firefox 35</h2>
+
+<p>Destaques:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#.3A.3Abefore_and_.3A.3Aafter">See ::before and ::after pseudo elements in the Page Inspector</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_map_support">CSS source maps are now enabled by default</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Element_popup_menu_2">"Show DOM Properties" from the Page Inspector</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;chfieldto=2014-10-13&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2014-09-02&amp;chfieldvalue=FIXED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20Timeline&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;component=Simulator&amp;product=Firefox&amp;product=Firefox%20OS&amp;list_id=11184176">All devtools bugs fixed between Firefox 34 and Firefox 35</a>.</p>
+
+<h2 id="Firefox_34">Firefox 34</h2>
+
+<p>Destaques:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Storage Inspector: a new tool enabling you to view data stored by web pages</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Performance tool: revamped Profiler UI and frame rate timeline</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/tools/Working_with_iframes">Frame switching: point the developer tools at a specific iframe in the page</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.table">console.table support</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Examining_event_listeners">jQuery events are visible in the Page Inspector</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;chfieldto=2014-09-02&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2014-07-21&amp;chfieldvalue=FIXED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Storage%20Inspector&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20Timeline&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;component=Developer%20Tools%3A%20WebIDE&amp;component=Simulator&amp;product=Firefox&amp;product=Firefox%20OS&amp;list_id=11184176">All devtools bugs fixed between Firefox 33 and Firefox 34</a>.</p>
+
+<h2 id="Firefox_33">Firefox 33</h2>
+
+<p>Destaques:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE">WebIDE</a>: a new environment for developing and debugging web apps</li>
+ <li>You can edit animation <a href="https://developer.mozilla.org/docs/Tools/Page_Inspector#Editing_.40keyframes">@keyframes</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Editing_cubic_B.C3.A9zier_curves">timing functions</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Examining_event_listeners">Event listeners are now visible </a>in the Inspector</li>
+ <li>There's a<a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_media_sidebar"> sidebar listing @media rules </a>in the Style Editor</li>
+ <li>You can <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Adding_rules">add new CSS rules</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Editing_rules">edit selectors</a> in the Inspector</li>
+ <li>There are three <a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands">new developer toolbar commands</a>: folder, highlight, and inject</li>
+</ul>
+
+<p>Mais detalhes:</p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Tools/Tools_Toolbox#Advanced_settings">Disable Cache setting</a> now persists when the devtools are reopened</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#transform_visualisation">transform visualization is now shown in the page</a>, not a tooltip</li>
+ <li><a href="/en-US/docs/Tools/Tools_Toolbox#Editor_Preferences">Preferences for the source editor</a> are exposed in the Settings page</li>
+ <li><a href="/en-US/docs/Tools/Responsive_Design_View#select-size">The viewport size is directly editable</a> in Responsive Design View</li>
+ <li>The Debugger now <a href="/en-US/docs/Tools/Debugger#Debugger_settings">automatically black boxes source files with a "min.js" extension</a></li>
+</ul>
+
+<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2014-07-21&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2014-06-09&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20App%20Manager&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;product=Firefox">All devtools bugs fixed between Firefox 32 and Firefox 33</a>.</p>
+
+<h2 id="Firefox_32">Firefox 32</h2>
+
+<p>Destaques:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></li>
+ <li><a href="/en-US/docs/Tools/Scratchpad#Code_completion_and_inline_documentation">Code completion and inline documentation in Scratchpad</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#Rules_view">User agent styles in the Inspector's Rules view</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#Firefox_32_onwards_2">Element picker button has moved</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#Firefox_32_onwards">Node dimensions added to the Inspector's infobar</a></li>
+ <li><a href="/en-US/docs/Tools/Tools_Toolbox#Extra_tools">Full page screenshot button added</a></li>
+</ul>
+
+<p>Mais detalhes:</p>
+
+<ul>
+ <li>HiDPI images added to the tools</li>
+ <li>Nodes that have <code>display:none</code> are shown differently in the Inspector</li>
+</ul>
+
+<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2014-06-09&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2014-04-28&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20App%20Manager&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;product=Firefox">All devtools bugs fixed between Firefox 31 and Firefox 32</a>.</p>
+
+<h2 id="Firefox_31">Firefox 31</h2>
+
+<p>Destaques:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Eyedropper">Eyedropper tool to select colors in web pages</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Error_messages">full stack traces for console error messages</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Box_model_view">editable Box Model View</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages">%c formatting to style console messages</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Copy_as_cURL">"copy as cURL" command in Network Monitor</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/tools/Keyboard_shortcuts#Source_editor">Sublime Text keybindings in the source editor</a></li>
+</ul>
+
+<p>Mais detalhes:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Network_request_list">Option to make Network Monitor logs persistent</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#JavaScript_errors_and_warnings">JavaScript warnings on by default in the Web Console</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#HTML_pane_2">Alt+click to expand all descendants of a node</a></li>
+</ul>
+
+<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2014-04-28&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2014-03-17&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20App%20Manager&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;product=Firefox&amp;list_id=10022921">All devtools bugs fixed between Firefox 30 and Firefox 31</a>.</p>
+
+<h2 id="Firefox_30">Firefox 30</h2>
+
+<p>Destaques:</p>
+
+<ul>
+ <li><a href="https://www.youtube.com/watch?v=y2LcsxE2pR0">Box model highlighting in the Page Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Working_with_iframes">Web Console support for executing JS in frames</a></li>
+ <li>Web Console display improvements: code highlighting, <a href="/en-US/docs/Tools/Web_Console#Highlighting_and_inspecting_nodes">node highlighting and inspection</a></li>
+ <li>Network Monitor theme improvements, <a href="/en-US/docs/Tools/Network_Monitor#Network_request_fields">image thumbnails, image preview</a>, <a href="/en-US/docs/Tools/Network_Monitor#Preview">HTML preview</a></li>
+ <li><a href="/en-US/docs/Tools/Browser_Console#Browser_Console_command_line">Browser Console input must now be enabled in Settings</a></li>
+ <li><a href="/en-US/docs/Tools_Toolbox#Available_Toolbox_Buttons">Icons for Scratchpad and other tools now hidden by default</a></li>
+</ul>
+
+<p>Mais detalhes:</p>
+
+<ul>
+ <li>Support for <a href="/en-US/docs/Web/API/console.count">console.count()</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts">New shortcut key to focus on web console command line</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#font-family_tooltip">Font family tooltip in the Inspector</a></li>
+ <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings#Developer_HUD">Firefox OS HUD</a> features: memory tracking and jank monitor</li>
+</ul>
+
+<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&amp;classification=Client%20Software&amp;chfieldto=2014-03-17&amp;chfield=resolution&amp;query_format=advanced&amp;chfieldfrom=2014-02-03&amp;chfieldvalue=FIXED&amp;bug_status=RESOLVED&amp;bug_status=VERIFIED&amp;component=Developer%20Tools&amp;component=Developer%20Tools%3A%203D%20View&amp;component=Developer%20Tools%3A%20App%20Manager&amp;component=Developer%20Tools%3A%20Canvas%20Debugger&amp;component=Developer%20Tools%3A%20Console&amp;component=Developer%20Tools%3A%20Debugger&amp;component=Developer%20Tools%3A%20Framework&amp;component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&amp;component=Developer%20Tools%3A%20Inspector&amp;component=Developer%20Tools%3A%20Memory&amp;component=Developer%20Tools%3A%20Netmonitor&amp;component=Developer%20Tools%3A%20Object%20Inspector&amp;component=Developer%20Tools%3A%20Profiler&amp;component=Developer%20Tools%3A%20Responsive%20Mode&amp;component=Developer%20Tools%3A%20Scratchpad&amp;component=Developer%20Tools%3A%20Source%20Editor&amp;component=Developer%20Tools%3A%20Style%20Editor&amp;component=Developer%20Tools%3A%20User%20Stories&amp;component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&amp;product=Firefox&amp;list_id=9755315">All devtools bugs fixed between Firefox 29 and Firefox 30</a>.</p>
+
+<h2 id="Firefox_29">Firefox 29</h2>
+
+<p><a href="https://hacks.mozilla.org/2014/02/css-source-map-support-network-performance-analysis-more-firefox-developer-tools-episode-29/" title="http://www.mozilla.org/en-US/firefox/aurora/">Firefox 29 Hacks post</a>. Highlights:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools_Toolbox#Choose_DevTools_theme">Theme improvements</a>, including major updates to the light theme</li>
+ <li><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Monitor performance analysis tool</a></li>
+ <li><a href="/en-US/docs/Tools/Style_Editor#Source_map_support">CSS source maps</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#Selecting_elements">Changes in the way node selection works in the Inspector</a></li>
+ <li><a href="/en-US/docs/Tools/Debugger#Call_stack_pane">Classic call stack</a> for the Debugger, and added the ability to <a href="/en-US/docs/Tools/Debugger#Highlight_and_inspect_DOM_nodes">highlight and inspect nodes</a></li>
+ <li><a href="/en-US/docs/Tools/Using_the_Source_Editor#See_also">Emacs and Vim keybindings in the source editor</a></li>
+</ul>
+
+<h2 id="Firefox_28">Firefox 28</h2>
+
+<p><a href="https://hacks.mozilla.org/2013/12/split-console-pretty-print-minified-js-and-more-firefox-developer-tools-episode-28/" title="Aurora Hacks post">Firefox 28 Hacks post</a>. Highlights:</p>
+
+<ul>
+ <li>The App Manager has an integrated <a href="/en-US/Firefox_OS/Using_the_App_Manager#Manifest_editor">manifest editor</a></li>
+ <li>The <a href="/en-US/docs/Tools/Web_Console#The_split_console">Split Console</a> feature enables you to use the Web Console and another developer tool side by side</li>
+ <li><a href="/en-US/docs/Tools/Debugger#Pretty-print_a_minified_file">Pretty-print minified JavaScript</a> in the Debugger</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Color picker tooltip</a> in the Inspector</li>
+ <li><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a> for debugging platform or add-on code</li>
+</ul>
+
+<h2 id="Firefox_27">Firefox 27</h2>
+
+<p><a href="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/">Firefox 27 Hacks post</a>. Highlights:</p>
+
+<ul>
+ <li>The <a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a> lets you view and edit WebGL shaders</li>
+ <li>Instruct the debugger to <a href="/en-US/docs/Tools/Debugger#Break_on_a_DOM_event">break on DOM events</a> to which you're listening</li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector#Editing_HTML">Edit HTML in the Inspector</a></li>
+ <li>See color swatches and background images in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a></li>
+ <li>The Web Console now <a href="/en-US/docs/Tools/Web_Console#Reflow_events">logs reflow events</a></li>
+ <li>CodeMirror is now used as the source editor in many tools</li>
+</ul>
diff --git a/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html b/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html
new file mode 100644
index 0000000000..26eb590aae
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html
@@ -0,0 +1,32 @@
+---
+title: Edit CSS filters
+slug: Tools/Page_Inspector/How_to/Edit_CSS_filters
+tags:
+  - CSS
+  - DevTools
+  - Ferramentas
+  - Filtros
+  - Inspetor de Página
+translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters
+---
+<div>{{ToolsSidebar}}</div><p><code>propriedades do <a href="/en-US/docs/Web/CSS/filter">filter</a></code> nas <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> tem uma amostra de cinza e branco circular ao lado deles:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10873/filter-editor-swatch.png" style="display: block; height: 70px; margin-left: auto; margin-right: auto; width: 768px;"></p>
+
+<p>Clicando na amostra abre um editor de filtro:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11309/filter-editor.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 603px;">Você pode adicionar, remover e editar os filtros, e arrastá-los para alterar a ordem em que eles são aplicados:</p>
+
+<p>{{EmbedYouTube("yws01SEPTvg")}}</p>
+
+<h2 id="Salvar_predefinições_de_filtro">Salvar predefinições de filtro</h2>
+
+<p>Do Firefox 42 em diante, você também pode adicionar filtros para uma lista de predefinições:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11311/filter-editor-presets.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 603px;">Você pode salvar o filtro atual na lista de predefinições:</p>
+
+<p>{{EmbedYouTube("bHcfLlZE8T8")}}</p>
+
+<p>Em seguida, você pode aplicar filtros salvos para novos elementos:</p>
+
+<p>{{EmbedYouTube("PK85L7ztQto")}}</p>
diff --git a/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html
new file mode 100644
index 0000000000..b1c8414a5b
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html
@@ -0,0 +1,26 @@
+---
+title: Examinando Eventos de Escuta
+slug: Tools/Page_Inspector/How_to/Examinando_eventos_escuta
+translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners
+---
+<div>{{ToolsSidebar}}</div><p>No Firefox 33 você verá um ícone "ev" no <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a>, próximo a elementos que tem eventos de escuta como mostra a figura abaixo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9955/ev-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 571px;"></p>
+
+<p>Clicando no ícone, então você verá um popup listando todos eventos de escuta para este elemento:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9953/ev-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 628px;">Cada linha contém:</p>
+
+<ul>
+ <li>um botão pause: clique neste para ir ao evento de escuta no <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Debugger</a>, onde você poderá setar um <em>breakpoint in it</em></li>
+ <li>o nome do evento</li>
+ <li>o nome, o número da linha para o evento de escuta: clique neste para ver a função de escuta no popup</li>
+ <li>o label indicando se o evento bubbles</li>
+ <li>a label indicando o sistema que define o evento. O Firefox pode mostrar:
+  <ul>
+   <li>evento padrão - DOM</li>
+   <li><a class="external external-icon" href="http://api.jquery.com/category/events/">eventos jQuery</a></li>
+   <li><a href="https://facebook.github.io/react/docs/events.html">eventos React</a> (novo no Firefox 53)</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html
new file mode 100644
index 0000000000..5779b9403f
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html
@@ -0,0 +1,216 @@
+---
+title: Examinar e editar CSS
+slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+tags:
+  - Barra de Ferramentas
+  - CSS
+  - Estilos
+  - Ferramentas
+  - Firefox
+  - Guia(2)
+  - Inspetor
+  - Regras de CSS
+  - Utilidades
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+---
+<div>{{ToolsSidebar}}</div><p>Você pode examinar e editar CSS no <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">painel CSS</a> do Inspetor.</p>
+
+<h2 id="Analisar_regras_de_CSS">Analisar regras de CSS</h2>
+
+<p>A <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">visualização das listas de todas regras</a> que se aplicam a um elemento selecionado são ordenados das formas mais específica até a menos específica:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>As regras também podem ser visualizadas pelo <a href="/en-US/docs/Web/CSS/Cascade">estilo de agente-visualizador</a> (estilos que são aplicados pelo navegador), para ativar esta opção, a própria dever ser marcada <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">nas configurações da barra de ferramentas</a>. Note que essa configuração é independente da checkbox "Estilo do Navegador" na <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">aba de visualização de estilos "Computado"</a>.</p>
+
+<p>Do Firefox versão 44 em diante, todas as Regras do CSS são exibidas, including styles that are not supported or that are invalid. This can help you understand why certain styles are not being applied:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h3 id="Regra_de_exibição">Regra de exibição</h3>
+
+<p>Cada regra é exibida como uma folha de estilo, com uma lista de seletores seguida de uma lista de declarações <code>propriedade:valor;</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p>
+
+<ul>
+ <li><em>Destaque de elementos combinados</em>: junto ao seletor está um ícone de destino: clique nele para destacar todos os nós correspondentes da página a este seletor.</li>
+ <li><em>Declaração de sobrescrita</em>: declarações que são sobrescritas por regras posteriores são cruzadas. Veja <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">declarações de sobrescrita</a>.</li>
+ <li><em>Exibição em cascata</em>: junto a declarações de sobrescritas está uma magnifying glass: click this to see the cascade of rules containing the overridden property. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">overridden declarations</a>.</li>
+ <li><em>Enable/disable</em>: se você passar o mouse sobre a declaração, uma checkbox aparecerá proximo a ela: você pode usar para alterar a declaração entre on ou off.</li>
+ <li><em>Nome do arquivo e número da linha</em>: no lado direto exite um link com as regras. Veja o <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">link para o arquivo CSS</a>.</li>
+</ul>
+
+<p>User-agent styles são exibidos com o fundo diferente, e o link com nome do arquivo e o número da linha contendo o prefixo <code>(user agent)</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p>
+
+<h3 id="Regras_de_Filtragem">Regras de Filtragem</h3>
+
+<p>Iniciado no Firefox 40, ela é uma caixa que fica no topo da vizualização das regras "Filter Styles":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;">Enquanto você digita:</p>
+
+<ul>
+ <li>qualquer regra que não contenha o valor digitado são ocultadas</li>
+ <li>qualquer regra que estiver com o valor digitado serão destacadas</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;">Clique no "X" para fechar a caixa de pesquisa e remover os filtros.</p>
+
+<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p>
+
+<h4 id="Pesquisa_restrita">Pesquisa restrita</h4>
+
+<div class="geckoVersionNote">
+<p>Novo no Firefox 43</p>
+</div>
+
+<p>Por padrão, a caixa de pesquisa destaca todas as declaraçõs que contem qualquer parte do valor digitado. Por exemplo, pesquise por "color" irá destacar uma linha que tenha o valor digitado <code><a href="/en-US/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> e <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> bom como apenas <code><a href="/en-US/docs/Web/CSS/color">color</a></code>.:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>Iniciado no Firefox 43, se você incluir aspas simples na pesquisa , dessa forma: `color`, a pesquisa será restringida a ter somente o que está entre aspas simples:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h3 id="Mostrando_pseudo-elementos">Mostrando pseudo-elementos</h3>
+
+<p>Do Firefox 41, a regra é exibir os seguintes <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>, <span class="short_text" id="result_box" lang="pt"><span>se forem aplicados ao elemento selecionado</span></span>:</p>
+
+<p><code>::after<br>
+ ::backdrop</code> (Novo no Firefox 46)<br>
+ <code>::before<br>
+ ::first-letter<br>
+ ::first-line<br>
+ ::selection<br>
+ :-moz-color-swatch<br>
+ :-moz-number-spin-box<br>
+ :-moz-number-spin-down<br>
+ :-moz-number-spin-up<br>
+ :-moz-number-text<br>
+ :-moz-number-wrapper<br>
+ :-moz-placeholder<br>
+ :-moz-progress-bar<br>
+ :-moz-range-progress<br>
+ :-moz-range-thumb<br>
+ :-moz-range-track<br>
+ :-moz-selection</code></p>
+
+<p>Se o elemento selecionado for um pseudo-elemento aplicado a ele, ele mostrará antes do elemento selecionado porém oculto por um triângulo de divulgação:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p>
+
+<p>Clicando no triângulo irá mostrar os elementos:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<h3 id="Configuração_hover_active_focus">Configuração :hover, :active, :focus</h3>
+
+<p>Do Firefox 41, ele é um novo botão a direita da caixa de filtros:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">Clique no botão para ver três checkboxes, que você pode usar para {{cssxref(":hover")}}, {{cssxref(":active")}} e {{cssxref(":focus")}} pseudo-classes para o elemento selecionado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">Apesar desse botão ser novo no Firefox 41, o recurso já existia em versões anteriores do Firefox. Poderia - e ainda pode - ser acessado a partir do <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">na janela HTML</a>.</p>
+
+<div class="geckoVersionNote">
+<p>Novo no Firefox 43</p>
+</div>
+
+<p>Iniciado no Firefox 43, se você definir uma dessas pseudo-classes para um nó, <span id="result_box" lang="pt"><span>um ponto laranja aparecerá na exibição de marcação ao lado de todos os nós aos quais a</span></span> pseudo-class foi aplicada:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<h3 id="Link_para_arquivo_CSS">Link para arquivo CSS</h3>
+
+<p>No canto superio direito de cada regra, O nome do arquivo fonte e o número da linha é exibida como link: cliquenele para abrir no <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+
+<p>Do Firefox 41 você pode copiar o local do arquivo fonte: Clique com botão direito no link e selecione "Copar localização".</p>
+
+<p><span id="result_box" lang="pt"><span>O Inspetor entende os mapas de origem CSS</span></span>. <span id="result_box" lang="pt"> <span>Isso significa que se você estiver usando um pré-processador CSS que tenha suporte para mapas de origem e ativado o suporte ao mapa de origem nas</span></span> <a href="/en-US/docs/Tools_Toolbox#Style_Editor">configurações do editor de estilo</a>, <span id="result_box" lang="pt"><span>o link o levará para a fonte original e não para o CSS gerado</span></span> . <span id="result_box" lang="pt"> <span>Leia mais sobre o suporte ao mapa de origem CSS na</span></span> <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">documentação do edtiro de estilo</a>.</p>
+
+<h3 id="Obtendo_ajuda_para_propriedades_CSS">Obtendo ajuda para propriedades CSS</h3>
+
+<p>Iniciado no Firefox 40, <em><font face="Yu Gothic UI Semibold, sans-serif"><span style="font-style: normal;">se você clicar no nome da propriedade na visualização das regras, você pode abrir uma janela mostrando ajuda com aquela propriedade no MDN</span></font></em>:</p>
+
+<p>{{EmbedYouTube("ptVtAEOK7y4")}}</p>
+
+<p>Perceba que nesse momento, <span id="result_box" lang="pt"><span>isso não armazena em cache respostas de MDN, por isso requer conectividade de rede.</span></span></p>
+
+<h3 id="Substituir_declarações">Substituir declarações</h3>
+
+<p>Se uma declaração no CSS pode ser substituído por qualquer regra CSS com um peso maior, <span id="result_box" lang="pt"><span>Então a declaração é mostrada com uma linha através dele</span></span>.</p>
+
+<div class="geckoVersionNote">
+<p>Novo no Firefox 43</p>
+</div>
+
+<p>Iniciado no Firefox 43, d <span id="result_box" lang="pt"><span>eclarações de substituição têm uma lupa ao lado deles</span></span> . Clique na lupa para filtrar a regra <span id="result_box" lang="pt"><span>para mostrar apenas as regras que se aplicam ao notação atual que tentam definir a mesma propriedade</span></span>: <span id="result_box" lang="pt"><span>isto é, a cascata completa para a propriedade dada.</span></span></p>
+
+<p><span id="result_box" lang="pt"><span>Isso torna mais fácil ver qual regra está substituindo a declaração:</span></span></p>
+
+<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p>
+
+<h2 id="Examine_CSS_calculado">Examine CSS calculado</h2>
+
+<p>Para ver o calculo compelo to CSS par ao elemento selecionado, altere para a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Janela Computed</a>. This shows the calculated value that each CSS property has for the selected element:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p><em><font face="Yu Gothic UI Semibold, sans-serif"><span style="font-style: normal;">Clicando na flecha próximo ao nome da propriedade mostra a regra que define esse valor, j</span></font></em><em><font face="Yu Gothic UI Semibold, sans-serif"><span lang="pt-PT"><span style="font-style: normal;">untamente com um link para o nome do arquivo fonte e o número da linha</span></span></font></em>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p style="margin-bottom: 0cm; line-height: 100%;">Por padrão, exibe apenas valores expicitamente definidos pela página: para ver todos os valores clique na caixa "Browser styles"</p>
+
+<p style="margin-bottom: 0cm; line-height: 100%;"> </p>
+
+<p>Digitar na caixa de pesquisa executa uma filtragem automática na lista, portanto, por exemplo, se você quiser apenas ver as configurações relacionadas a fontes, você pode digitar “font” na caixa de pesquisa e somente propriedades com “font” no nome serão listados. Você também pode pesquisar para valores das propriedades: para encontrar a regra responsável por definir a fonte para “Lucida Grande”, digite isso na caixa de pesquisa.</p>
+
+<h2 id="Editar_regras">Editar regras</h2>
+
+<p>Se você clicar na declaração ou em algum seletor na visualização das regras, poderá editar e ver o resultado imediatamente. Para adicionar uma nova declaração para uma regra, clique na última linha da regra(a linha ocupada pela chave de fecho)</p>
+
+<p>Quando você começar a digitar o nome da propriedade, você verá uma lista de sugestões de auto-preenchimento. Pressione <kbd>Tab</kbd> para aceitar a sugestão destacada ou <kbd>Cima</kbd> e <kbd>Baixo</kbd> para mover entre as sugestões.</p>
+
+<p>Iniciado no Firefox 48, <span class="short_text" id="result_box" lang="pt"><span>a escolha padrão é a propriedade mais comum</span></span> <span class="short_text" id="result_box" lang="pt"><span>que começa com as letras que você digitou</span></span> . Por exemplo, aqui nós escrevemos "c" e o padrão escolheu "color":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p>Se você colocar um valor inválido para uma propriedade ao editar, ou uma propriedade desconhecida, um icone de alerta amarelo aparece além da declaração.</p>
+
+<p>Qualquer mudança é temporária: Atualizando a página voltará ao normal.</p>
+
+<p><span id="result_box" lang="pt"><span>Você pode usar as teclas de seta para aumentar/diminuir regras numéricas durante a edição</span></span> . O botão <kbd>Cima</kbd> transformará "1px" para 2px, e <kbd>Shift</kbd> + <kbd>Cima</kbd>/<kbd>Baixo</kbd> irá acrescentar ou diminuir 10. <kbd>Alt</kbd> + <kbd>Cima</kbd>/<kbd>Baixo</kbd> altera os valores por 0.1, e <kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> você adiciona ou subtrai 100 do valor.</p>
+
+<p>Do Firefox 44, a <span id="result_box" lang="pt"><span>s edições feitas na visualização regras são refletidas no</span></span> <a href="/en-US/docs/Tools/Style_Editor">editor de estilo</a>, e vicce-versa.</p>
+
+<h2 id="Regras_adicionais">Regras adicionais</h2>
+
+<p>Você pode adicionar novas regras na vizualização de regras. Basta clicar com o botão direito para exibirr um menu e selecionar "Add rule". Isso vai adionar uma nova regra cujo o seletor corresponde a seleção atual.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>Inicio no Firefox 41, <span id="result_box" lang="pt"><span>Há um botão que permite que você faça a mesma coisa</span></span>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h2 id="Copiando_regras">Copiando regras</h2>
+
+<p>Inciado no Firefox 41, há itens extras no menu de regras que permite copiar regras ou partes de regras para a área de transferência:</p>
+
+<ul>
+ <li>Copar Regra</li>
+ <li>Copiar Seletor</li>
+ <li>Copiar Declaração da  Propriedade</li>
+ <li>Copiar Nome da Propriedade</li>
+ <li>Copiar Valor da propriedade</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O Inspetor também inclui um número de ferramentas especializadas para trabalhar com funcionalidades particulares em CSS, tais como cores, fontes, e animações. Para saber mais sobre leia a lista <a href="/en-US/docs/Tools/Page_Inspector">como guiar</a>.</li>
+</ul>
diff --git a/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html
new file mode 100644
index 0000000000..9feb12e545
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html
@@ -0,0 +1,34 @@
+---
+title: 'CSS Grid Inspector: Examine grid layouts'
+slug: Tools/Page_Inspector/How_to/Examine_grid_layouts
+tags:
+  - Ferramentas
+  - Guía
+  - Inspetor
+translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts
+---
+<div>{{ToolsSidebar}}</div><h2 id="Ícones_da_grade_na_visão_de_Réguas">Ícones da grade na visão de Réguas</h2>
+
+<div class="geckoVersionNote">Novo no Firefox 52</div>
+
+<p>Começando na Ferramenta de Desenvolvedores do Firefox 52, você pode soliciar ao inspetor que sobreponha uma representação da grid quando inspecionar layouts com grids.</p>
+
+<p>Quando um elemento na visão de Régua possui uma declaração <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code>, ele leva um ícone de grade (grid) ao lado dele: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">. Clique no ícone para apresentar a grade (grid) sobreposta na página, incluindo as linhas da grid e faixas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14526/inspector-grid-overlay.png" style="display: block; height: 893px; margin-left: auto; margin-right: auto; width: 695px;">A sobreposição (overlay) continua a ser apresentada quando você seleciona outros elementos, então você pode editar o CSS de outros itens da grid e ver como a grid é afetada.</p>
+
+<p>{{EmbedYouTube("lzjIe-8WhiQ")}}</p>
+
+<h2 id="O_painel_de_layout_da_grid">O painel de layout da grid</h2>
+
+<div class="geckoVersionNote">Novo no Firefox 56</div>
+
+<p>Firefox 56 baseia-se nos recursos anteriores de grade, provendo um inteiramente novo painel de layout cheio de opções e informações para grades de depuração. Você pode encontrar todas as informações que precisa sobre isto em <a href="https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/">Novas adições poderosas para o Inspetor de grades CSS no Firefox Nightly</a>.</p>
+
+<p>{{EmbedYouTube("dU7xtnzfqxQ")}} </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Para diversos exemplos interessantes de grid, confira em <a href="http://labs.jensimmons.com/">labs.jensimmons.com</a>.</li>
+</ul>
diff --git a/files/pt-br/tools/page_inspector/how_to/index.html b/files/pt-br/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..2f18038ec9
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/index.html
@@ -0,0 +1,13 @@
+---
+title: How to
+slug: Tools/Page_Inspector/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Page_Inspector/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p>
+
+<p>{{ ListSubpages () }}</p>
+
+<p> </p>
diff --git a/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html b/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html
new file mode 100644
index 0000000000..3f7af895dd
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html
@@ -0,0 +1,19 @@
+---
+title: Open the Inspector
+slug: Tools/Page_Inspector/How_to/Open_the_Inspector
+tags:
+  - Ferramentas
+  - Guía
+  - Inspetor
+translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>Há duas formas principais de abrir o Inspector:</p>
+
+<ul>
+ <li><em>sem um elemento selecionado</em>: selecione "Developer -&gt; Toggle Tools" do Botão de Menu ou o <a href="https://developer.mozilla.org/en-US/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">atalho de teclado</a> correspondente</li>
+ <li><em>com um elemento selecionado</em>: clique em um elemento em uma página web com o botão direito do mouse e selecione "Inspecionar Elemento"</li>
+</ul>
+
+<p>O Inspector aparecerá no final da janela do navegador:</p>
+
+<p><img alt="The all-new Inspector in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15493/57-inspector-starfish.png" style="display: block; height: 647px; margin-left: auto; margin-right: auto; width: 845px;">Para começar a utilizar o Inspector, veja a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">UI tour</a>.</p>
diff --git a/files/pt-br/tools/page_inspector/how_to/trabalho_com_animaçoes/index.html b/files/pt-br/tools/page_inspector/how_to/trabalho_com_animaçoes/index.html
new file mode 100644
index 0000000000..8d2d788d50
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/trabalho_com_animaçoes/index.html
@@ -0,0 +1,175 @@
+---
+title: Trabalho Com Animações
+slug: Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes
+translation_of: Tools/Page_Inspector/How_to/Work_with_animations
+---
+<div>{{ToolsSidebar}}</div><p>This article covers three tools you can use to visualize and edit animations:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">the animation inspector</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">editing @keyframes</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">editing timing functions</a></li>
+</ul>
+
+<h2 id="Animation_inspector">Animation inspector</h2>
+
+<div class="note">
+<p>This page describes the Animation inspector as it appears in Firefox 48. Note that the example requires Firefox 47 or higher.</p>
+</div>
+
+<p>The Page Inspector's <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">Animations view</a> displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.</p>
+
+<p>It displays animations created using <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS @keyframes rules</a>, or the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>. Starting in Firefox 48, it will show animations applied to the <code><a href="/en-US/docs/Web/CSS/::before">::before</a></code> and <code><a href="/en-US/docs/Web/CSS/::after">::after</a></code> pseudo-elements.</p>
+
+<p>To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.</p>
+
+<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}</p>
+
+<p>These animations are made using the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>.</p>
+
+<p>Let's use the animation inspector to see what's going on in this example.</p>
+
+<ol>
+ <li>Using Firefox 47 or later, right-click in the box and select "Inspect Element"</li>
+ <li>Make sure the selected element is the <code>&lt;div class="channel"&gt;</code></li>
+ <li>Switch over to the "Animations" tab</li>
+ <li>Play the animation</li>
+</ol>
+
+<p>{{EmbedYouTube("OYkFARSgQB8")}}</p>
+
+<p>Let's take a closer look at the contents of the animation inspector here:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13104/animation-inspector-firefox-48-part-1.png" style="display: block; height: 196px; margin-left: auto; margin-right: auto; width: 762px;"></p>
+
+<p>It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).</p>
+
+<h3 id="Animation_bars">Animation bars</h3>
+
+<p>Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:</p>
+
+<ul>
+ <li>blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property</li>
+ <li>orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used</li>
+ <li>green if the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> was used</li>
+</ul>
+
+<p>The bar contains a lightning bolt icon <img alt="" src="https://mdn.mozillademos.org/files/13106/compositor.png" style="width: 15px;"> if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</p>
+
+<p>If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS <code>@keyframes</code>, there is one bar for each animation, labeled with its name.</p>
+
+<p>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>delay</code> and <code>endDelay</code></a> are both represented.</p>
+
+<p>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:</p>
+
+<ul>
+ <li>the type of animation: CSS transition, CSS animation, or Web Animations API</li>
+ <li>the duration of the animation</li>
+ <li>the animation's start and end delay</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13108/animation-inspector-firefox-48-part-2.png" style="display: block; height: 210px; margin-left: auto; margin-right: auto; width: 762px;"></p>
+
+<h3 id="Information_about_the_animated_element">Information about the animated element</h3>
+
+<p>To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.</p>
+
+<p>{{EmbedYouTube("AvICwiWpYiE")}}</p>
+
+<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). Clicking this icon will lock the highlighter on the element.</p>
+
+<h3 id="Animation_details">Animation details</h3>
+
+<p>If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for <code>img#icon</code>'s animation:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13110/animation-inspector-firefox-48-part-3.png" style="display: block; height: 223px; margin-left: auto; margin-right: auto; width: 762px;"></p>
+
+<p>This is telling us that two properties were modified: <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. <code>filter</code> was given a value at 250ms and <code>transform</code> at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13112/animation-inspector-firefox-48-part-4.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 762px;"></p>
+
+<p>This is essentially a visual representation of the animation's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API#JavaScript_Content">keyframes</a>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> iconKeyframeSet <span class="operator token">=</span> <span class="punctuation token">[</span>
+  <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1)'</span><span class="punctuation token">,</span>   filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)'                </span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span>                          filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)'</span><span class="punctuation token">,</span> offset<span class="punctuation token">:</span> <span class="number token">0.333</span><span class="punctuation token"> }</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span>                            offset<span class="punctuation token">:</span> <span class="number token">0.666</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(0%)'</span><span class="punctuation token">                  }</span>
+<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Application_to_the_example">Application to the example</h3>
+
+<p>Applying all this to our example, we can see that:</p>
+
+<ul>
+ <li>The animation involved two elements, <code>span#note</code> and <code>img#icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the browser name "Firefox Developer Edition" and the browser icon.</li>
+ <li>The <code>img#icon</code> animation:
+  <ul>
+   <li>animated the <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> properties, to scale the icon and color it</li>
+   <li><span style="display: none;"> </span><span style="display: none;"> </span> lasted 750ms, had an <code>endDelay</code> of 100ms</li>
+   <li>used the compositor thread.</li>
+  </ul>
+ </li>
+ <li><span style="display: none;"> </span><span style="display: none;"> </span>The <code>span#note</code> animation:
+  <ul>
+   <li>animated the <code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> properties, to make the name gradually appear</li>
+   <li>lasted 500ms, and had a <code>delay</code> of 150ms.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Further_information_about_animation_compositing">Further information about animation compositing</h3>
+
+<p>In Firefox 49 and above, the information exposed by the Animation Inspector about animation performance/compositing has been improved. We've created a couple of examples to demonstrate this. If you open up <a href="https://mdn.github.io/animation-examples/animation-inspector-compositing.html">animation-inspector-compositing.html</a> and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:</p>
+
+<ul>
+ <li>The white lightning bolt icon now indicates whether all the animation properties have been optimized by running them through the compositor, where possible.</li>
+ <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "All animation properties are optimized."</li>
+ <li>The expanded animation information now includes a lightning bolt icon next to the properties whose animation has been optimized via the compositor.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13589/compositing-information-1.png" style="display: block; height: 349px; margin: 0px auto; width: 1065px;"></p>
+
+<p>Let's now look at <a href="https://mdn.github.io/animation-examples/animation-inspector-compositing-silly.html">animation-inspector-compositing-silly.html</a> — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the <code>transform</code> property is deliberately not handed over to the compositor to handle. The Animation Inspector will rather helpfully tell you this in Firefox 49+ — look at it now and you'll see that:</p>
+
+<ul>
+ <li>The white lightning bolt icon in the bar has been replaced with a grey lightning bolt icon, to indicate that only some of the relevant properties are being optimized by the compositor.</li>
+ <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "Some animation properties are optimized."</li>
+ <li>Properties whose animation is <strong>not</strong> being optimized, but could be if you improved your code, are now given a dotted underline — see transform in the screenshot below. Hovering over this gives you a tooltip that explains why. In this case, the message is "Animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time."</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13591/compositing-information-2.png" style="display: block; height: 394px; margin: 0px auto; width: 1158px;"></p>
+
+<h3 id="Animation_playback">Animation playback</h3>
+
+<p>At the top of the animation inspector:</p>
+
+<ul>
+ <li>there are buttons to play/pause and restart the animation</li>
+ <li>there's a dropdown to change the animation playback rate</li>
+ <li>the current time in the animation is displayed.</li>
+</ul>
+
+<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:</p>
+
+<p>{{EmbedYouTube("Xo6rUf0kGyM")}}</p>
+
+<h2 id="Edit_keyframes">Edit @keyframes</h2>
+
+<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p>
+
+<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p>
+
+<h2 id="Edit_timing_functions">Edit timing functions</h2>
+
+<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p>
+
+<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p>
+
+<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p>
+
+<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p>
+
+<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p>
+
+<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p>
diff --git a/files/pt-br/tools/page_inspector/index.html b/files/pt-br/tools/page_inspector/index.html
new file mode 100644
index 0000000000..9bb012d40d
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/index.html
@@ -0,0 +1,276 @@
+---
+title: Page Inspector
+slug: Tools/Page_Inspector
+translation_of: Tools/Page_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>Utilize o Inspector para analisar e modificar a estrutura e layout de uma página.</p>
+
+<h2 id="Abrindo_o_Inspector">Abrindo o Inspector</h2>
+
+<p>Há várias maneiras de abrir o Inspector:</p>
+
+<ul>
+ <li>Abrir o "Inspector" pelo menu "Web Developer" (no Mac "Web Inspector" é um submenu do menu "Tools")</li>
+ <li>Pressione Ctrl-Shift-i (Cmd-Option-C no Mac OS e Linux)</li>
+ <li>Click com o botão direito em um elemento na página, depois click esquerdo em "Inspecionar elemento"</li>
+</ul>
+
+<p>O <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> vai aparecer na parte inferior da janela do seu navegador, com o Inspector ativo.</p>
+
+<p>Se você abrir o Inspector clicando em "Inspect Element", algum elemento já estará selecionado e o Inspector vai funcionar conforme demonstrado na seção abaixo chamada <a href="#Selecting-Elements" title="#Selecting-Elements">"Selecionando Elementos"</a>.</p>
+
+<p>Outro caminho é mover o mouse por toda a página: o elemento abaixo do mouse fica em desdwataque e com uma borda pontilhada e são exibidas as informações sobre a sua tag HTML. Ao mesmo tempo, do lado esquedo da janela do Inspector, é exibida sua definição HTML contextualizada. Para quem usa o Firefox 30, serão exibidos também os <em>grid lines</em> do elemento seu <em>modelo de caixa</em>, conforme a imagem a seguir:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7459/inspector-opening.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Após selecionar um elemento, o Inspector funcionará conforme demonstrado na próxima seção <a href="#Selecting-Elements" title="#Selecting-Elements">"Selecionando Elementos"</a>.</p>
+
+<h2 id="Selecionando_elementos"><a name="Selecting-Elements">Selecionando elementos</a></h2>
+
+<p>Quando um elemento é selecionado, seu HTML é destacado do lado esquerdo do Inspector e suas informações de estilo são exibidas no painel de CSS que fica ao lado direito:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6919/inspector-annotated3.png" style="display: block; margin-left: auto; margin-right: auto;">A forma como funciona a seleção de elementos teve mudanças significativas no Firefox 29 e, no Firefox 30 , o Inspector mostra o modelo de caixa de cada elemento da página.</p>
+
+<h3 id="Antes_do_Firefox_29">Antes do Firefox 29</h3>
+
+<p>Quando você seleciona um elemento clicando sobre ele na página, o painel do Inspector fica travado neste elemento. Assim, mesmo se você mover o mouse para outro lugar na página, o Inspector não muda sua exibição para outro elemento. </p>
+
+<p>Ao clicar sobre o elemento selecionado, dois botões são exibidos: o do lado esquerdo desbloqueia o Inspector do elemento e permite que você selecione outro elemento na página. O do lado direito mostra um <a href="/en-US/docs/Tools/Page_Inspector#Element_popup_menu">menu popup</a> sobre o elemento.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6921/inspector-element-annotation.png" style="display: block; height: 167px; margin-left: auto; margin-right: auto; width: 389px;"></p>
+
+<h3 id="Firefox_29">Firefox 29</h3>
+
+<p id="No_Firefox_29.2C_a_borda_pontilhada_ao_redor_do_elemento_e_suas_anota.C3.A7.C3.B5es_s.C3.A3o_mostradas_quando_voc.C3.AA_passa_o_mouse_sobre_o_elemento_na_p.C3.A1gina_e_n.C3.A3o_apenas_quando_o_mesmo_for_selecionado._Al.C3.A9m_disso.2C_o_Inspector_n.C3.A3o_fica_travado_no_elemento_selecionado.3A_ele_exibe_as_informa.C3.A7.C3.B5es_do_elemento_correspondente_ao_que_o_mouse_est.C3.A1_em_cima._Para_selecionar_um_elemento_diferente_na_p.C3.A1gina.2C_clique_no_bot.C3.A3o_.22Select_element.22_que_aparece_na.C2.A0Barra_de_ferramentas_do_Toolbox.3A"><span style="font-size: 14px; line-height: 1.5;">No Firefox 29, a borda pontilhada ao redor do elemento e suas anotações são mostradas quando você passa o mouse sobre o elemento na página e não apenas quando o mesmo for selecionado. Além disso, o Inspector não fica travado no elemento selecionado: ele exibe as informações do elemento correspondente ao que o mouse está em cima. Para selecionar um elemento diferente na página, clique no botão "Select element" que aparece na </span><a href="/en-US/docs/Tools_Toolbox#Toolbar" style="font-size: 14px; line-height: 1.5;">Barra de ferramentas do Toolbox</a><span style="font-size: 14px; line-height: 1.5;">:</span></p>
+
+<p>{{EmbedYouTube("zBYEg40ByCM")}}</p>
+
+<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">A partir do Firefox 30</span></p>
+
+<p>Aqui, o comportamento de seleção é o mesmo do Firefox 29, mas o Inspector também mostra o modelo de caixa e as <em>grid lines</em> para o elemento selecionado na página:</p>
+
+<p>{{EmbedYouTube("y2LcsxE2pR0")}}</p>
+
+<p> </p>
+
+<h2 id="Menu_popup_do_Elemento"><a name="Element_popup_menu">Menu popup do Elemento</a></h2>
+
+<p>Você pode executar algumas tarefas específicas no menu popup. Para ativá-lo, clique no contexto do elemento no painel de HTML:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7461/inspector-popup.png" style="display: block; height: 308px; margin-left: auto; margin-right: auto; width: 540px;"></p>
+
+<p>O menu oferece as seguintes opções para você:</p>
+
+<ul>
+ <li><a href="#Editing_HTML">editar o elemento HTML</a></li>
+ <li>copiar um código HTML externo ou inter para o elemento (Copy inner / Outer HTML)</li>
+ <li>copiar o seletor CSS que seleciona apenas o elemento</li>
+ <li>deletar o elemento</li>
+ <li>selecionar as pseudo-classes CSS: <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover">:hover</a>, <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a> e <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS</li>
+</ul>
+
+<div>Veja outras opções:</div>
+
+<div> </div>
+
+<ul>
+ <li>Clique no botão direito do menu quando o elemento está selecionado, conforme demostrado na imagem abaixo:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6347/inspector-element-selected-context-menu-cropped.png" style="display: block; height: 291px; margin-left: auto; margin-right: auto; width: 399px;"></p>
+
+<ul>
+ <li>Clique com o botão direito em cima de um elemento dentro do <a href="#HTML_pane">Painel de HTML</a> do Inspector:</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6349/inspector-html-context-menu.png" style="display: block; height: 299px; margin-left: auto; margin-right: auto; width: 399px;"></p>
+
+<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">Copiar a URL de imagens</span></p>
+
+<p><span style="line-height: 1.5;">A partir do Firefox 29, se o elemento selecionado for uma imagem, há também a opção de copiar A URL da imagem.:</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7011/inspector-copyasdatauri.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 529px;"></p>
+
+<h3 id="Editando_HTML"><a name="Editing_HTML">Editando HTML</a></h3>
+
+<p><br>
+ <span style="line-height: 1.5;">Para editar um elemento externamente (</span><a href="/en-US/docs/Web/API/Element.outerHTML" style="line-height: 1.5;">outerHTML</a>)<span style="line-height: 1.5;">, selecione no menu popup a opção "Edit As HTML". Uma caixa para edição de HTML será aberta:</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6351/inspector-html-edit-html.png" style="display: block; margin-left: auto; margin-right: auto;">Você pode adicionar qualquer código HTM aqui: alterando tags ou adicionando novas. Para sair, basta clicar fora da caixa e as modificações serão realizadas na página.</p>
+
+<h2 id="Painel_de_HTML"><a name="HTML_pane">Painel de HTML</a></h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5459/inspector-html-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">O painel de HTML exibe a página HTML como uma árvore, em que é possível expandir e recolher cada nó. O início e o fim de cada tag para os elementos selecionados ficam em destaque com a cor fundo acizentada.</p>
+
+<p><span style="line-height: 1.5;">Você pode editar o HTML - tags, atributos e conteúdo - diretamente no painel: clique no elemento que você deseja editar, realize as modificações e dê Enter que as mudanças podem já ser vistas na página.</span></p>
+
+<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">Barra de ferramentas do painel de HTML</span></p>
+
+<p>Na parte de cima do painel, há uma barra de ferramentas dividida em três partes:</p>
+
+<div class="geckoVersionNote">
+<p>A partir do Firefox 29, o botão "Select element" foi movido para a <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox</a>.</p>
+</div>
+
+<ul>
+ <li><em>Select element (Selecione o elemento)</em>: se você clicar neste botão, você pode selecionar um elemento diferente na janela do navegador.</li>
+ <li><em>HTML breadcrumbs</em>: aqui você pode verificar a hierarquia completa dos elementos da página ou da parte da página que estiver inspecionando. Se você clicar e segurar o clique sobre algum elemento, um menu popup aparecerá e permitirá que você selecione um dos elementos irmãos dele.</li>
+ <li><em>Search tags (Buscar tags)</em>: aqui você pode buscar por tags presentes na página. Com o "Enter", você busca as próximas ocorrências da tag, se houver.</li>
+</ul>
+
+<h2 id="Painel_de_CSS">Painel de CSS</h2>
+
+<p>O painel de CSS mostra as informações de estilo relacionadas ao elemento que está sendo inspecionado. Há 4 opções de visualização nesse painel:  "Rules", "Computed", "Fonts", and "Box Model". Você pode chavear entre elas clicando no menu superior:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5463/inspector-css-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Menu_Rules">Menu Rules</h3>
+
+<p>Aqui são mostradas todas as regras aplicadas ao elemento selecionado, na ordem da mais específica à menos:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5467/inspector-css-rules.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Aqui também são listados os <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a> e as regras que eles aplicam.</p>
+
+<h4 id="Tela_da_opção_Rules">Tela da opção <em>Rules</em></h4>
+
+<p>Essa tela mostra todas as regras como em um folha de estilo, com uma lista de seletores seguida de uma lista de <code>propriedade:valor;</code> declarações.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5659/inspector-css-rules-singlerule-annotated.png" style="display: block; height: 206px; margin-left: auto; margin-right: auto; width: 544px;">Você pode realizar testes com todas as declarações deixando-as desabilitadas. Para isso, basta clicar no checkbox ao lado de cada uma, alterando entre habilitada ou não.</p>
+
+<h4 id="Link_para_o_arquivo_CSS">Link para o arquivo CSS</h4>
+
+<p>À direita de cada declaração, é exibido o link com o nome do arquivo CSS e o número da linha em que ela se encontra. Se você clicar ali, o arquivo será aberto no <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+
+<p>A partir do Firefox 29, o Inspector entende o mapa do código CSS (<em>CSS source map</em>). Isso significa que se você estiver utilizando um editor CSS em que funcionem os mapas de código e se você habilitar o mapa de código no <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, o link levará você até o código original e não ao CSS gerado.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6947/inspector-css-sourcemap-detail.png" style="display: block; height: 133px; margin-left: auto; margin-right: auto; width: 390px;"></p>
+
+<p>Leia mais sobre isso em <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Style Editor documentation</a>.</p>
+
+<h4 id="Amostra_de_cores">Amostra de cores</h4>
+
+<div class="geckoVersionNote">
+<p>A partir do Firefox 27,  você pode ver a amostra da cor próxima ao seu valor:</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p>
+
+<h4 id="Seletor_de_cor">Seletor de cor</h4>
+
+<div class="geckoVersionNote">
+<p>A partir do Firefox 28, se você clicar na amostra de cor, uma paleta de cores será aberta para você selecionar qual deseja.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6659/inspector-color-picker.png" style="display: block; height: 321px; margin-left: auto; margin-right: auto; width: 411px;"></p>
+
+<h4 id="Pré-visualização_da_imagem_de_fundo_(Imagem_background-image_preview)">Pré-visualização da imagem de fundo (Imagem background-image preview)</h4>
+
+<div class="geckoVersionNote">
+<p>A partir do Firefox 27,  você pode pré-visualizar a imagem especificada utilizando o <a href="/en-US/docs/Web/CSS/background-image">background-image</a> que funciona ao passar o mouse sobre o link da imagem:</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6413/inspector-background-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Visualização_transform">Visualização transform </h4>
+
+<div class="geckoVersionNote">
+<p>Isto é novo no Firefox 29.</p>
+</div>
+
+<p>A partir do Firefox 29 , se você passar o mouse sobre a propriedade <a href="/en-US/docs/Web/CSS/transform"><code>transform</code></a> na tela <em>Rules, </em> você consegue visualizar a transformação que ali ocorre:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7133/transform-tooltip.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Editando_rules">Editando <em>rules</em></h4>
+
+<p>Se você clicar em uma declaração para editar sua propriedade ou valor, você visualiza o resultado imediatamente (aqui você também pode adicionar novas declarações, basta clicar no fim de uma já existente e dar Enter). O Inspector reconhece inclusive se você inserir um valor ou propiedade errado ou inexistente: ele coloca um alerta amarelo no local.</p>
+
+<p><span style="line-height: 1.5;">Qualquer mudança que você fizer é temporária: com um <em>reload</em> a página volta com seu estilo original.</span></p>
+
+<p><strong>Dica:</strong> Você pode usar as setinhas do seu teclado para fazer ajustes nos valores numéricos enquanto edita, como se fosse um ajuste fino.</p>
+
+<h3 id="Menu_Computed">Menu <em>Computed</em></h3>
+
+<p>Nesta opção, o estilo do elemento é organizado pela propriedade. Isso lista todas as propriedades CSS que foram aplicadas ao elemento em ordem alfabética e os valores para cada uma:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5473/inspector-css-computed.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Clicando na propriedade, você vê a declaração referente àquele valor mais o link para o arquivo de código e número da linha:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5665/inspector-css-computed-show-rule.png" style="display: block; margin-left: auto; margin-right: auto;">Como padrão, só são mostrados os valores que estão sendo explicitamente usados na página: para ver todos valore, selecione a opção "Browser styles" que fica na parte de baixo do painel. </p>
+
+<p>Utilize o campo de busca (search box) para buscar na página as declarações tanto por propriedades quanto por valores. Por exemplo, se você bucar por "font", serão exibidas todas as propriedades que estão na página que contêm a palavra "font" em seu nome.</p>
+
+<h3 id="Menu_Fonts">Menu Fonts</h3>
+
+<p>Aqui são listadas todas as fontes (ou a única) que estão sendo utilizadas pelo elemento selecionado. Mas, veja que são mostradas as fontes usadas no seu sistema, que não necessariamente é a fonte especificada no CSS original:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5469/inspector-css-fonts.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">Menu Box model</span></p>
+
+<p>Aqui é exibida uma representação gráfica do modelo de caixa (<a href="/en-US/docs/Web/CSS/box_model" style="line-height: 1.5;" title="/en-US/docs/Web/CSS/box_model">box model</a><span style="line-height: 1.5;">) aplicado ao elemento:</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5667/inspector-css-box-model.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<ul>
+ <li>Ao lado superior esquerdo está o valor do espaço total tomado pelo elemento na página.</li>
+ <li>Os números que estão do lado de fora da caixa mostram o valor da <em>margin</em> de cada lado do elemento.</li>
+ <li>Os números nas bordas da caixa mostram quanto cada lado da borda ocupa. </li>
+ <li>Os númeris que estão do lado de dentro da caixa mostram o valor de <em>padding</em> de cada lado do elemento.</li>
+ <li>E, no centro da caixa, é mostrado o tamanho do conteúdo da caixa.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5671/inspector-css-box-model-annotated.png" style="display: block; height: 435px; margin-left: auto; margin-right: auto; width: 680px;"></p>
+
+<h2 id="Usando_o_Inspector_com_um_Web_Console">Usando o Inspector com um Web Console</h2>
+
+<p>Você tamabém pode utilizar um web console ao mesmo tempo em que usa o inspetor de página. Na verdade, você inclusive possui uma feature a mais: o elemento selecionado que está sendo inspecionado pelo inspetor de página pode ser referenciado em JavaScript no Web Console através da utilização da variável <code>$0</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5461/inspector-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Developer_API">Developer API</h2>
+
+<p>O Firefox pode acessar os seguintes objetos a partir do contexto chrome://browser/content/devtools/inspector/inspector.xul:</p>
+
+<h3 id="window.inspector">window.inspector</h3>
+
+<p>definido em <a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a>. Atributos e funções:</p>
+
+<ul>
+ <li>.selection - informações sobre o elemento inspecionado:
+  <ul>
+   <li>.isNode() - retorna true se a seleção for um nó.</li>
+   <li>.node - retorna o elemento real da página.</li>
+   <li>.window - A janela do objeto em que o frame da seleção está.</li>
+  </ul>
+ </li>
+ <li>.markDirty() - marca que a página foi modificada pelo inspetor - uma warning será exibida, desde que as modificações realizadas através do inspetor forem reescritas e recarregadas.</li>
+</ul>
+
+<p>Bindable events using on:</p>
+
+<h4 id="markuploaded">markuploaded</h4>
+
+<p>Called when the left panel has been refreshed, after page change.</p>
+
+<h4 id="ready">ready</h4>
+
+<p>Called on first markuploaded.</p>
+
+<h4 id="pseudoclass">pseudoclass</h4>
+
+<p>Called after toggle of a pseudoclass.</p>
+
+<h4 id="layout-change">layout-change</h4>
+
+<p>"low-priority change event for things like paint and resize."</p>
+
+<h2 id="Atalhos_de_teclado">Atalhos de teclado</h2>
+
+<p>{{ Page ("en-pt-BR/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>
+
+<h3 id="Global_shortcuts">Global shortcuts</h3>
+
+<p>{{ Page ("pt-BR/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
diff --git a/files/pt-br/tools/rulers/index.html b/files/pt-br/tools/rulers/index.html
new file mode 100644
index 0000000000..4712700308
--- /dev/null
+++ b/files/pt-br/tools/rulers/index.html
@@ -0,0 +1,32 @@
+---
+title: Rulers
+slug: Tools/Rulers
+tags:
+  - Desenvolvimento
+  - Design
+  - régua
+translation_of: Tools/Rulers
+---
+<div>{{ToolsSidebar}}</div><p class="geckoVersionNote">Recente no Firefox 40.</p>
+
+<p>Desde o Firefox 40,<span id="result_box" lang="pt"><span class="hps"> é possível sobrepor</span> <span class="hps">réguas</span> <span class="hps">horizontais e verticais</span> <span class="hps">em uma página da</span> <span class="hps">web</span></span>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11181/rulers.png" style="display: block; height: 555px; margin-left: auto; margin-right: auto; width: 700px;">As unidades são em pixels.</p>
+
+<p>Desde a versão 59 do Firefox, as dimensões da tela estão exibidas perto do canto superior direito da tela.</p>
+
+<p>Há duas formas de ativar/desativar as réguas para um página :</p>
+
+<ul>
+ <li>Usando o comando <code>rulers</code> na Barra de Desenvolvedor (Shift + F2)</li>
+ <li>Usando um botão dedicado na barra de ferramentas. Por padrão, esse botão não é exibido, mas você pode opcionalmente exibi-lo marcando na seção "Botões disponíveis da Toolbox", em <a href="https://developer.mozilla.org/pt-BR/docs/Tools/Tools_Toolbox#Settings">Configurações (Opções da caixa de ferramentas)</a>. Uma vez visível, o botão "Mostrar/Esconder réguas para a página" aparece no topo direito da Toolbox, no mesmo lugar onde fica o botão de Configurações/Opções.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15784/rulers-button.png" style="display: block; height: 216px; margin-left: auto; margin-right: auto; width: 328px;"></p>
+
+<p>É importante manter em mente algumas coisas ao utilizar a régua:</p>
+
+<ul>
+ <li>O comando <em>rulers</em> deve ser redigitado a cada atualização da página e em cada nova aba.</li>
+ <li>O efeito do comando não é permanente</li>
+</ul>
diff --git a/files/pt-br/tools/scratchpad/index.html b/files/pt-br/tools/scratchpad/index.html
new file mode 100644
index 0000000000..00e9b9d019
--- /dev/null
+++ b/files/pt-br/tools/scratchpad/index.html
@@ -0,0 +1,77 @@
+---
+title: Scratchpad
+slug: Tools/Scratchpad
+translation_of: Archive/Tools/Scratchpad
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>{{ gecko_minversion_header("6.0") }}</p>
+
+<p>O Scratchpad, disponível no Firefox 6 ou superior, fornece um ambiente para experiências com código em Javascript. Você pode escrever e testar suas ideias de código interagindo com a página antes de usar suas ferramentas de desenvolvimento corriqueiras para finalizar e limpar o resultado final.</p>
+
+<p><span class="ILfuVd"><span class="e24Kjd">Diferentemente</span></span> do <a href="/en/Tools/Web_Console" title="en/Using the Web Console">Console</a>, desenhado para interpretar uma única linha de código, o Scratchpad lhe permite editar grandes trechos de código Javascript e então executá-los de várias formas, dependendo de como você quer usar a saída da execução.</p>
+
+<p>{{EmbedYouTube("Pt7DZACyClM")}}</p>
+
+<h2 id="Usando_o_Scratchpad">Usando o Scratchpad</h2>
+
+<p>Para abrir o Scratchpad, pressione Shift+F4, ou vá ao menu Desenvolvedor Web (um submenu em Ferramentas no Mac OSX e no Linux), e selecione Scratchpad. Isso abrirá a janela do editor do Scratchpad, que inclui um comentário que contém algum resumo de como usar o editor. De la você ja pode começar a escrever seu Javascript e testá-lo.</p>
+
+<p>A janela do Scracthpad se parece com essa abaixo (no Mac OSX a barra de menus fica no topo da tela):</p>
+
+<p>Veja <a href="/en/Tools/Using_the_Source_Editor" title="Using the Source Editor"> Usando o Editor de código fonte</a> para documentação sobre o editor em si, incluindo atalhos de teclado que serão bem úteis.</p>
+
+<p>O menu Arquivo oferece opções para salvar e carregar trechos de Javascript, de forma que você possa reusar código mais tarde caso queira.</p>
+
+<h3 id="Executando_seu_código">Executando seu código</h3>
+
+<p class="note">Uma vez que você tenha escrito seu código, selecione a parte que desenha executar. Se você não selecionar nada, todo o código no editor será executado. Clique com o botão direito do mouse (ou vá até o menu Executar na barra superior) e escolhar a forma que deseja rodar seu código. Há quatro opções disponíveis.</p>
+
+<h4 id="Executar">Executar</h4>
+
+<p>Quando você escolhe essa opção, o código selecionado é executado. Essa opção é a que você escolherá caso queira executar uma função ou outro trecho que manipule o conteúdo da página sem que você precise ver o resultado.</p>
+
+<p>Inspecionar</p>
+
+<p>A opção de inspeção executa o código da mesma forma que a opção Executar; entretanto depois que a execução terminar e houver um retornar, um inspetor de objeto é aberto, o que te permite analizar o valor retornado.</p>
+
+<p>Por exemplo, se você entrasse com o código:</p>
+
+<pre>window
+</pre>
+
+<p>E então escolher inspecionar, o inspetor de objetos abrirá e se parecerá com algo assim:</p>
+
+<h4 id="Visualizar">Visualizar</h4>
+
+<p>A opção de visualizar executa o código selecionado e então insere o resultado diretamente no editor como um comentário. Essa é uma forma conveniente de manter um log dos seus testes enquanto você trabalha. Você também pode usar esse recurso como uma calculadora num momento de pressa, apesar de que se você não tem um programa que sirva como uma calculadora melhor, você deve ter problemas maiores para resolver.</p>
+
+<h4 id="Recarregar_e_executar">Recarregar e executar</h4>
+
+<p>A opção de recarregar e executar primeiro recarrega a página e então executa o código assim que o evento "load" da página é disparado. Isso é útil para executar código em um ambiente fresquinho.</p>
+
+<h2 id="Cenários_de_uso_do_Scratchpad">Cenários de uso do Scratchpad</h2>
+
+<p>Existem várias formas de usar o Scratchpad de maneira interessante. Essa seção cobre alguns como exemplo.</p>
+
+<h3 id="Testando_seu_código">Testando seu código</h3>
+
+<p>O Scratchpad é particularmente útil para testar seu novo código em um ambiente real de navegador; você pode copiar o código que você está debugando no Scracthpad e então executá-lo e, na sequência, melhorá-lo até que ele funcione corretamente. Uma vez isso aconteça, copie o código de volta para o seu arquivo com o script de interesse e seu trabalho terminou. Em muitos casos, você pode escrever, debugar e testar seu código sem nem recarregar a página.</p>
+
+<h3 id="Trechos_de_código_reutilizáveis">Trechos de código reutilizáveis</h3>
+
+<p>O menu Arquivo do Scratchpad oferece comandos para salvar e carregar código Javascript. Isso ajuda  a manter por perto pedações de Javascript que você usa com frequência. Por exemplo, se você está trabalhando em um site que usa requisições AJAX para carregar dados, você pode manter trechos que façam essas operações para teste e verificação dos dados. De forma semelhante, você pode manter funções de interesse com propósito geral para debugar, como funções de dump, saída ou outros tipos de informação sobre o DOM.</p>
+
+<h2 id="Escopo_do_Scratchpad">Escopo do Scratchpad</h2>
+
+<p>O código rodado no Scratchpad é executado em escopo global do aba selecionada no momento da execução. Quaisquer variáveis que você declare fora de uma função serão adiconadas ao objeto global da aba.</p>
+
+<h2 id="Usando_Scratchpad_para_acessar_partes_internas_do_Firefox">Usando Scratchpad para acessar partes internas do Firefox</h2>
+
+<p>Se você está trabalhando sobre o próprio Firefox, ou desenvolvendo complementos, você pode achar útil acessar as áreas internas do browser usando o Scratchpad. Para fazer isso modifique o <code>devtools.chrome.enabled</code> para <code>true</code> usando <code>about:config</code>. Feito isso, o menu Ambiente terá a opção Browser; estando ela selecionada, o seu escopo é todo o navegador ao invés de somente o conteúdo da página.</p>
+
+<p>{{ languages( { "es": "es/Herramientas/Borrador", "fr": "fr/Outils/Ardoise", "ja": "ja/Tools/Scratchpad", "pt": "pt/Ferramentas/Scratchpad" } ) }}</p>
+
+<h2 id="Atalhos_do_Teclado">Atalhos do Teclado</h2>
+
+<p>{{ Page ("pt-BR/docs/Tools/Keyboard_shortcuts", "scratchpad") }}</p>
diff --git a/files/pt-br/tools/settings/index.html b/files/pt-br/tools/settings/index.html
new file mode 100644
index 0000000000..4474928ecc
--- /dev/null
+++ b/files/pt-br/tools/settings/index.html
@@ -0,0 +1,155 @@
+---
+title: Configurações
+slug: Tools/Settings
+tags:
+  - Barra de Ferramentas
+  - Desenvolvimento
+  - Ferramentas
+  - Firefox
+translation_of: Tools/Settings
+---
+<div>{{ToolsSidebar}}</div><h2 id="Configurações_de_Abertura">Configurações de Abertura</h2>
+
+<p>Para ver o painel de configurações, abra qualquer uma das Ferramentas do Desenvolvedor e então:</p>
+
+<ul>
+ <li>clique no botão "Configurações" (<img alt="" src="https://mdn.mozillademos.org/files/13158/settings-icon.png" style="display: inline-block; height: 25px; width: 24px;">) na barra de ferramentas:<img alt="" src="https://mdn.mozillademos.org/files/13176/settings-show-icon.png" style="display: block; height: 632px; margin-left: auto; margin-right: auto; width: 890px;"></li>
+ <li>ou pressione <kbd>F1</kbd> (novo no Firefox 43) para alternar entre a ferramenta ativa e o painel de Configurações</li>
+ <li>ou pressione <kbd>Ctrl/Cmd</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> para alternar entre a ferramenta ativa e o painel de Configurações</li>
+</ul>
+
+<p>O painel de Configurações deve ser assim:</p>
+
+<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/13154/devtools-settings-shadowed.png" style="display: block; height: 1726px; margin-left: auto; margin-right: auto; width: 816px;"></p>
+
+<h2 id="Categorias">Categorias</h2>
+
+<h3 id="Ferramentas_de_Desenvolvedor_Padrão_do_Firefox">Ferramentas de Desenvolvedor Padrão do Firefox</h3>
+
+<p>Esse grupo de checkboxes determina as ferramentas habilitadas na caixa de ferramentas. Novas ferramentas são frequentemente incluídas no Firefox, mas não habilitadas por padrão.</p>
+
+<h3 id="Botões_Disponíveis_na_Caixa_de_Ferramentas">Botões Disponíveis na Caixa de Ferramentas</h3>
+
+<p>Esse grupo de checkboxes determina as ferramentas com <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">um ícone disponível na barra de ferramentas</a>.</p>
+
+<h3 id="Altere_o_Tema_das_Ferramentas_de_Desenvolvedor">Altere o Tema das Ferramentas de Desenvolvedor</h3>
+
+<p>É permitido alterar entre três temas diferentes.</p>
+
+<p>O tema light, que é o padrão:</p>
+
+<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/13172/theme-light-shadowed.png" style="display: block; height: 317px; margin-left: auto; margin-right: auto; width: 890px;"></p>
+
+<p>O tema dark (que é tema padrão no <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p>
+
+<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/13168/theme-dark.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 875px;"></p>
+
+<p class="geckoVersionNote">Uma novidade no Firefox 48!</p>
+
+<p>Existe também o tema Firebug, que se parece com a <a href="https://getfirebug.com/">extensão Firebug</a>, permitindo que você se sinta em casa caso já esteja acostumado com o Firebug:</p>
+
+<p><img alt="Firebug theme for DevTools" src="https://mdn.mozillademos.org/files/13170/theme-firebug-shadowed.png" style="display: block; height: 318px; margin-left: auto; margin-right: auto; width: 890px;"></p>
+
+<h3 id="Preferências_Comuns">Preferências Comuns</h3>
+
+<p>As configurações que se aplicam para mais de uma ferramenta, são as seguintes:</p>
+
+<dl>
+ <dt><em>Habilitar </em><em>logs (registros) persistentes</em></dt>
+ <dd>A configuração para o controlar ou não o Console Web e Monitor de Rede não são limpas quando você navegar para uma nova página.</dd>
+</dl>
+
+<h3 id="Inspetor">Inspetor</h3>
+
+<dl>
+ <dt><em>Mostrar os estilos no navegador</em></dt>
+ <dd>Uma configuração para controlar os estilos aplicados pelo navegador (<a href="/en-US/docs/Web/CSS/Cascade">agente-de-estilo-de-usuario</a>) deve ser mostrada na <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Regras de exibição </a>do inspetor. Observe que esta configuração é independente dos "estilos do navegador" nos inspetores de <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Exibição computada</a>.</dd>
+ <dt><em>Retirar atributos DOM</em> (novidade<em> </em>no Firefox 47)</dt>
+ <dd>Por padrão, o inspetor trunca atributos DOM e mais de 120 caracteres. Desmarque essa caixa para impedir esse comportamento.  Essa configuração funciona alternando o about:config  "devtools.markup.collapseAttributes". Para mudar o limiar no qual atributos são truncados, você consegue editar o about:config preferência "devtools.markup.collapseAttributeLength".</dd>
+ <dt><em>Unificar a cor padrão</em></dt>
+ <dd>Uma configuração para controlar como as cores são representadas no inspetor:</dd>
+ <dd>
+ <ul>
+  <li>Hex</li>
+  <li>HSL(A)</li>
+  <li>RGB(A)</li>
+  <li>Nome da cor</li>
+  <li>Como autor ( novo no Firefox 44).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Console_Web">Console Web</h3>
+
+<dl>
+ <dt><em>Habilitar timestamps</em></dt>
+ <dd>
+ <div class="textArea" id="destText" style="direction: ltr;">
+ <div><span id="ouHighlight__0_7TO0_7">Controla</span><span id="noHighlight_0.9287595761391253"> </span><span id="ouHighlight__9_15TO9_10">se</span><span id="noHighlight_0.9334492220918578"> </span><span id="ouHighlight__17_19TO12_12">o</span><span id="noHighlight_0.9954516048383718"> </span><span id="ouHighlight__25_31TO14_20">Console</span><span id="noHighlight_0.4553237512269448"> </span><span id="ouHighlight__21_23TO22_24">Web</span><span id="noHighlight_0.2539094102645578"> </span><span id="ouHighlight__33_40TO26_30">exibe</span><span id="noHighlight_0.32719765213609675"> os carimbos de </span><span id="ouHighlight__42_51TO47_50">hora</span><span id="noHighlight_0.9055325451246086">.</span><span id="noHighlight_0.4307004313541585"> </span><span id="ouHighlight__54_56TO53_53">O</span><span id="noHighlight_0.13575833787067504"> </span><span id="ouHighlight__62_68TO55_61">Console</span><span id="noHighlight_0.6387119609038014"> </span><span id="ouHighlight__58_60TO63_65">Web</span><span id="noHighlight_0.7741752524148612"> </span><span id="ouHighlight__70_77TO67_72">padrão</span><span id="noHighlight_0.9117182084222228"> </span><span id="ouHighlight__82_87TO74_83">escondendo</span><span id="noHighlight_0.3174826976799109"> os <em>timestamps</em></span><span id="noHighlight_0.9957832702877994">.</span></div>
+ </div>
+ .</dd>
+</dl>
+
+<h3 id="Editor_de_Estilos">Editor de Estilos</h3>
+
+<dl>
+ <dt><em>Mostrar fonte original</em></dt>
+ <dd>Quando o pré-processador suporta a fonte do mapa usado, isto abilita o estilo de editor no display original, pré-processador, fontes preferidas quando gerado o CSS.<a href="/en-US/docs/Tools/Style_Editor#Source_map_support"> Aprenda mais sobre o Editor de Estilo suportado para fontes dos mapas CSS</a>. Com a configuração estando checada, a <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Exibição de página do inspetor de regras também irá fornecer links para as fontes originais</a>.</dd>
+ <dt><em>Autocomplete CSS</em></dt>
+ <dd>
+ <div><span id="ouHighlight__0_5TO0_4">Ative</span><span id="noHighlight_0.25012715404993047"> </span><span id="ouHighlight__7_9TO6_6">o</span><span id="noHighlight_0.025617941019710377"> </span><span id="ouHighlight__17_22TO8_13">Editor</span><span id="noHighlight_0.09302131460612217"> de </span><span id="ouHighlight__11_15TO18_24">Estilos</span><span id="noHighlight_0.9680297053130326"> </span><span id="ouHighlight__24_25TO26_29">para</span><span id="noHighlight_0.4663926296344244"> </span><span id="ouHighlight__27_31TO31_38">oferecer</span><span id="noHighlight_0.6965895657157833"> </span><span id="ouHighlight__46_56TO40_48">sugestões</span><span id="noHighlight_0.3126477494907086"> do </span><span id="ouHighlight__33_44TO53_65">auto completar</span><span id="noHighlight_0.4215687138569931">.</span></div>
+ </dd>
+</dl>
+
+<h3 id="Perfil_JavaScript">Perfil JavaScript</h3>
+
+<dl>
+ <dt><em>Mostrar a plataforma de dados Gecko</em></dt>
+ <dd>
+ <div class="textArea" id="destText" style="direction: ltr;">
+ <div><span id="ouHighlight__0_0TO0_2">Uma</span><span id="noHighlight_0.9962875701500744"> </span><span id="ouHighlight__2_8TO4_15">configuração</span><span id="noHighlight_0.9524127286232588"> </span><span id="ouHighlight__10_11TO17_20">para</span><span id="noHighlight_0.07622512888342514"> </span><span id="ouHighlight__13_19TO22_30">controlar</span><span id="noHighlight_0.03139054094723315"> </span><span id="ouHighlight__29_30TO32_33">ou</span><span id="noHighlight_0.6583050313158842"> </span><span id="ouHighlight__32_34TO35_37">não</span><span id="noHighlight_0.5421641174642587"> </span><span id="ouHighlight__36_43TO39_44">perfis</span><span id="noHighlight_0.6851419806707744"> </span><span id="ouHighlight__45_50TO46_50">devem</span><span id="noHighlight_0.3833705113575805"> </span><span id="ouHighlight__52_58TO52_58">incluir</span><span id="noHighlight_0.19241351568253373"> </span><span id="ouHighlight__75_81TO60_67">símbolos</span><span id="noHighlight_0.7514281071325736"> de </span><span id="ouHighlight__66_73TO72_81">plataforma</span><span id="noHighlight_0.009275912509310924"> </span><span id="ouHighlight__60_64TO83_87">Gecko</span>.</div>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Editor_de_Preferências">Editor de Preferências</h3>
+
+<p>Preferências para o <a href="http://codemirror.net/">CodeMirror</a> editor de código fonte, que é incluido no Firefox e usado por várias ferramentas de desenvolvedor, incluindo <a href="/en-US/docs/Tools/Scratchpad">Bloco de anotações</a> e o <a href="/en-US/docs/Tools/Style_Editor">Editor de Estilo</a>.</p>
+
+<dl>
+ <dt><em>Detectando identação</em></dt>
+ <dd>Auto identar novas linhas baseadas na atual identação.</dd>
+ <dt>
+ <div><em><span id="ouHighlight__10_17TO0_8">Colchetes</span><span id="noHighlight_0.9986819027694629"> de </span><span id="ouHighlight__0_8TO13_33">fechamento automático</span></em></div>
+
+
+ <div><em><span id="ouHighlight__0_5TO0_8">Identação</span><span id="noHighlight_0.8273644223289824"> </span><span id="ouHighlight__7_11TO10_15">usando</span><span id="noHighlight_0.1171574839061873"> </span><span id="ouHighlight__13_18TO17_23">espaços</span></em></div>
+
+
+ <div><em><span id="ouHighlight__4_7TO5_11">Tamanho da aba</span></em></div>
+ </dt>
+ <dt> </dt>
+ <dt><em>Atalhos de teclado</em></dt>
+ <dd>Escolha o padrão <em>CodeMirror</em> atalho de teclado, ou atalhos de teclado de um dos vários editores populares:
+ <ul>
+  <li>Vim</li>
+  <li>Emacs</li>
+  <li>Sublime Text</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Configurações_avançadas">Configurações avançadas</h3>
+
+<dl>
+ <dt><em>Desabilitar cache</em></dt>
+ <dd>Desabilite o simulador de cache do navegador para simular uma primeira performance de carregamento. Essa configuração persiste, significa que se ele estiver definido, o cache será desativado qua você reabrir o devtools. Cache é reativado quado os devtools estão fechados.</dd>
+ <dt><em>Desabilitar JavaScript</em></dt>
+ <dd>Recarregue a aba atual com o JavaScript desabilitado.</dd>
+ <dt><em>Habilitar Service Workers over HTTP</em></dt>
+ <dd>Habilitar <em>Service Worker </em>para registro de sites inseguros.</dd>
+ <dt><em>Habilitar browser chrome e add-on depuração toolboxes</em></dt>
+ <dd>Possibilita que você use as ferramentas de desenvolvimento no contexto do próprio navegador (Firefox), e não somente no conteúdo da web.</dd>
+ <dt><em>Habilitar depuração remota</em></dt>
+ <dd>Permite que as ferramentas de desenvolvimento <a href="/en-US/docs/Tools/Remote_Debugging">depurem remotamente as instâncias do Firefox</a>.</dd>
+</dl>
diff --git a/files/pt-br/tools/shader_editor/index.html b/files/pt-br/tools/shader_editor/index.html
new file mode 100644
index 0000000000..71bb9c0d74
--- /dev/null
+++ b/files/pt-br/tools/shader_editor/index.html
@@ -0,0 +1,56 @@
+---
+title: Shader Editor
+slug: Tools/Shader_Editor
+translation_of: Tools/Shader_Editor
+---
+<div>{{ToolsSidebar}}</div><p>O Shader Editor <span id="result_box" lang="pt"><span class="hps">permite que você veja</span> <span class="hps">e edite os</span> <span class="hps">vértices e <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shaders</a></span> <span class="hps">usados pela</span></span> <a href="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+
+<p>{{EmbedYouTube("hnoKqFuJhu0")}}</p>
+
+<p><span id="result_box" lang="pt"><span class="hps">A WebGL</span> <span class="hps">é uma</span> <span class="hps">API</span> <span class="hps">JavaScript</span> <span class="hps">para renderizar</span> <span class="hps">gráficos 3D</span> <span class="hps">interativos</span> <span class="hps">e</span> <span class="hps">gráficos 2D</span> <span class="hps">no navegador</span> <span class="hps">sem usar</span> <span class="hps">plugins.</span></span> <span id="result_box" lang="pt"><span class="hps">Com</span> <span class="hps">WebGL</span> <span class="hps">você fornece</span> <span class="hps">dois</span> <span class="hps">programas</span> <span class="atn hps">chamados de "</span><span>shaders</span><span>"</span> <span class="hps">que são chamados</span> <span class="hps">na fase</span> <span class="hps">adequada do</span></span> <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">OpenGL rendering pipeline</a>: o <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, <span id="result_box" lang="pt"><span class="hps">que fornece</span> <span class="hps">as coordenadas para</span> <span class="hps">cada vértice</span> <span class="hps">a ser desenhado</span><span>,</span> <span class="hps">e um</span></span> <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a>, <span id="result_box" lang="pt"><span class="hps">que proporciona</span> <span class="hps">a cor</span> <span class="hps">para cada pixel</span> <span class="hps">a ser desenhado.</span></span><br>
+ <br>
+ Esses shaders são escritos em OpenGL Shading Language, ou <a href="https://www.opengl.org/documentation/glsl/">GLSL</a>. Na WebGL eles podem ser incluídos em uma página de várias maneiras: com texto escrito em JavaScript, como arquivos separados inclusos usando a tag &lt;script&gt;, ou obtidos do servidos como somente texto (plain text). O código JavaScript em execução na página então os envia para compilação usando as API de WebGL, e eles são executados na GPU do equipamento (computador).</p>
+
+<p>Com o Shader Editor você pode examinar e editar o fonte dos vertices e dos fragment shaders.</p>
+
+<p>Veja aqui outro video mostrando como usar o Shader Editor em aplicações complexas (nesse caso, a demo da <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>):</p>
+
+<p>{{EmbedYouTube("YBErisxQkPQ")}}</p>
+
+<h2 id="Abrindo_o_Shader_Editor">Abrindo o Shader Editor</h2>
+
+<p>O Shader Editor está desabilitado por padrão. Para habilitar abra os <a href="/pt-BR/docs/Tools_Toolbox#Settings">ajustes da Caixa de Ferramentas</a> (<a href="/en-US/docs/Tools_Toolbox#Settings">Toolbox settings</a>) e marque a caixa "Shader Editor" no item "Ferramentas de Desenvolvimento Padrão do Firefox". Agora você verá "Shader Editor" na barra de ferramentas. Clique no item e o Shader Editor vai abrir.<br>
+ <br>
+ A princípio você verá apenas uma janela vazia com somente um botão pedindo para você recarregar a página:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Para iniciar, carregue uma página que crie um contexto WebGL e carregue um programa nela. A figuras abaixo são da demo da <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p>
+
+<p>Você verá uma janela dividida em três paineis: uma lista de todos os programas em GLSL do lado esquerdo, o vertex shader para o programa atualmente selecionado no meio, e o fragment shader para o programa atualmente selecionado a direita:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Gerenciando_os_programas">Gerenciando os programas</h2>
+
+<p>O painel da esquerda lista toos os programas em uso no momento por um contexto WebGL. Se você parar o mouse sobre um entrada da lista, a parte desenhada por aquele programa é destacada em vermelho:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">Se você clicar no ícone de olho ao lado esquerdo da entrada do programa, esse programa é desabilitado. Isso é útil para que você se concentre em certos shaders ou oculte as figuras que se sobrepõem:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">Se você clicar na entrada, o vertex e o fragment shaders ligados a ela são exibidos nos outros dois painéis, e voce pode editá-los.</p>
+
+<h2 id="Editando_shaders">Editando shaders</h2>
+
+<p>Os painéis do meio e da direita mostram o vertex e os fragment shaders para o programa atualmente selecionado.<br>
+ <br>
+ Você pode editar esses programas e ver os resultados na próxima vez o contexto WebGL for redesenhado (por exemplo, no próxmo quadro da animação). Por exemplo, você pode modificar as cores:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">O editor destaca os erros de sintáxe em seu código:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">Se você parar o mouse sobre o 'x' que aparece perto de uma linha que contem algum erro, você vai ver mais detalhes sobre o problema:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p> </p>
+
+<p><strong><u>Nota</u></strong>: a palavra <strong>entrada </strong>no texto acima refere-se a um item em uma lista.</p>
diff --git a/files/pt-br/tools/simulador_firefox_os_1.1/index.html b/files/pt-br/tools/simulador_firefox_os_1.1/index.html
new file mode 100644
index 0000000000..8b710a1cea
--- /dev/null
+++ b/files/pt-br/tools/simulador_firefox_os_1.1/index.html
@@ -0,0 +1,359 @@
+---
+title: Simulador Firefox OS 1.1
+slug: Tools/Simulador_Firefox_OS_1.1
+tags:
+  - Ferramentas
+  - Firefox OS
+  - Guia(2)
+  - Guía
+translation_of: Tools/Firefox_OS_1.1_Simulator
+---
+<div>{{ToolsSidebar}}</div><div id="doc-content">
+<div class="page-content boxed">
+<div class="warning">
+<p>Esta página descreve o "velho" Firefox OS Simulator. Você deve apenas usar se você desenvolve apps para Firefox 1.1, e que só pode ser instalado no Firefox 24 ou Firefox 25.</p>
+
+<p>Se você desenvolve apps para Firefox OS 1.2 ou superior, invés disso você precisa <a href="/en-US/Firefox_OS/Using_the_App_Manager">usar o App Manager</a>.</p>
+
+<p>Se você precisar de ajuda, tente perguntar na lista ou em <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools mailing list</a> ou em <a href="irc://irc.mozilla.org/#devtools">#devtools on irc.mozilla.org</a>.</p>
+</div>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>O complemento Firefox OS Simulator é uma ferramenta que permite você testar e depurar seu <a href="https://developer.mozilla.org/en-US/docs/Apps" title="/en-US/docs/Apps">aplicativo Firefox OS</a> no seu desktop. O ciclo de codificar-testar-depurar é muito mais rápido com o simulador do que com um dispositivo real, e claro, você não precisa de um dispositivo real para usar.</p>
+
+<p>Essencialmente, o complemento Simulador consiste em:</p>
+
+<ul>
+ <li><strong>o Simulador</strong>: inclui o <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/en-US/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Firefox OS desktop client</a>, que é uma versão das camadas superiores do <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS" title="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> que funciona em seu desktop. O Simulador também inclui alguns <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-toolbar" title="#Simulator-toolbar">recursos adicionais de emulação</a> que não estão nas compilações padrões do Firefox OS para desktop.</li>
+ <li><strong>o Painel de Instrumentos</strong>: uma ferramenta embarcado pelo<span id="result_box" lang="pt"><span class="hps"> </span><span class="hps">Firefox</span> <span class="hps">que permite</span> <span class="hps">iniciar e parar o</span></span> Simulador e instalar, desinstalar, e depurar aplicativos rodando nele. O Painel de Instrumentos <span id="result_box" lang="pt"><span class="hps">também lhe ajuda a</span> subir(?) <span class="hps">aplicativos para</span> <span class="hps">um dispositivo real</span></span>, <span class="short_text" id="result_box" lang="pt"><span class="hps">e</span> checar os<span class="hps"> </span></span>manifests<span class="short_text" lang="pt"> do aplicativo <span class="hps">para problemas comuns</span></span>.</li>
+</ul>
+
+<p>O screenshot abaixo mostra uma sessão de depuração usando o Simulador.</p>
+
+<p>The Dashboard is on the top right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p>
+
+<p>This guide covers the following topics:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Installing" title="#Installing">how to install the Simulator add-on</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Adding-updating-removing" title="#Adding-updating-removing">how to add, remove, and refresh apps</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Manifest-validation" title="#Manifest-validation">manifest validation</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Running-the-Simulator" title="#Running-the-Simulator">how to run the Simulator</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Attaching-developer-tools" title="#Attaching-developer-tools">how to connect developer tools such as the JS debugger to apps running in the Simulator</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-receipts" title="#Simulator-receipts">how to get test receipts for a paid app</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Push-to-device" title="#Push-to-device">how to push apps to a connected device</a></li>
+ <li><a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Limitations" title="#Limitations">the limitations of the Simulator compared with a real Firefox OS device</a></li>
+</ul>
+
+<div class="note">For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the <a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="/en-US/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Simulator Walkthrough</a> page.</div>
+
+<h2 id="Installing_the_Simulator_add-on"><a name="Installing">Installing the Simulator add-on</a></h2>
+
+<p>The Simulator is packaged and distributed as a Firefox add-on. To install it:</p>
+
+<ol>
+ <li>Using Firefox, go to <a href="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/">the Simulator's page on addons.mozilla.org</a>.</li>
+ <li>Click "Add to Firefox".</li>
+ <li>Once the add-on has downloaded you will be prompted to install it: click "Install Now".</li>
+</ol>
+
+<p>Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. If it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.<br>
+ <br>
+ Firefox will periodically check for newer versions of the Simulator add-on once it's installed, updating it automatically.</p>
+
+<p>The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="display: block; margin-left: auto; margin-right: auto;"><br>
+ The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like: <img alt="" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png" style="height: 650px; width: 1212px;"></p>
+
+<h2 id="Adding_removing_and_refreshing_apps"><a name="Adding-updating-removing">Adding, removing and refreshing apps</a></h2>
+
+<h3 id="Adding_apps">Adding apps</h3>
+
+<p>To add a <a href="https://developer.mozilla.org/en-US/docs/Apps/Packaged_apps" title="/en-US/docs/Apps/Packaged_apps">packaged app</a> to the Simulator, open the Dashboard, click "Add Directory" and select the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest" title="/en-US/docs/Apps/Manifest">manifest file</a> for your app.<br>
+ <br>
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL, so you can add any website as an app just by entering its URL.<br>
+ <br>
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Manifest-validation" title="#Manifest-validation">Manifest Validation</a> for details on what tests are run.</p>
+
+<p>The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.</p>
+
+<h3 id="Managing_apps">Managing apps</h3>
+
+<p>Once you have added an app, it will appear in the Manager's list of installed apps:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br>
+ Each entry gives us the following information about the app:</p>
+
+<ul>
+ <li>its name, taken from the manifest</li>
+ <li>its type, which will be one of "Packaged", "Hosted", or "Generated"</li>
+ <li>a link to its manifest file</li>
+ <li>the result of manifest validation</li>
+</ul>
+
+<p>It also gives us four commands:</p>
+
+<ul>
+ <li><strong>"Refresh":</strong> use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app; you will need to refresh the app to apply the changes.</li>
+ <li><strong>"Connect": </strong>use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.</li>
+ <li><strong>"Remove" ("X"):</strong> use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.</li>
+ <li><strong>"Receipt":</strong> use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.</li>
+</ul>
+
+<div class="note">
+<p><strong>Refresh App from the Simulator window</strong>: you can update and reload an app directly from the Simulator window <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-menubar" title="#Simulator-menubar">using the menubar action or its associated shortcut</a> while the app is running.</p>
+</div>
+
+<h3 id="Manifest_validation"><a name="Manifest-validation">Manifest validation</a></h3>
+
+<p>When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:</p>
+
+<ul>
+ <li>manifest errors: problems that will prevent your app from installing or running</li>
+ <li>manifest warnings: problems that may prevent your app from working properly</li>
+ <li>simulator-specific warnings: features your app is using that the Simulator doesn't yet support</li>
+</ul>
+
+<p>It summarizes the problems encountered in the entry for the app; clicking on the summary provides more details.</p>
+
+<h4 id="Manifest_errors">Manifest errors</h4>
+
+<p>The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:</p>
+
+<ul>
+ <li>the manifest does not include the mandatory "name" field</li>
+ <li>the manifest is not valid JSON</li>
+ <li>the app is a hosted app, but the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field in its manifest is <a href="https://developer.mozilla.org/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Apps/Packaged_apps#Types_of_packaged_apps">"privileged" or "certified"</a>, which are only available to packaged apps</li>
+ <li>common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)</li>
+</ul>
+
+<p>Here's the result of trying to add a manifest file with a missing "name":<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p>
+
+<h4 id="Manifest_warnings">Manifest warnings</h4>
+
+<p>The Dashboard will report the following manifest issues as warnings:</p>
+
+<ul>
+ <li>missing icons</li>
+ <li>the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square</li>
+ <li>the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is unrecognized</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> that is unrecognized</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> which will be denied</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> for which access could not be determined</li>
+</ul>
+
+<h4 id="Simulator-specific_warnings">Simulator-specific warnings</h4>
+
+<p>Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:</p>
+
+<ul>
+ <li>the <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#type" title="/en-US/docs/Apps/Manifest#type">type</a> field is "certified", but the Simulator does not yet fully support certified apps</li>
+ <li>the manifest requests a <a href="https://developer.mozilla.org/en-US/docs/Apps/Manifest#permissions" title="/en-US/docs/Apps/Manifest#permissions">permission</a> to use an API that is <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Unsupported-APIs" title="#Unsupported-APIs">not yet supported</a> by the Simulator</li>
+</ul>
+
+<h2 id="Running_the_Simulator"><a name="Running-the-Simulator">Running the Simulator</a></h2>
+
+<p>There are two different ways the Simulator may be started:</p>
+
+<ul>
+ <li>if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator</li>
+ <li>if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app</li>
+</ul>
+
+<p>Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.<br>
+ <br>
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-toolbar" title="#Simulator-toolbar">toolbar at the bottom</a> and a <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-menubar" title="#Simulator-menubar">menubar at the top</a> that contains some extra features:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p>
+
+<h3 id="Simulator_toolbar"><a name="Simulator-toolbar">Simulator toolbar</a></h3>
+
+<p>In the bottom toolbar, from left to right, there are the <strong>Home button</strong>, the <strong>Screen Rotation button</strong>, and the <strong>Geolocation button</strong>.</p>
+
+<ul>
+ <li>The <strong>Home button</strong> takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds).</li>
+ <li>The <strong>Screen Rotation button</strong> switches the device between portrait and landscape orientation. This will generate the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/en-US/docs/WebAPI/Detecting_device_orientation">orientationchange</a> event.</li>
+ <li>The <strong>Geolocation button</strong> triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates; this will be made available to your app via the <a href="https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Geolocation API</a>.</li>
+</ul>
+
+<p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="height: 309px; width: 520px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="height: 297px; width: 500px;"></a></p>
+
+<h3 id="Simulator_menubar"><a name="Simulator-menubar"></a>Simulator menubar</h3>
+
+<p>In the top menubar, you can access some useful commands to make development more efficient:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p>
+
+<ul>
+ <li><strong>File -&gt; Quit</strong> (<em>Ctrl/Cmd - Q</em>): shut down the Simulator</li>
+ <li><strong>App -&gt; Refresh</strong> (<em>Ctrl/Cmd - R</em>): refresh the running app</li>
+</ul>
+
+<p>The keyboard shortcut for the <strong>"App Refresh"</strong> command makes it possible to iteratively develop an app much like a web page:</p>
+
+<ul>
+ <li>make a change to the code (and rerun your build tool if needed, e.g., volo / yeoman / grunt)</li>
+ <li>type the keyboard shortcut to refresh the app running in the Simulator</li>
+</ul>
+
+<div class="note">
+<p><strong>"Refresh App and Clear Data" hidden shortcut:</strong> sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, <em>Shift - Ctrl/Cmd - R</em>, that will refresh the running app while clearing the following data:</p>
+
+<ul>
+ <li>
+  <p>localStorage / sessionStorage</p>
+ </li>
+ <li>
+  <p>cookies</p>
+ </li>
+ <li>
+  <p>indexedDB</p>
+ </li>
+ <li>
+  <p>appCache</p>
+ </li>
+</ul>
+</div>
+
+<h2 id="Attaching_developer_tools"><a name="Attaching-developer-tools">Attaching developer tools</a></h2>
+
+<p>You can attach developer tools to the Simulator to help debug your app. At the moment you can only attach the <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, the <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>, the <a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a>, and the <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a>, but we're working on adding support for more <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">developer tools</a>.</p>
+
+<div class="geckoVersionNote">
+<p>Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.</p>
+</div>
+
+<p>To attach developer tools to the Simulator, click the <strong>"Connect"</strong> button for an app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h3 id="Web_Console">Web Console</h3>
+
+<p>The app can log to this console using the global <a href="https://developer.mozilla.org/en-US/docs/DOM/console" title="/en-US/docs/DOM/console">console</a> object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Learn more about the Web Console.</a>)</p>
+
+<h3 id="Debugger">Debugger</h3>
+
+<p>Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Web_Console">Learn more about the Debugger.</a>)</p>
+
+<h3 id="Style_Editor">Style Editor</h3>
+
+<p>You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Web_Console">Learn more about the Style Editor.</a>)</p>
+
+<h3 id="Profiler">Profiler</h3>
+
+<p>Using the Profiler tool connected to the app, you can find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (<a href="https://developer.mozilla.org/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Web_Console">Learn more about the Profiler.</a>)</p>
+
+<h3 id="Network_Monitor">Network Monitor</h3>
+
+<p>Thanks to the new Network Monitor, you can analyze the status, headers, content, and timing of all the network requests initiated by the app through a friendly interface. (<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">Learn more about the Network Monitor.</a>)</p>
+
+<h2 id="Receipts"><a name="Simulator-receipts"></a>Receipts</h2>
+
+<p>If you are developing a paid app, you should test your receipt validation code (e.g., the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.</p>
+
+<p>Thanks to the <strong>"Receipts"</strong> menu in each app entry on the Simulator Dashboard, you can install an app with a <strong>"Valid"</strong>, <strong>"Invalid"</strong>, or <strong>"Refunded"</strong> test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p>
+
+<h2 id="Push_to_device"><a name="Push-to-device">Push to device</a></h2>
+
+<p>If you have a Firefox OS device, you can connect it to the Simulator and can then push apps from the Dashboard to the device.</p>
+
+<h3 id="Connecting_a_device">Connecting a device</h3>
+
+<p>To connect the device, follow the instructions in the guide to <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a>. Note that you don't have to install ADB, as the Simulator add-on includes it already.</p>
+
+<h3 id="Pushing_apps_to_the_device">Pushing apps to the device</h3>
+
+<p>Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note <strong>"Device connected"</strong> appear on the left of the Dashboard, and a new command appear in the entry for each app labeled <strong>"Push"</strong>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p>
+
+<p>Click <strong>"Push"</strong>, and the app will be installed on the Firefox OS device.</p>
+
+<div class="note">
+<p><strong>Manual Steps:</strong></p>
+
+<ul>
+ <li>
+  <p>Once you’ve pushed the app to the device, you need to manually close and restart it again to get updated content.</p>
+ </li>
+ <li>
+  <p>If you update anything in the manifest (e.g., app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect.</p>
+ </li>
+</ul>
+</div>
+
+<h3 id="Firefox_OS_Device_Connection_Confirmation">Firefox OS Device Connection Confirmation</h3>
+
+<p>On every device reboot, the first <strong>"Push"</strong> request needs to be confirmed on the device:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="height: 480px; width: 320px;"></p>
+
+<h3 id="Troubleshooting_on_Linux">Troubleshooting on Linux</h3>
+
+<p>If you are unable to connect your device after creating udev rules, please see this <a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">bug</a>.</p>
+
+<h2 id="Limitations_of_the_Simulator"><a name="Limitations">Limitations of the Simulator</a></h2>
+
+<p>Note that the Firefox OS Simulator isn't a perfect simulation.</p>
+
+<h3 id="Hardware_limitations">Hardware limitations</h3>
+
+<p>Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.</p>
+
+<h3 id="Audiovideo_codecs">Audio/video codecs</h3>
+
+<p>The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:</p>
+
+<ul>
+ <li>MP3</li>
+ <li>AAC</li>
+ <li>H.264 (MP4)</li>
+ <li>WebM</li>
+</ul>
+
+<p>This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.</p>
+
+<h3 id="Unsupported_APIs"><a name="Unsupported-APIs">Unsupported APIs</a></h3>
+
+<p>Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/WebAPI/WebTelephony" title="/en-US/WebAPI/WebTelephony">Telephony</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebSMS" title="/en-US/docs/WebAPI/WebSMS">WebSMS</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebBluetooth" title="/en-US/docs/WebAPI/WebBluetooth">WebBluetooth</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Proximity" title="/en-US/docs/WebAPI/Proximity">Proximity</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">navigator.onLine and offline events</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration</a></li>
+</ul>
+
+<h2 id="Getting_help"><a name="Simulator-help"></a>Getting help</h2>
+
+<p><span style="line-height: 1.572;">If you have a question, try asking us on the </span><a href="https://lists.mozilla.org/listinfo/dev-developer-tools" style="line-height: 1.572;">dev-developer-tools mailing list</a><span style="line-height: 1.572;"> or on </span><a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.572;">#devtools on irc.mozilla.org</a><span style="line-height: 1.572;">.</span></p>
+
+<h3 id="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging"></a>How to enable verbose logging</h3>
+
+<p>Use about:config to create the preference <a href="mailto:extensions.r2d2b2g@mozilla.org.sdk.console.logLevel">extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</a>, set it to the integer value 0, and disable/reenable the add-on. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).</p>
+</div>
+</div>
+
+<div class="note">
+<p> </p>
+</div>
+
+<p> </p>
diff --git a/files/pt-br/tools/web_console/helpers/index.html b/files/pt-br/tools/web_console/helpers/index.html
new file mode 100644
index 0000000000..2ef39bc366
--- /dev/null
+++ b/files/pt-br/tools/web_console/helpers/index.html
@@ -0,0 +1,55 @@
+---
+title: Web Console Helpers
+slug: Tools/Web_Console/Helpers
+translation_of: Tools/Web_Console/Helpers
+---
+<div>{{ToolsSidebar}}</div><div>{{ gecko_minversion_header("2.0") }}</div>
+
+<h2 id="Os_comandos">Os comandos</h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">A linha de comando</span> <span class="hps">JavaScript</span> <span class="hps">fornecida pelo</span> <span class="hps">Console</span> <span class="hps">Web</span> <span class="hps">oferece algumas</span> <span class="hps">funções auxiliares</span> <span class="hps">embutidos</span> <span class="hps">que tornam certas</span> <span class="hps">tarefas mais fáceis</span><span>.</span></span></p>
+
+<dl>
+ <dt><code>$()</code></dt>
+ <dd><strong><span style="background-color: #ffff00;">FX16</span><span style="background-color: #ffff00;">+</span></strong> <span id="result_box" lang="pt"><span class="hps">Procura uma</span> <span class="hps">seqüência de</span> <span class="hps">seletor</span> <span class="hps">CSS</span><span>, retornando o</span> <span class="hps">primeiro elemento</span> <span class="hps">que corresponda</span><span>.</span> <span class="hps">equivalente a</span></span> {{ domxref("document.querySelector()") }} ou <span class="short_text" id="result_box" lang="pt"><span class="hps">chama a</span> <span class="hps">função de $</span> <span class="hps">na página,</span> <span class="hps">se ele existir.</span></span></dd>
+ <dd><strong><span style="background-color: #ffff00;">FX4 to FX16</span></strong> <span class="short_text" id="result_box" lang="pt"><span class="hps">Procura uma</span> <span class="hps">string como um</span> <span class="hps">ID</span> <span class="hps">de um nó</span> <span class="hps">DOM</span><span>;</span></span> <span class="short_text" id="result_box" lang="pt"><span class="hps">este</span> <span class="hps">é um atalho para</span></span> {{ domxref("document.getElementById()") }} <span class="short_text" id="result_box" lang="pt"><span class="hps">ou</span> <span class="hps">chama a</span> <span class="hps">função de $</span> <span class="hps">na página,</span> <span class="hps">se ele existir.</span></span></dd>
+ <dt><code>$$()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Procura uma</span> <span class="hps">seqüência de</span> <span class="hps">seletor</span> <span class="hps">CSS</span><span>, retornando</span> <span class="hps">uma lista de</span> <span class="hps">DOM</span> <span class="hps">nós que correspondem</span><span>.</span> <span class="hps">Este</span> <span class="hps">é um atalho para</span></span> {{ domxref("document.querySelectorAll()") }}.</dd>
+ <dt><code>$0</code></dt>
+ <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">O elemento</span> <span class="hps">atualmente</span> <span class="hps">inspecionados</span> <span class="hps">na página.</span></span></dd>
+ <dt><code>$x()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Avaliar</span> <span class="hps">uma expressão XPath</span> <span class="hps">e</span> <span class="hps">retornar um array de</span> <span class="hps">nós correspondentes</span><span>.</span></span></dd>
+ <dt><code>keys()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Dado um objeto</span><span>,</span> <span class="hps">retorna uma lista</span> <span class="hps">de keys</span> <span class="hps">(ou</span> <span class="hps">nomes de propriedade</span><span>)</span> <span class="hps">no objeto.</span> <span class="hps">Este</span> <span class="hps">é um atalho para</span> <span class="hps">object.keys</span><span>.</span></span></dd>
+ <dt><code>values()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Dado um objeto</span><span>,</span> <span class="hps">retorna uma lista de</span> <span class="hps">valores</span> <span class="hps">nesse objeto</span><span>,</span> <span class="hps">serve como</span> <span class="alt-edited hps">um complemento para</span> <span class="atn hps">keys (</span><span>)</span><span>.</span></span></dd>
+ <dt><code>clear()</code></dt>
+ <dd><span class="short_text" id="result_box"><span style="background-color: #ffffff;" title="Clears the console output area.">Limpa a área de saída do console.</span></span></dd>
+ <dt><code>inspect()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Dado um objeto</span><span>,</span> <span class="hps">abre</span> <span class="hps">o inspetor de</span> <span class="hps">objeto</span> <span class="hps">para aquele objeto.</span></span></dd>
+ <dt><code>pprint()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Formata o</span> <span class="hps">valor especificado</span> <span class="hps">de forma</span> <span class="hps">legível</span><span>, o que</span> <span class="hps">é útil</span> <span class="hps">para despejar</span> <span class="hps">o conteúdo de</span> <span class="hps">objetos</span> <span class="hps">e arrays</span><span>.</span></span></dd>
+ <dt><code>help()</code></dt>
+ <dd><span id="result_box" lang="pt"><span class="hps">Exibe</span> <span class="hps">o texto de ajuda</span><span>.</span> <span class="hps">Na verdade,</span> <span class="hps">em um</span> <span class="hps">exemplo</span> <span class="hps">maravilhoso</span> <span class="hps">de</span> <span class="hps">recursão,</span> <span class="hps">ele vai lhe trazer</span> <span class="hps">a esta página.</span></span></dd>
+</dl>
+
+<h2 id="Exemplos"><span class="short_text" id="result_box" lang="pt"><span class="hps">Exemplos</span></span></h2>
+
+<h3 id="Exemplo_Olhando_para_o_conteúdo_de_um_nó_DOM">Exemplo: <span class="short_text" id="result_box" lang="pt"><span class="hps">Olhando para</span> <span class="hps">o conteúdo de um</span> <span class="hps">nó DOM</span></span></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">Digamos que</span> <span class="hps">você tem</span> <span class="hps">um nó</span> <span class="hps">DOM</span> <span class="hps">com o</span> <span class="atn hps">ID "</span><span>título</span><span>"</span><span>.</span> <span class="hps">Na verdade, esta</span> <span class="hps">página que você está</span> <span class="hps">lendo agora</span> <span class="hps">tem um,</span> <span class="hps">assim você pode</span> <span class="hps">abrir o</span> <span class="hps">Web</span> <span class="hps">Console</span> <span class="hps">e tentar</span> <span class="hps">isso agora.</span><br>
+ <br>
+ <span class="hps">Vamos dar</span> <span class="hps">uma olhada</span> <span class="hps">no conteúdo</span> <span class="hps">desse nó</span><span>, usando as funções</span> <span class="hps">$()</span> <span class="hps">e inspect</span><span class="hps">()</span> <span class="hps">:</span></span></p>
+
+<pre><code>inspect($("#title"))</code></pre>
+
+<p><span id="result_box" lang="pt"><span class="hps">Isso abre</span> <span class="hps">automaticamente o</span> <span class="hps">inspetor de</span> <span class="hps">objeto</span><span>,</span> <span class="hps">mostrando-lhe</span> <span class="hps">o conteúdo do</span> <span class="hps">nó</span> <span class="hps">DOM</span> <span class="hps">que coincide com o</span> <span class="hps">CSS</span> <span class="atn hps">selector "</span><span># title</span><span>"</span><span>, que é</span><span>, claro, o</span> <span class="hps">elemento com</span> <span class="atn hps">ID "</span><span>título</span><span>"</span><span>.</span></span></p>
+
+<h3 id="Exemplo_despejar_o_conteúdo_de_um_nó_DOM"><span class="short_text" id="result_box" lang="pt"><span class="hps">Exemplo:</span> <span class="hps">despejar o</span> <span class="hps">conteúdo de um</span> <span class="hps">nó</span> <span class="hps">DOM</span></span></h3>
+
+<p><span id="result_box" lang="pt"><span class="hps">Isso é</span> <span class="hps">muito bom</span> <span class="hps">se acontecer de você</span> <span class="hps">estar sentado</span> <span class="hps">no</span> <span class="hps">navegador</span> <span class="hps">exibindo</span> <span class="hps">algum problema</span><span>, mas vamos</span> <span class="hps">dizer que você está</span> <span class="hps">depurando remotamente</span> <span class="hps">para um usuário,</span> <span class="hps">e precisa de um</span> <span class="hps">olhar para</span> <span class="hps">o conteúdo de um</span> <span class="hps">nó.</span> <span class="hps">Você pode ter seu</span> <span class="hps">usuário</span> <span class="hps">abrir o</span> <span class="hps">Web</span> <span class="hps">Console</span> <span class="hps">e despejar</span> <span class="hps">o conteúdo do</span> <span class="hps">nó</span> <span class="hps">para o</span> <span class="hps">registro,</span> <span class="hps">em seguida, copiar</span> <span class="hps">e</span> <span class="hps">colá-lo em</span> <span class="hps">um e-mail</span> <span class="hps">para você,</span> <span class="hps">utilizando a função</span> <span class="hps">pprint</span> <span class="hps">():</span></span></p>
+
+<pre>pprint($("#title"))
+</pre>
+
+<p><span id="result_box" lang="pt"><span class="hps">Este</span> <span class="alt-edited hps">expele</span> <span class="hps">o conteúdo do</span> <span class="hps">nó</span> <span class="hps">para que você possa</span> <span class="hps">dar uma olhada.</span> <span class="hps">Claro, isso</span> <span class="hps">pode ser mais útil</span> <span class="hps">com outros</span> <span class="hps">objetos do que</span> <span class="hps">um nó</span> <span class="hps">DOM</span><span>, mas essa é a idéia</span></span><span id="result_box" lang="pt"><span class="hps">.</span></span></p>
diff --git a/files/pt-br/tools/web_console/index.html b/files/pt-br/tools/web_console/index.html
new file mode 100644
index 0000000000..c657ba96ab
--- /dev/null
+++ b/files/pt-br/tools/web_console/index.html
@@ -0,0 +1,53 @@
+---
+title: Console Web
+slug: Tools/Web_Console
+tags:
+  - Ajuda
+  - Debugging
+  - Desenvolvimento
+  - Desenvolvimento Web
+  - Dicas
+  - Ferramentas
+  - Ferramentas Para Desenvolvimento Web
+  - NeedsTranslation
+  - Tools
+  - TopicStub
+  - Web Development
+  - 'Web Development:Tools'
+  - web console
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p><strong>O Web Console</strong></p>
+
+<ol>
+ <li>Registra informações associadas a uma página da internet: solicitações de rede, JavaScript, CSS, erros de segurança e avisos, bem como mensagens de erro, avisos e informações explicitamente registradas pelo código JavaScript em execução na página</li>
+ <li>Permite que você interaja com uma página da web, executando expressões JavaScript na página</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/pt-BR/docs/Tools/Web_Console/Opening_the_Web_Console">Abrindo o Console</a></dt>
+ <dd>Como começar a usar o Console.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Web_Console/The_command_line_interpreter">O interpretador de linhas de comando</a></dt>
+ <dd>Como interagir com uma página usando o Console.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Web_Console/Split_console">Dividir a página com o Console</a></dt>
+ <dd>Use o Console ao lado de outras ferramentas.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/pt-BR/docs/Tools/Web_Console/Console_messages">Mensagens do Console</a></dt>
+ <dd>Detalhes das mensagens de log do Console.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Web_Console/Rich_output">Saída detalhada</a></dt>
+ <dd>Veja e interaja com os itens registrados pelo Console.</dd>
+ <dt><a href="/pt-BR/docs/Tools/Web_Console/Keyboard_shortcuts">Atalhos do teclado</a></dt>
+ <dd>Referência para atalhos.</dd>
+</dl>
+</div>
+</div>
diff --git a/files/pt-br/tools/web_console/opening_the_web_console/index.html b/files/pt-br/tools/web_console/opening_the_web_console/index.html
new file mode 100644
index 0000000000..ae0c05f78e
--- /dev/null
+++ b/files/pt-br/tools/web_console/opening_the_web_console/index.html
@@ -0,0 +1,63 @@
+---
+title: Abrindo o Web Console
+slug: Tools/Web_Console/Opening_the_Web_Console
+tags:
+  - Ferramentas
+  - Navegador
+  - console
+  - web console
+translation_of: Tools/Web_Console/UI_Tour
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Para abrir o Web Console:</p>
+
+<ul>
+ <li>selecione "Web Console" no submenu Web Developer no menu do Firefox (ou no menu Ferramentas se você exibir a barra de menus ou estiver no Mac OS X)</li>
+ <li>ou pressione o atalho do teclado <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> (<kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>K</kbd> no OS X).</li>
+</ul>
+
+<p>As <a href="https://developer.mozilla.org/pt-BR/docs/Tools/DevTools_Window" title="Ferramentas">Ferramentas</a> vão aparecer na parte inferior da janela do navegador, com o Web Console ativado (é chamado apenas de "Console" nas <a href="/pt-BR/docs/Tools/DevTools_Window#Toolbar" title="Ferramentas">Ferramentas</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16999/new-console-screenshot.png"></p>
+
+<p>A interface do console da Web é dividida em três seções horizontais, detalhadas nas seções abaixo.</p>
+
+<h2 id="Barra_de_ferramentas">Barra de ferramentas</h2>
+
+<p>A barra de ferramentas na parte superior contém vários recursos:</p>
+
+<p>Lata de lixo: Clique neste ícone para limpar o conteúdo do console.<br>
+ Funil: Clique neste ícone para filtrar as mensagens exibidas no console.<br>
+ Categorias de filtro: você pode clicar em uma categoria de filtro (como Erros, Avisos, CSS ou XHR) para exibir apenas esses tipos de mensagens.<br>
+ Configurações (menu "engrenagem"): novo no Firefox 71, você pode clicar no ícone de engrenagem para acessar o novo menu de configurações, onde é possível ativar e desativar os seguintes recursos:<br>
+ Persistir logs: quando ativado, o console não limpa na recarga da página ou no carregamento da nova página.<br>
+ Mostrar carimbos de data / hora: quando ativado, os carimbos de hora são mostrados no lado esquerdo de cada linha da mensagem para dizer quando as mensagens foram registradas.<br>
+ Agrupar mensagens semelhantes: quando ativado, tipos semelhantes de mensagens são agrupados.</p>
+
+
+
+<h2 id="Painel_de_exibição_de_mensagens">Painel de exibição de mensagens</h2>
+
+<p>É aqui que as mensagens aparecem, tanto as geradas pelo código na página quanto as geradas pelos comandos inseridos na linha de comandos.</p>
+
+<p>Consulte Mensagens do console para obter mais detalhes sobre o que as mensagens podem conter.</p>
+
+<p>        </p>
+
+<ul>
+ <li>
+  <div class="blockIndicator note">
+  <p><strong style="">Observação:</strong><span style=""> Você pode limpar o conteúdo do Console pressionando o atalho </span><kbd>Ctrl</kbd><span style=""> + </span><kbd>L</kbd><span style=""> (Windows, macOS, e Linux) ou </span><kbd>Cmd</kbd><span style=""> + </span><kbd>K</kbd><span style=""> no macOS.</span></p>
+  </div>
+ </li>
+</ul>
+
+
+
+<h2 id="Linha_de_comando">Linha de comando</h2>
+
+<p><br>
+ A linha de comando começa com colchetes de ângulo duplo (&gt;&gt;). Use-o para inserir expressões JavaScript.</p>
+
+<p>No Firefox 71 em diante, existe um novo ícone de "painel de divisão" no lado direito da linha de comando - clicar nele abrirá o novo modo de várias linhas do console.</p>
diff --git a/files/pt-br/tools/web_console/the_command_line_interpreter/index.html b/files/pt-br/tools/web_console/the_command_line_interpreter/index.html
new file mode 100644
index 0000000000..80eb0f4c92
--- /dev/null
+++ b/files/pt-br/tools/web_console/the_command_line_interpreter/index.html
@@ -0,0 +1,183 @@
+---
+title: O interpretador de entrada JavaScript
+slug: Tools/Web_Console/The_command_line_interpreter
+translation_of: Tools/Web_Console/The_command_line_interpreter
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Você pode interpretar expressões JavaScript em tempo real usando o intérprete fornecido pelo console da web. Possui dois modos: entrada de linha única e entrada de várias linhas.</p>
+
+<h2 id="Modo_linha-simples">Modo linha-simples</h2>
+
+<p>Para entrada em linha única, você pode digitar expressões JavaScript no campo na parte inferior do log do console, no prompt &gt;&gt;.</p>
+
+<p><img alt="The Web Console, showing single-line mode" src="https://mdn.mozillademos.org/files/16965/web_console_single.png" style="display: block; height: 704px; margin-left: auto; margin-right: auto; width: 1952px;"></p>
+
+<p>Para inserir expressões no modo de linha única, digite no prompt e pressione <kbd>Enter</kbd>. Para inserir expressões com várias linhas, pressione <kbd>Shift</kbd> + <kbd>Enter</kbd> após digitar cada linha e, em seguida, <kbd>Enter</kbd> para executar todas as linhas inseridas.</p>
+
+<p>A expressão digitada é ecoada no prompt de entrada, seguido pelo resultado.</p>
+
+<p>Se sua entrada não parece estar completa quando você pressiona <kbd>Enter</kbd>, o console trata isso como <kbd>Shift</kbd> + <kbd>Enter</kbd>, permitindo que você termine sua entrada.</p>
+
+<p>Por exemplo, se você digita:</p>
+
+<pre class="brush: js notranslate">function foo() {</pre>
+
+<p>e, em seguida, <kbd>Enter</kbd>, o console não executa a entrada imediatamente, mas se comporta como se você tivesse pressionado <kbd>Shift</kbd> + <kbd>Enter</kbd>, para que você possa terminar de inserir a definição da função.</p>
+
+<h2 id="Modo_linhas-multíplas">Modo linhas-multíplas</h2>
+
+<p>Para entrada em várias linhas, clique no ícone "painel dividido" no lado direito do campo de entrada em linha única ou pressione <kbd>Ctrl</kbd> + <kbd>B</kbd> (Windows / Linux) ou <kbd>Cmd</kbd> + <kbd>B</kbd> (macOS). O painel de edição de várias linhas é aberto no lado esquerdo do console da Web.</p>
+
+<p><img alt="Web Console in multi-line mode" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1946px;"></p>
+
+<p>Você pode inserir várias linhas de JavaScript por padrão neste modo, pressionando <kbd>Enter</kbd> após cada uma. Para executar o snippet que está atualmente no painel de edição, clique no botão <strong>Executar</strong> ou pressione <kbd>Ctrl</kbd> + <kbd>Enter</kbd> (ou <kbd>Cmd</kbd> + <kbd>Return</kbd> no MacOS). O trecho é ecoado no prompt de entrada (no painel do lado direito), seguido pelo resultado. Você também pode selecionar um intervalo de linhas no painel de edição e executar apenas o código nessas linhas.</p>
+
+<p>A partir do Firefox 76, se o trecho de código tiver mais de cinco linhas, apenas as cinco primeiras serão ecoadas no console, precedidas por um triângulo de divulgação (ou "twistie") e seguidas de reticências (…). Clique em qualquer lugar na área que contém o código ecoado para mostrar todo o trecho; clique novamente nessa área para recolhê-lo.</p>
+
+<p>Você pode abrir arquivos no modo de várias linhas e salvar o conteúdo atual do painel de edição em um arquivo.</p>
+
+<ul>
+ <li>Para abrir um arquivo, pressione <kbd>Ctrl</kbd> + <kbd>O</kbd> (<kbd>Cmd</kbd> + <kbd>O</kbd> no MacOS). Uma caixa de diálogo de arquivo é aberta para que você possa selecionar o arquivo a ser aberto.</li>
+ <li>Para salvar o conteúdo do painel de edição, pressione <kbd>Ctrl</kbd> + <kbd>S</kbd> (<kbd>Cmd</kbd> + <kbd>S</kbd> no MacOS). Uma caixa de diálogo de arquivo é aberta para que você possa especificar o local para salvar.</li>
+</ul>
+
+<p>Para voltar ao modo de linha única, clique no ícone <strong>X</strong> na parte superior do painel de edição de várias linhas ou pressione <kbd>Ctrl</kbd> + <kbd>B</kbd> (Windows / Linux) ou <kbd>Cmd</kbd> + <kbd>B</kbd> (MacOS).</p>
+
+<h2 id="Acessando_variáveis">Acessando variáveis</h2>
+
+<p>Você pode acessar variáveis definidas na página, variáveis internas como <strong>janela</strong> e variáveis adicionadas por bibliotecas JavaScript como <em>jQuery</em>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Autocomplemento">Autocomplemento</h2>
+
+<p>O editor foi preenchido automaticamente: insira as primeiras letras e um pop-up aparecerá com possíveis conclusões:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p>
+
+<p>Pressione <kbd>Enter</kbd>, <kbd>Tab</kbd> ou a tecla de seta para a direita para aceitar a sugestão, use as setas para cima / para baixo para ir para uma sugestão diferente ou continue digitando se não gostar de nenhuma das sugestões.</p>
+
+<p>As sugestões de preenchimento automático do console não diferenciam maiúsculas de minúsculas.</p>
+
+<p>O console sugere conclusões do escopo do quadro de pilha em execução no momento. Isso significa que, se você atingir um ponto de interrupção em uma função, será preenchido automaticamente para objetos locais para a função.</p>
+
+<p>Você também recebe sugestões de preenchimento automático para elementos da matriz:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Você pode ativar ou desativar o preenchimento automático por meio do menu Configurações ("engrenagem") na barra de ferramentas do console da web. O menu <strong>Ativar preenchimento automático</strong> tem uma marca de seleção ao lado quando o recurso está ativado, que está ausente quando está desativado. Selecione o menu para alterar o estado.</p>
+
+<h2 id="Avaliação_instantânea">Avaliação instantânea</h2>
+
+<div class="blockIndicator note">
+<p>Esse recurso está disponível no Firefox Nightly, nas versões rotuladas 74 e posterior.</p>
+</div>
+
+<p>Quando o recurso "avaliação instantânea" está ativado, o intérprete exibe os resultados das expressões enquanto você as digita no modo de linha única. Observe que o resultado pode ser uma mensagem de erro. Expressões que têm efeitos colaterais não são avaliadas.</p>
+
+<p>Você pode ativar ou desativar a avaliação instantânea através do menu Configurações ("engrenagem") na barra de ferramentas do Console da Web. A <strong>avaliação instantânea</strong> do menuitem tem uma marca de seleção ao lado quando o recurso está ativado, que está ausente quando está desativado. Selecione o menu para alterar o estado.</p>
+
+<h2 id="Contexto_de_execução">Contexto de execução</h2>
+
+<p>O código que você executou se torna parte do contexto de execução, independentemente do modo de edição em que você estava quando o executou. Por exemplo, se você digitar uma definição de função no editor de várias linhas e clicar em <strong>Executar</strong>, poderá alternar para o modo de linha única e ainda usar sua função.</p>
+
+<h2 id="Realce_de_sintaxe">Realce de sintaxe</h2>
+
+<p><img alt="Console output showing syntax highlighting" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p>
+
+<p>O texto digitado possui uma sintaxe destacada assim que você digitou o suficiente para o marca-texto analisá-lo e inferir o significado das "palavras".</p>
+
+<p>A saída é destacada também onde apropriado.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> O realce da sintaxe não é visível no seu navegador se os recursos de acessibilidade estiverem ativados.</p>
+</div>
+
+<h2 id="Histórico_de_execução">Histórico de execução</h2>
+
+<p>O intérprete lembra as expressões que você digitou. Para voltar e avançar no seu histórico:</p>
+
+<ul>
+ <li>No modo de linha única, use as setas para cima e para baixo.</li>
+ <li>No modo multilinhas, use os ícones <strong>⋀</strong> e <strong>V</strong> na barra de ferramentas do painel de edição.</li>
+</ul>
+
+<p>O histórico de expressões é mantido nas sessões. Para limpar o histórico, use a função auxiliar <strong>clearHistory ()</strong>.</p>
+
+<p>Você pode iniciar uma pesquisa reversa através do histórico de expressões, da mesma forma que no bash no Linux e Mac ou no PowerShell no Windows. No Windows e Linux, pressione <kbd>F9</kbd>. No Mac, pressione <kbd>Ctrl</kbd> + <kbd>R</kbd> (nota: não <kbd>Cmd</kbd> + <kbd>R</kbd>!) Para iniciar a pesquisa reversa.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p>
+
+<p>Digite o texto que deseja pesquisar na caixa de entrada na parte inferior do console. Comece a digitar parte da expressão que você está procurando e a primeira correspondência será exibida no console. Digitar repetidamente <kbd>F9</kbd> no Windows e Linux (<kbd>Ctrl</kbd> + <kbd>R</kbd> no Mac) alterna entre as correspondências.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p>
+
+<p>Depois de iniciar a pesquisa reversa, você pode usar <kbd>Shift</kbd> + <kbd>F9</kbd> no Windows ou Linux (<kbd>Ctrl</kbd> + <kbd>S</kbd> no Mac) para pesquisar na lista de correspondências. Você também pode usar os ícones <kbd>⋀</kbd> e <kbd>⋁</kbd> na barra de pesquisa de expressões.</p>
+
+<p>Quando encontrar a expressão desejada, pressione <kbd>Enter</kbd> (<kbd>Return</kbd>) para executar a instrução.</p>
+
+<h2 id="Trabalhando_com_iframes">Trabalhando com iframes</h2>
+
+<p>Se uma página contiver iframes incorporados, você poderá usar a função <strong>cd ()</strong> para alterar o escopo do console para um iframe específico e executar as funções definidas no documento hospedado por esse iframe. Existem três maneiras de selecionar um iframe usando <strong>cd ()</strong>:</p>
+
+<p>Você pode passar o elemento DOM iframe:</p>
+
+<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
+cd(frame);</pre>
+
+<p>Você pode passar um seletor CSS que corresponda ao iframe:</p>
+
+<pre class="brush: js notranslate">cd("#frame1");</pre>
+
+<p>Você pode passar o objeto de janela global do iframe:</p>
+
+<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+</pre>
+
+<p>Para alternar o contexto novamente para a janela de nível superior, chame <strong>cd ()</strong> sem argumentos:</p>
+
+<pre class="brush: js notranslate">cd();</pre>
+
+<p>Por exemplo, suponha que tenhamos um documento que incorpore um iframe:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>O iframe define uma nova função:</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;script&gt;
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   &lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Você pode alternar o contexto para o iframe assim:</p>
+
+<pre class="brush: js notranslate">cd("#frame1");</pre>
+
+<p>Agora você verá que o documento da janela global é o iframe:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">E você pode chamar a função definida no iframe:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>
+
+<h2 id="Comandos_auxiliares">Comandos auxiliares</h2>
+
+<p>{{ page("en-US/docs/Tools/Web_Console/Helpers", "The commands") }}</p>
diff --git a/files/pt-br/tools/webide/index.html b/files/pt-br/tools/webide/index.html
new file mode 100644
index 0000000000..155c119f26
--- /dev/null
+++ b/files/pt-br/tools/webide/index.html
@@ -0,0 +1,271 @@
+---
+title: WebIDE
+slug: Tools/WebIDE
+tags:
+  - pt-br
+translation_of: Archive/WebIDE
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<div>O WebIDE está disponível a partir do Firefox 34 em diante. </div>
+</div>
+
+<div class="summary">
+<div>O WebIDE é o substituto para o App Manager. Como o <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>, ele lhe permite executar e depurar os aplicativos do <a href="/en-US/Firefox_OS">Firefox OS</a> usando o <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> ou um dispositivo <span style="line-height: 1.5;">Firefox OS </span><span style="line-height: 1.5;">real . </span></div>
+
+<div> </div>
+
+<div>No entanto, ele também oferece um ambiente de edição para que você possa criar e desenvolver aplicativos do Firefox OS, incluindo uma exibição em árvore de todos os arquivos em seu aplicativo com a capacidade de editá-los e salvá-los, e dois modelos de aplicativos para ajudar você a começar.</div>
+
+<div> </div>
+
+<div>Finalmente, WebIDE permite conectar as ferramentas de <a href="https://developer.mozilla.org/en-US/docs/Tools" style="font-weight: bold; background-color: rgb(244, 247, 248);">Firefox para Desenvolvedores</a> a uma série de outros navegadores, incluindo o Firefox para Android, Chrome no Android, e Safari no iOS. Veja a página de <a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging" style="font-weight: bold; background-color: rgb(244, 247, 248);">Depuração Remota</a><strong style="background-color: #f4f7f8; font-weight: bold;"> </strong> para obter instruções sobre como se conectar a um navegador específico.</div>
+</div>
+
+<p>{{EmbedYouTube("2xmj4W8O3E4")}}</p>
+
+<p><span style="line-height: 1.5;">Com a WebIDE, você primeiro deve </span><a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes" style="line-height: 1.5;">configurar um ou mais runtimes (tempo de execução)</a><span style="line-height: 1.5;">. Um runtime  é um ambiente no qual você vai executar e depurar o aplicativo. Um runtime pode ser um dispositivo Firefox OS conectado a um Desktop através de USB, ou poderia ser um Firefox OS Simulator instalado no próprio desktop.</span></p>
+
+<p><span style="line-height: 1.5;">Em seguida, você </span><a href="/en-US/docs/Tools/WebIDE#Creating_and_opening_apps" style="line-height: 1.5;">cria um aplicativo ou abre um aplicativo existente</a><span style="line-height: 1.5;">. Se você estiver criando um novo aplicativo  você inicia com um modelo que inclui a estrutura de diretórios e o mínimo que você precisa para começar, ou com um modelo mais completo que mostra como usar a API privilegiada. O WebIDE mostra os arquivos do seu aplicativo em estrutura de árvore, e você pode editar e salvá-los usando um editor embutido de código . Claro, você não tem que usar o editor embutido: você pode desenvolver seu aplicativo inteiramente fora do WebIDE, e só usá-lo para depurar ..</span></p>
+
+<p><span style="line-height: 1.5;">Finalmente, você pode </span><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Running_and_debugging_apps" style="line-height: 1.5;">instalar o aplicativo em uma das runtimes e executá-lo</a><span style="line-height: 1.5;">. Você pode, então, abrir o conjunto habitual de ferramentas de desenvolvimento - o </span><a href="/en-US/docs/Tools/Page_Inspector" style="line-height: 1.5;">Inspector</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/Tools/Web_Console" style="line-height: 1.5;">Console</a><span style="line-height: 1.5;">, </span><a href="/en-US/docs/Tools/Debugger" style="line-height: 1.5;">JavaScript Debugger</a><span style="line-height: 1.5;"> e assim por diante - para examinar e modificar o aplicativo em execução.</span></p>
+
+<h2 id="Requisitos_do_sistema">Requisitos do sistema</h2>
+
+<p>Para desenvolver e depurar aplicativos usando o WebIDE, tudo o que você precisa é o Firefox versão 33 ou superior. Para testar em um dispositivo Firefox OS real , você precisa de um dispositivo rodando o Firefox OS 1.2 ou superior, e um cabo USB.</p>
+
+<p>Você só pode usar o WebIDE visando o Firefox OS 1.2 ou superior.</p>
+
+<h2 id="Abrindo_a_WebIDE">Abrindo a WebIDE</h2>
+
+<p><span style="line-height: 1.5;">O WebIDE está escondido atrás de uma preferência. Para torná-lo visível visite </span><a href="http://kb.mozillazine.org/About:config" style="line-height: 1.5;">about:config</a><span style="line-height: 1.5;">, procure a preferência chamada </span><code style="font-style: normal; line-height: 1.5;">devtools.webide.enabled</code><span style="line-height: 1.5;"> e a defina como </span><code style="font-style: normal; line-height: 1.5;">true</code><span style="line-height: 1.5;">. Agora você verá uma nova entrada no menu  Web Developer chamado WebIDE. Clique nele e o WebIDE abre:</span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;"></p>
+
+<p><span id="result_box" lang="pt"><span class="hps">O dropdown</span> <span class="hps">na esquerda</span> <span class="hps">rotulado</span> <span class="hps">"Open</span> <span class="hps">App"</span> <span class="hps">permite abrir</span> <span class="hps">aplicativos</span> <span class="hps">existentes</span> <span class="hps">ou</span> <span class="hps">criar novos.</span> <span class="hps">O menu suspenso</span> <span class="hps">à direita chamado</span> <span class="hps">"Select</span> <span class="hps">Runtime</span>" <span class="hps">permite que você selecione</span> <span class="hps">um tempo de execução</span> <span class="hps">ou</span> <span class="hps">criação de um novo</span> <span class="hps">tempo de execução.</span></span></p>
+
+<p><span id="result_box" lang="pt"><span class="hps">Os botões no</span> <span class="alt-edited hps">meio, executam</span><span>, param e</span> <span class="hps">depuram o</span> <span class="hps">app:</span> <span class="hps">eles só</span> <span class="hps">são ativados quando</span> <span class="hps">você abrir um</span> <span class="hps">app</span> <span class="alt-edited hps">e selecionar um</span> <span class="hps">tempo de execução.</span></span></p>
+
+<p>A partir do Firefox 36, você pode alterar o tamanho da fonte em todo WebIDE usando os atalhos de teclado padrão (use Command em vez de Controle no OS X):</p>
+
+<ul>
+ <li>Ctrl + aumenta o tamanho da fonte</li>
+ <li>Ctrl - diminui o tamanho da fonte</li>
+ <li>Ctrl 0 redefine o tamanho da fonte para o padrão</li>
+</ul>
+
+<h2 id="Configurando_runtimes_(tempos_de_execução)">Configurando runtimes (tempos de execução)</h2>
+
+<p>Sob o dropdown "Select Runtime", runtimes são agrupados em três tipos:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB devices</a>: Dispositivos OS Firefox conectados por USB</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simulators</a>: instâncias do Firefox OS Simulator que você tenha instalado</li>
+ <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Custom</a>: use para conectar um tempo de execução para WebIDE usando um nome e porta arbitrária. A partir do Firefox 36, ste tipo de tempo de execução é renomeado "Other". Se você tiver o <a href="https://developer.mozilla.org/pt-BR/docs/Tools/Valence">Valence</a> add-on instalado, esta seção também irá listar os <a href="https://developer.mozilla.org/pt-BR/docs/Tools/WebIDE#Valence-enabled_runtimes">tempos de execução adicionais permitidos</a>. </li>
+</ul>
+
+<p>Da primeira vez que você clicar no dropdown, pode ser que você não veja nenhum tempo de execução:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">O restante desta seção descreverá como você pode adicionar alguns runtimes.</p>
+
+<h3 id="Conectando_um_dispositivo_Firefox_OS">Conectando um dispositivo Firefox OS</h3>
+
+<p>Antes de conectar um dispositivo OS Firefox , existem algumas configurações que você deve fazer:</p>
+
+<ul>
+ <li><strong>Veja a versão do seu Firefox OS: </strong>certifique-se que seu dispositivo está rodando o Firefox OS 1.2/Boot2Gecko 1.2 ou superior. Para verificar a versão, vá no menu de Configurações do seu dispositivo, então<code>Device Information &gt; Software</code>. Se você não tem uma versão atualizada o suficiente, encontre o seu dispositivo no <a href="/en-US/Firefox_OS/Developer_phone_guide">developer phone guide</a> e siga as instruções para atualização.</li>
+ <li><strong>Ativar a depuração remota: </strong>no menu de Configurações no dispositivo, vá em <code>Device information &gt; More information &gt; Developer</code>.
+  <ul>
+  </ul>
+
+  <ul>
+   <li>Firefox OS 1.3 and earlier: "Remote Debugging" é só um checkbox. Marque-o.</li>
+   <li>Firefox OS 1.4 and later: "Remote Debugging" pergunta se você deseja habilitar somente para ADB, ou para ADB and DevTools. Selecione "ADB and DevTools".</li>
+  </ul>
+ </li>
+ <li><strong>Desativar o bloqueio de tela do dispositivo:</strong> no menu de Configurações no dispositivo, vá em <code>Screen Lock</code> e desmarque o checkbox <code>Lock Screen</code>. Isso é uma boa idéia pois quando a tela trava, o telefone perde a conexão, significando que ele não está mais disponpivel para depuração.</li>
+ <li><strong>Se você quer depurar applicativos certificados, incluindo aplicativos embarcados</strong>: veja a sessão em <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">debugging certified apps</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Somente Linux :</strong></p>
+
+<ul>
+ <li>adicione um arquivo de regras <code>udev</code>, como documentado no passo 3 deste guia para <a href="http://developer.android.com/tools/device.html#setting-up">definindo um dispositivo Android</a>. O atributo <code>idVendor</code> usado para o Geeksphone is "05c6", e <a href="http://developer.android.com/tools/device.html#VendorIds">esta página</a> lista outros valores para <code>idVendor</code>.</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>Somente Windows:</strong></p>
+
+<ul>
+ <li>você precisa instalar os drivers, como documentado no passo 3 deste guia para <a href="http://developer.android.com/tools/device.html#setting-up">definindo um dispositivo Android</a>. Você pode encontrar drivers para dispositivos Geeksphone no <a href="http://downloads.geeksphone.com/">site Geeksphone</a>. O Windows 8 por padrão não permitirá você instalar drivers não-assinados. Veja este tutorial em <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Como instalar drivers não-assinados no Windows 8"</a>.</li>
+ <li>se o WebIDE não puder enxergar o seu dispositivoapós seguir todos os passos, você pode precisar <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">editar o arquivo adb_usb.ini</a>.</li>
+</ul>
+</div>
+
+<p>Se existem outros dispositivos Android conectados ao seu computador, desconecte todos eles. Agora conecte o dispositivo ao computador usado o USB. Você deve ver o dispositivo aparecer em "USB DEVICES":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p>
+
+<p>Se você não visualizar o seu dispositivo, veja a página de <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Solução de Problemas</a>.</p>
+
+<h3 id="Adicionando_um_Simulador">Adicionando um Simulador</h3>
+
+<p><span style="line-height: 1.5;">O <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> é uma versão das altas camadas do <span style="line-height: 1.5;">Firefox OS</span>  que simula o dispositivo Firefox OS, mas roda no desktop</span><span style="line-height: 1.5;">. Ele roda em uma janela com o mesmo tamanho de um dispositivo </span><span style="line-height: 1.5;">com Firefox OS, inclui a interface de usuário do Firefox OS e aplicativos padrão, e simula muitas APIs de dispositivos Firefox OS.</span></p>
+
+<p><span style="line-height: 1.5;">Isso significa que em muitos casos, você não precisa de um dispositivo real para testar ou depurar sua aplicação. </span></p>
+
+<p>O Simulador é grande, então não é distribuído junto com o Firefox mas como um <a href="/en-US/Add-ons">add-on</a> Firefox. Se você clicar em "Install Simulator" no menu de Runtimes, você vai para um página onde você pode instalar simuladores para várias versões do Firefox OS.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">To learn more about the Simulator, see its <a href="/en-US/docs/Tools/Firefox_OS_Simulator">documentation page</a>.</p>
+
+<h3 id="Custom_runtimes">Custom runtimes</h3>
+
+<p>With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.</p>
+
+<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p>
+
+<p>This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> command.<br>
+ <br>
+ If you then want to use WebIDE to connect as well, you should <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">disable the ADB Helper add-on</a> and connect WebIDE using the Custom runtime option, entering the host and port that you passed to <code>adb forward</code>.</p>
+
+<p>Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">See more about connecting to Firefox for Android using ADB</a>.</p>
+
+<h2 id="Selecting_a_runtime">Selecting a runtime</h2>
+
+<p>Once you've set up a runtime you can select it using the "Select Runtime" menu.</p>
+
+<ul>
+ <li>If you select a Simulator, the WebIDE launches the Simulator.</li>
+ <li>If you select a Firefox OS device the WebIDE connects to the device. On the device a dialog will ask you to confirm that you wish to connect: press "OK".</li>
+</ul>
+
+<p>Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.</p>
+
+<h3 id="Runtime_actions">Runtime actions</h3>
+
+<p>When a runtime is selected, the Runtimes dropdown menu has three extra items:</p>
+
+<ul>
+ <li><strong>Runtime Info</strong>: information on the current runtime</li>
+ <li><strong>Permissions Table</strong>: a table summarising <a href="/en-US/Apps/Build/App_permissions">app permissions</a> for the current runtime, indicating, for each API and each <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">app type</a>, whether access is allowed (✓), denied (✗), or whether the user is prompted (!)</li>
+ <li><strong>Screenshot</strong>: a command to take a screenshot from the runtime</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p>
+
+<h2 id="Creating_and_opening_apps">Creating and opening apps</h2>
+
+<p>Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p>
+
+<h3 id="Create_a_new_app">Create a new app</h3>
+
+<p>Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p>
+
+<p>Both templates are from Mozilla's <a href="https://github.com/mozilla/mortar">app template collection</a>, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.</p>
+
+<p>Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_packaged_app">Open a packaged app</h3>
+
+<p>Select "Open Packaged App..." to open a <a href="/en-US/Marketplace/Options/Packaged_apps">packaged app</a>. You'll be asked to select a directory containing the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h3 id="Open_a_hosted_app">Open a hosted app</h3>
+
+<p>Select "Open Hosted App..." to open a <a href="/en-US/Marketplace/Options/Hosted_apps">hosted app</a>. You'll be asked to enter a URL pointing to the app's <a href="/en-US/Apps/Build/Manifest">manifest</a>, and the app will be opened in the <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">project editor</a>.</p>
+
+<h2 id="Editing_apps">Editing apps</h2>
+
+<p>The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.</p>
+
+<h3 id="The_app_summary_page">The app summary page</h3>
+
+<p>When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p>
+
+<p>You can always get back to the app summary page by clicking on the root of the tree on the left.</p>
+
+<h3 id="Manifest_validation">Manifest validation</h3>
+
+<p>The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p>
+
+<p>Of course, you can edit the <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> file right in the project editor as well.</p>
+
+<h3 id="The_source_editor">The source editor</h3>
+
+<p>The WebIDE uses the <a href="http://codemirror.net/">CodeMirror</a> source editor.</p>
+
+<h4 id="Source_editor_shortcuts">Source editor shortcuts</h4>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p>
+
+<h4 id="Code_completion">Code completion</h4>
+
+<p>When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">To display autocomplete suggestions in JavaScript press Control + Space:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p>
+
+<h4 id="Inline_documentation">Inline documentation</h4>
+
+<p>The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p>
+
+<p>Clicking the <code>[docs]</code> link in the popup will take you to the MDN page for the symbol.</p>
+
+<h4 id="Saving_files">Saving files</h4>
+
+<p>For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).</p>
+
+<h3 id="Removing_projects">Removing projects</h3>
+
+<p>To remove an app from the WebIDE, go to the <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">app summary page</a> and click "Remove Project".</p>
+
+<h2 id="Running_and_debugging_apps">Running and debugging apps</h2>
+
+<p>When you're ready to run the app, you need to <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">select a runtime from the "Select Runtime" dropdown menu</a>. If you don't have any available runtimes here, find out how to add some in <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Setting up runtimes</a>.</p>
+
+<p>The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">To debug the app, click the "Pause" button and the Developer Tools <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> appears, connected to your app:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.</p>
+
+<h3 id="Debugging_certified_apps">Debugging certified apps</h3>
+
+<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p>
+
+<p><br>
+ However, to debug certified apps on a real device:</p>
+
+<ul>
+ <li>the device must be running a development build of Firefox OS 1.2+</li>
+ <li>you must enable certified app debugging</li>
+</ul>
+
+<p>To enable certified app debugging, connect to the runtime, and then, in the menu, go to <code>Runtime &gt; Runtime Info</code>. From here, if you see <code>"DevTools restricted privileges: yes</code>", that means certified apps can't be debugged. If your device can be rooted, clicking <code>"request higher privileges"</code> will enable certified apps debugging (Firefox OS will restart).</p>
+
+<p>Now in the WebIDE you should see all the certified apps on the device.</p>
+
+<h2 id="Troubleshooting">Troubleshooting</h2>
+
+<p>If you have any problems working with the WebIDE, see the <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a> page.</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/pt-br/tools/webide/trabalhando_com_cordova_apps_na_webide/index.html b/files/pt-br/tools/webide/trabalhando_com_cordova_apps_na_webide/index.html
new file mode 100644
index 0000000000..517e30a16a
--- /dev/null
+++ b/files/pt-br/tools/webide/trabalhando_com_cordova_apps_na_webide/index.html
@@ -0,0 +1,53 @@
+---
+title: Trabalhando com Cordova apps na WebIDE
+slug: Tools/WebIDE/Trabalhando_com_Cordova_apps_na_WebIDE
+tags:
+  - App
+  - Cordova
+  - FirefoxOS
+translation_of: Archive/WebIDE/Working_with_Cordova_apps_in_WebIDE
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<p>Novo no Firefox 39.</p>
+</div>
+
+<p><a href="http://cordova.apache.org/">Apache Cordova</a> permite escrever um aplicativo utilizando HTML, JavaScript, and CSS, e gerar versões nativas para plataformas como iOS e Android. Com Cordova <a href="/en-US/Apps/Tools_and_frameworks/Cordova_support_for_Firefox_OS">você também pode gerar versões do aplicativo para o Firefox OS</a>.</p>
+
+<p>A partir do Firefox 39, a WebIDE tem suporte direto para Apps desenvolvidos com Cordova, o que quer dizer que vocÊ pode utilizá-la para editar os aplicativos e gerar a versão para o Firefox OS diretamente a partir dela.</p>
+
+<p>Primeiro, crie um app Cordova:</p>
+
+<ul>
+ <li>Caso não tenha o Cordova instalado, execute o comando abaixo no terminal para instalar:
+  <pre class="brush: bash"><code>npm install -g cordova</code></pre>
+ </li>
+</ul>
+
+<ul>
+ <li>O comando abaixo cria um app com o nome de <code>my-app</code>:
+
+  <pre class="brush: bash"><code>cordova create my-app</code></pre>
+ </li>
+</ul>
+
+<ul>
+ <li>Execute o comando a seguir para adicionar a plataforma Firefox OS pra o app:
+  <pre class="brush: bash">cd my-app
+cordova platform add firefoxos</pre>
+ </li>
+</ul>
+
+<p>Em seguida:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/WebIDE/Opening_WebIDE">Abra a WebIDE</a></li>
+ <li>selecione <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps#Open_a_packaged_app">"Open Packaged App"</a>,  e selecione o diretório da aplicação onde está localizado o arquivo <code>config.xml</code>.</li>
+</ul>
+
+<p>Agora você pode editar o aplicativo como uma aplicação Cordova, e sempre que <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps#Running_apps">executar</a>, a própria WebIDE irá gerar a versão para  o Firefox OS.Now you can edit the app as a Cordova app, and whenever you <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps#Running_apps">run the app</a>, WebIDE takes care of generating the Firefox OS version behind the scenes. Sempre que você fizer uma alteração no <a href="/pt-BR/Apps/Manifest">manifesto</a> do aplicativo, a WebIDE vai gerar uma nova versão do app e executar a <a href="/en-US/docs/Tools/WebIDE/Creating_and_editing_apps#Manifest_validation">validação do manifesto</a>.</p>
+
+<p><a href="https://github.com/tortoyoyo/ExemplosCordovaAPP">Clicando aqui </a>você pode ver exemplos de Cordova App.</p>
+
+<p>Mais detalhes sobre desenvolvimento para Firefox OS podem ser encontrados também no livro <a href="https://leanpub.com/guiarapidofirefoxos">Desenvolvimento para firefox os - guia rápido</a>, do André Garzia.</p>
+
+<p> </p>
diff --git a/files/pt-br/tools/webide/troubleshooting/index.html b/files/pt-br/tools/webide/troubleshooting/index.html
new file mode 100644
index 0000000000..7f36c6749e
--- /dev/null
+++ b/files/pt-br/tools/webide/troubleshooting/index.html
@@ -0,0 +1,62 @@
+---
+title: Resolução de Problemas WebIDE
+slug: Tools/WebIDE/Troubleshooting
+translation_of: Archive/WebIDE/Troubleshooting
+---
+<div>{{ToolsSidebar}}</div><h2 id="Conectando_a_um_dispositivo_Firefox_OS">Conectando a um dispositivo Firefox OS</h2>
+
+<p>Se você está tentando conectar um dipositivo FirefoxOS ao WebIDE e ele não é exibido, aqui estão alguma coisas que você pode tentar:</p>
+
+<ul>
+ <li>Cheque a versão do seu FirefoxOS: verifique se seu dispositivo está executando o<strong> Firefox OS 1.2/Boot2Gecko 1.2 ou superior</strong>. Para checar esta versão, vá para o aplicativo Configurações no dispositivo, então <code>Informações do Dispositivo &gt; Software</code>. Se você  não tem uma versão alta suficiente procure seu aparelho no <a href="/en-US/Firefox_OS/Developer_phone_guide">guia de telefone para desenvolvedor</a> e siga as instruções para a atualização.</li>
+ <li>Ative o debugging remoto: in the Settings app on the device, go to <code>Device information &gt; More information &gt; Developer</code>.
+  <ul>
+   <li>Firefox OS 1.3 e anterior: "Remote Debugging" é somente uma checkbox. Marque a caixa.</li>
+   <li>Firefox OS 1.4 e posterior: "Remote Debugging" asks you to enable for just ADB, or for ADB and DevTools. Selecione "ADB e DevTools".</li>
+  </ul>
+ </li>
+ <li>Desative a tela de bloqueio no dispositivo: in the Settings app on the device, go to <code>Screen Lock</code> and unchecking the <code>Lock Screen</code> checkbox. This is a good idea because when the screen gets locked, the phone connection gets lost, meaning it is no longer available for debugging.</li>
+ <li>Verifique se você não tem nenhum dispositivo Android conectado ao mesmo tempo com o telefone FirefoxOS em seu computador.</li>
+ <li>Verifique o cabo que você está utilizando:
+  <ul>
+   <li>Tente desconectar e reconectar o cabo USB.</li>
+   <li>Tente plugat o cabo USB em uma porta diferente do seu computador. Você pode ter que alternar as portas.</li>
+   <li>Tente usar um cabo USB diferente. Os cabos que vem com o telefone são muitas vezes de má qualidade e muitas vezes falham.</li>
+   <li>Tente um cabo USB curto. Cabos USB longos tem sido conhecidos por não funcionar bem.</li>
+  </ul>
+ </li>
+ <li>Try disabling and re-enabling Remote Debugging in the Settings app on the device.</li>
+ <li>If <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">you disabled the ADB Addon Helper</a>, did you successfully run the <code>adb forward</code> command?</li>
+ <li>If you use Linux, make sure you added add a <code>udev</code> rules file, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. The <code>idVendor</code> attribute to use for the Geeksphone is "05c6", and <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">this page</a> lists other <code>idVendor</code> values.</li>
+ <li>Se você usa Windows:
+  <ul>
+   <li>you need to install drivers, as documented in step 3 of this guide to <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">setting up an Android device</a>. You can find drivers for Geeksphone devices on the <a class="external external-icon" href="http://downloads.geeksphone.com/">Geeksphone web site</a> and drivers for Google devices on <a href="http://developer.android.com/sdk/win-usb.htm">Google web site</a>. Windows 8 by default will not let you install unsigned drivers. See this tutorial on <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"How to install an unsigned driver on Windows 8"</a>.</li>
+   <li>if the WebIDE can't see your device after following all the steps, you may have to <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li>
+  </ul>
+ </li>
+ <li>If you're a EasyTether user (OS X), you will need to uninstall or disable EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li>
+</ul>
+
+<h3 id="Unrestricted_debugging_(including_certified_apps_built-in_apps_apps_already_installed_on_a_device)">Unrestricted debugging (including certified apps, built-in apps, apps already installed on a device)</h3>
+
+<p>If you are finding that you can't debug certified apps, built-in apps, or apps already installed on a real device, then you may be coming across WebIDE's restricted privileges security policy. To find out more, see the section on <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</p>
+
+<h2 id="Conectando_a_outros_navegadores_(Chrome_Safari)">Conectando a outros navegadores (Chrome, Safari)</h2>
+
+<p>WebIDE makes use of <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Valence (formerly Firefox Tools Adapter)</a> to reach other browsers, like Chrome and Safari. </p>
+
+<p>If you are having trouble connecting to these other browsers, check the setup steps and other notes for those browsers on the <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Valence page</a>.</p>
+
+<h2 id="Ativando_logging">Ativando logging</h2>
+
+<p>You can also enable verbose logging to gather diagnostics:</p>
+
+<ol start="1" style="list-style-type: decimal;">
+ <li>visit <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, and add a new preference called <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>, with the string value <code>all, and set </code></span></span>extensions.adbhelper@mozilla.org.debug<span class="message"><span class="content"><code> to true</code></span></span></li>
+ <li>In the <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, disable and then re-enable the ADB Helper add-on.</li>
+ <li>Open the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a> and you'll now see console messages prefixed with <code>adb</code>. If the messages don't mean anything to you, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">ask for help</a>.</li>
+</ol>
+
+<h2 id="Obtenha_Ajuda">Obtenha Ajuda</h2>
+
+<p>Vá para <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools sala no IRC</a> e nós tentaremos te ajudar.</p>
diff --git a/files/pt-br/tools/working_with_iframes/index.html b/files/pt-br/tools/working_with_iframes/index.html
new file mode 100644
index 0000000000..d9ea9662f8
--- /dev/null
+++ b/files/pt-br/tools/working_with_iframes/index.html
@@ -0,0 +1,32 @@
+---
+title: Working with iframes
+slug: Tools/Working_with_iframes
+tags:
+  - pt-br
+translation_of: Tools/Working_with_iframes
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">
+<div class="twocolumns">
+<p>Este é um novo recurso no Firefox 34.</p>
+</div>
+
+<p> no Firefox 34  em diante , você podera usar novas Ferramentas de desenvolvedor em um <a href="/en-US/docs/Web/HTML/Element/iframe"><code>iframe</code></a> especifico dentro do documento.</p>
+</div>
+
+<pre><a href='&amp;lt;iframe width="560" height="315"  data-cke-saved-src="https://www.youtube.com/embed/Me9hjqd74m8" src="https://www.youtube.com/embed/Me9hjqd74m8" frameborder="0" allowfullscreen>&amp;lt;/iframe>' style='background-color: rgb(255, 255, 255); font-family: "Open Sans", arial, x-locale-body, sans-serif;'>&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/Me9hjqd74m8" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</a></pre>
+
+<p> </p>
+
+<p>Este Recurso é por padrão  desativado e para  habilitál-o , abra as configurações  de ferramentas do desenvolvedor e marque a opção "<strong>Selecione um iframe que o documento atualmente </strong>"</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8551/frame-selection-setting.png" style="display: block; margin-left: auto; margin-right: auto;">Você vai ver agora um novo botão na Barra de Ferramentas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8547/frame-selection-button.png" style="display: block; margin-left: auto; margin-right: auto;">Clique nele e você verá um poup listando todos os iframe no documento,bem como o proprio documento principal,</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8549/frame-selection-popup.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<div class="note">
+<p>Nota-se que no momento em que você vai prescisar recarregar a pagina ou fechar e reabrir as ferramentas de desenvolvimento, a fim de ver o pop-up isso esta sendo rastreado como  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1062233">bug 1062233</a>.</p>
+</div>
+
+<p>Se você selecionar uma entrada na lista ,todas as ferramentas na caixa de ferramentas o  <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> (inspetor), o <a href="/en-US/docs/Tools/Web_Console">Console</a> (console ), o <a href="/en-US/docs/Tools/Debugger">Debugger</a> (depurador) e assim por diante  - e serão agora alvo apenas que  iframe, e será, essencialmente , se comportam como se o resto da pagina não existisse.</p>