diff options
Diffstat (limited to 'files/zh-tw/tools/web_console/the_command_line_interpreter/index.html')
| -rw-r--r-- | files/zh-tw/tools/web_console/the_command_line_interpreter/index.html | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/files/zh-tw/tools/web_console/the_command_line_interpreter/index.html b/files/zh-tw/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..72d9eba4fc --- /dev/null +++ b/files/zh-tw/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,121 @@ +--- +title: 命令行解釋器 +slug: Tools/Web_Console/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +<p>You can interpret JavaScript expressions in real time using the command line provided by the Web Console.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13280/console-cli.png" style="display: block; height: 296px; margin-left: auto; margin-right: auto; width: 877px;"></p> + +<h2 id="Entering_expressions">Entering expressions</h2> + +<p>To enter expressions just type into the command line and press <kbd>Enter</kbd>. To enter multiline expressions, use <kbd>Shift</kbd>+<kbd>Enter</kbd> instead of <kbd>Enter</kbd>.</p> + +<p>The expression you type is echoed in the message display window, followed by the result:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="geckoVersionNote">New in Firefox 47</div> + +<p>From Firefox 47 onwards, 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 will not immediately execute the input, but will behave as if you had pressed <kbd>Shift</kbd>+<kbd>Enter</kbd> , so you can finish entering the function definition.</p> + +<h2 id="Accessing_variables">Accessing variables</h2> + +<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript like <code>jQuery</code>:</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="Autocomplete">Autocomplete</h2> + +<p>The command line has autocomplete: enter the first few letters and a popup appears with possible completions:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7375/commandline-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Type <kbd>Enter</kbd> or <kbd>Tab</kbd> 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>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/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Defining_variables">Defining variables</h2> + +<p>You can define your own variables, and then access them:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Command_history">Command history</h2> + +<p>The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.</p> + +<p>From Firefox 39 onwards, this 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> + +<h2 id="Working_with_iframes">Working with 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> command 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="Helper_commands">Helper commands</h2> + +<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p> |