1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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>
|
