diff options
Diffstat (limited to 'files/pt-pt/tools/web_console/the_command_line_interpreter/index.html')
| -rw-r--r-- | files/pt-pt/tools/web_console/the_command_line_interpreter/index.html | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/files/pt-pt/tools/web_console/the_command_line_interpreter/index.html b/files/pt-pt/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..16554ff278 --- /dev/null +++ b/files/pt-pt/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,187 @@ +--- +title: O intérprete de inserção (entrada) de JavaScript +slug: Tools/Consola_da_Web/O_interprete_da_linha_de_comandos +tags: + - Depuração + - Desenvolvimento da Web + - consola da Web +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +<div>{{ToolsSidebar}}</div> + +<p>You can interpret JavaScript expressions in real time using the interpreter provided by the Web Console. It has two modes: single-line entry and multi-line entry.</p> + +<h2 id="Modo_de_linha_única">Modo de linha única</h2> + +<p>For single-line entry, you can type JavaScript expressions in the field at the bottom of the console log, at the <strong>>></strong> prompt.</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>To enter expressions in single-line mode, type at the prompt and press <kbd>Enter</kbd>. To enter multi-line expressions, press <kbd>Shift</kbd>+<kbd>Enter</kbd> after typing each line, then <kbd>Enter</kbd> to run all the entered lines.</p> + +<p>The expression you type is echoed under the input prompt, followed by the result.</p> + +<p>If your input does not appear to be complete when you press <kbd>Enter</kbd>, then the Console treats this as <kbd>Shift</kbd>+<kbd>Enter</kbd> , enabling you to finish your input.</p> + +<p>For example, if you type:</p> + +<pre class="brush: js">function foo() {</pre> + +<p>and then <kbd>Enter</kbd>, the Console does not immediately execute the input, but behaves as if you had pressed <kbd>Shift</kbd>+<kbd>Enter</kbd> , so you can finish entering the function definition.</p> + +<h2 id="Modo_de_múltiplas_linhas">Modo de múltiplas linhas</h2> + +<p>For multi-line entry, click the "split pane" icon at the right hand side of the single-line entry field, or press <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). The multi-line editing pane opens on the left side the of Web Console.</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>You can enter multiple lines of JavaScript by default in this mode, pressing <kbd>Enter</kbd> after each one. To execute the snippet that is currently in the editing pane, click the <strong>Run</strong> button or press <kbd>Ctrl</kbd>+<kbd>Enter</kbd> (or <kbd>Cmd</kbd>+<kbd>Return</kbd> on MacOS). The snippet is echoed under the input prompt (in the right-side pane), followed by the result. You can also select a range of lines in the editing pane, and run just the code on those lines.</p> + +<p>Starting in Firefox 76, if the code snippet is more than five lines long, only the first five lines are echoed in the console, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…). Click anywhere in the area containing the echoed code to show the whole snippet; click again in that area to collapse it.</p> + +<p>You can open files when in multi-line mode, and save the current contents of the editing pane to a file.</p> + +<ul> + <li>To open a file, press <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> on MacOS). A file dialog box opens so you can select the file to open.</li> + <li>To save the contents of the editing pane, press <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> on MacOS). A file dialog box opens so you can specify the location to save to.</li> +</ul> + +<p>To switch back to single-line mode, click the <strong>X</strong> icon at the top of the multi-line editing pane, or press <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p> + +<h2 id="Aceder_às_variáveis">Aceder às variáveis</h2> + +<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript libraries like <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="Auto_completar">Auto completar</h2> + +<p>The editor has autocomplete: enter the first few letters and a popup appears with possible completions:</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>Press <kbd>Enter</kbd>, <kbd>Tab</kbd>, or the right arrow key to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.</p> + +<p>Console autocomplete suggestions are case-insensitive.</p> + +<p>The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.</p> + +<p>You get autocomplete suggestions for array elements, as well:</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>You can enable or disable autocompletion via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Enable Autocompletion</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p> + +<h2 id="Avaliação_instantânea">Avaliação instantânea</h2> + +<div class="blockIndicator note"> +<p>This feature is available in Firefox Nightly, in versions labeled 74 and later.</p> +</div> + +<p>When the "instant evaluation" feature is enabled, the interpreter displays results of expressions as you're typing them in single-line mode. Note that the result might be an error message. Expressions that have side effects are not evaluated.</p> + +<p>You can enable or disable instant evaluation via the Settings ("gear") menu in the Web Console toolbar. The menuitem <strong>Instant Evaluation</strong> has a checkmark next to it when the feature is enabled, which is missing when it is disabled. Select the menuitem to change the state.</p> + +<h2 id="Contexto_de_execução">Contexto de execução</h2> + +<p>Code that you have executed becomes part of the execution context, regardless of what editing mode you were in when you executed it. For example, if you type a function definition in the multi-line editor, and click <strong>Run</strong>, you can switch to single-line mode and still use your function.</p> + +<h2 id="Sintaxe_realçada">Sintaxe realçada</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>The text you enter has syntax highlighting as soon as you have typed enough for the highlighter to parse it and infer the meanings of the "words".</p> + +<p>The output is highlighted as well where appropriate.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Syntax highlighting is not visible in your browser if Accessibility features have been enabled.</p> +</div> + +<h2 id="Histórico_de_execução">Histórico de execução</h2> + +<p>The interpreter remembers expressions you've typed. To move back and forward through your history:</p> + +<ul> + <li>In single-line mode, use the up and down arrows. </li> + <li>In multi-line mode, use the <strong>⋀</strong> and <strong>⋁ </strong>icons in the editing panel's toolbar.</li> +</ul> + +<p>The expression history is persisted across sessions. To clear the history, use the <code>clearHistory()</code> <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">helper function</a>.</p> + +<p>You can initiate a reverse search through the expression history, much like you can in bash on Linux and Mac or PowerShell on Windows. On Windows and Linux press <kbd>F9</kbd>. On Mac press <kbd>Ctrl</kbd>+<kbd>R</kbd> (<strong>note:</strong> not <kbd>Cmd</kbd>+<kbd>R</kbd>!) to initiate the reverse search.</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>Enter the text you want to search for in the input box at the bottom of the Console. Start typing part of the expression you are looking for and the first match is displayed in the console. Repeatedly typing <kbd>F9</kbd> on Windows and Linux ( <kbd>Ctrl</kbd>+<kbd>R</kbd> on Mac) cycles backwards through the matches.</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>Once you have initiated the reverse search, you can use <kbd>Shift</kbd> + <kbd>F9</kbd> on Windows or Linux ( <kbd>Ctrl</kbd>+<kbd>S</kbd> on Mac) to search forward in the list of matches. You can also use the <strong>⋀</strong> and <strong>⋁ </strong>icons in the expression search bar.</p> + +<p>When you find the expression you want, press <kbd>Enter</kbd> (<kbd>Return</kbd>) to execute the statement.</p> + +<h2 id="Trabalhar_com_iframes">Trabalhar com iframes</h2> + +<p>If a page contains embedded <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a>, you can use the <code>cd()</code> function to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using <code>cd()</code>:</p> + +<p>You can pass the iframe DOM element:</p> + +<pre class="brush: js">var frame = document.getElementById("frame1"); +cd(frame);</pre> + +<p>You can pass a CSS selector that matches the iframe:</p> + +<pre class="brush: js">cd("#frame1");</pre> + +<p>You can pass the iframe's global window object:</p> + +<pre class="brush: js">var frame = document.getElementById("frame1"); +cd(frame.contentWindow); +</pre> + +<p>To switch the context back to the top-level window, call <code>cd()</code> with no arguments:</p> + +<pre class="brush: js">cd();</pre> + +<p>For example, suppose we have a document that embeds an iframe:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>The iframe defines a new function:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "I'm frame1"; + } + </script> + </head> + <body> + </body> +</html></pre> + +<p>You can switch context to the iframe like this:</p> + +<pre class="brush: js">cd("#frame1");</pre> + +<p>Now you'll see that the global window's document is the 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;">And you can call the function defined in the 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="Comando_da_Ajuda">Comando da Ajuda</h2> + +<p>{{ page("docs/Tools/Consola_da_Web/Ajuda", "Os comandos") }}</p> |