initial commit

4 files changed, 354 insertions, 0 deletions

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>