path: root/files/pt-br/tools/web_console/the_command_line_interpreter/index.html

---
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>