initial commit

3 files changed, 176 insertions, 0 deletions

diff --git a/files/zh-cn/tools/web_console/helpers/index.html b/files/zh-cn/tools/web_console/helpers/index.html
new file mode 100644
index 0000000000..d8a52db1d6
--- /dev/null
+++ b/files/zh-cn/tools/web_console/helpers/index.html
@@ -0,0 +1,125 @@
+---
+title: Web控制台帮助
+slug: Tools/Web_Console/Helpers
+translation_of: Tools/Web_Console/Helpers
+---
+<div>{{ToolsSidebar}}</div>
+
+<h2 id="命令列表">命令列表</h2>
+
+<p>由Web控制台提供的JavaScript命令行工具中包含了一些内置的帮助性函数，它们可以用来简化一些特定任务。</p>
+
+<dl>
+ <dt><code>$(selector, element)</code></dt>
+ <dd>使用 <code>selector</code> 值查找一个CSS选择器，返回 <code>element</code> 元素后代中第一个匹配的节点。如果未指定，则 <code>element</code> 默认为 <code>document</code>。相当于 {{ domxref("document.querySelector()") }} 或者调用该页面的 $ 函数（在它存在的前提下）。</dd>
+ <dd>参考 <a href="https://wiki.developer.mozilla.org/en-US/docs/Archive/Add-ons/Code_snippets/QuerySelector">QuerySelector code snippet</a>。</dd>
+ <dt><code>$$(selector, element)</code></dt>
+ <dd>使用 <code>selector</code> 值查找一个CSS选择器，返回 <code>element</code> 元素后代中所有匹配的节点组成的数组。如果未指定，则 <code>element</code> 默认为 <code>document</code>。它类似于 {{ domxref("document.querySelectorAll()") }}，但是返回值是数组，而不是 {{ domxref("NodeList") }}。</dd>
+ <dt><code>$0</code></dt>
+ <dd>当前页面中，正在检查的元素。</dd>
+ <dt><code>$_</code></dt>
+ <dd>存储在控制台命令行中执行的上一个表达式的结果。例如，如果输入"2+2"，回车键之后再输入"$_"，按下回车键后控制台将输出4。</dd>
+ <dt><code>$x(xpath, element, resultType)</code></dt>
+ <dd>求出 <code>element</code> 上下文中 <a href="/en-US/docs/XPath">XPath</a>（<code>xpath</code>）表达式的值并返回一个包含所有匹配节点的数组。如果未指定，则 <code>element</code> 默认为 <code>document</code>。<code>resultType</code> 参数指定返回结果的类型，它可能是一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XPathResult#Constants">XPathResult constant</a> 类型或者是一个相应的字符串：<code>"number"</code>，<code>"string"</code>，<code>"bool"</code>，<code>"node"</code>，<code>"nodes"</code>；如果未提供该参数，则使用 <code>ANY_TYPE</code>。</dd>
+ <dt><code>:block</code></dt>
+ <dd>（从Firefox 80版本开始可用）后跟一个未引用的字符串，阻止URL中包含该字符串的请求。在 <strong><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Network_Monitor">Network Monitor</a> </strong>中，该字符串会显示在 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list#Blocking_specific_URLs">Request Blocking sidebar</a> 中并被选中。如果需要取消阻止，就用 <code>:unblock</code>。</dd>
+ <dt><code>cd()</code> {{deprecated_inline("gecko74")}}</dt>
+ <dd>将JavaScript执行上下文切换到该页面上一个不同的iframe框架。该函数接受多种不同方法来确认具体要切换到哪一个框架。</dd>
+ <dd>详情请查看 <a href="/en-US/docs/Tools/Web_Console#Working_with_iframes">working with iframes</a>。</dd>
+ <dt><code>clear()</code></dt>
+ <dd>清除控制台输出区域。</dd>
+ <dt><code>clearHistory()</code></dt>
+ <dd>就像一个普通的命令行一样，控制台命令行记住你曾经输入的命令（<a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console#Command_history">remembers the commands you've typed</a>）。使用该函数来清除控制台的键入命令历史记录。</dd>
+ <dt> <code>copy()</code></dt>
+ <dd>将其中的参数部分复制到剪贴板。如果参数是一个字符串，则复制它的字面内容。如果参数是一个DOM节点，则复制它的 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML">outerHTML</a></code> 。否则，就针对该参数调用 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify </a></code>方法，然后将结果复制到剪贴板。</dd>
+ <dt><code>help()</code> {{Deprecated_Inline(62)}}</dt>
+ <dt><code>:help</code> {{Gecko_MinVersion_Inline(62)}}</dt>
+ <dd>显示帮助文本。事实上，在经过一个令人愉快的递归后，会把你带到这个页面。</dd>
+ <dt><code>inspect()</code></dt>
+ <dd>提供一个对象，为它生成一份 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console/Rich_output">rich output</a>。一旦选择了输出区域中的对象，就可以使用键盘上的箭头按键来浏览对象详情。</dd>
+ <dt><code>keys()</code></dt>
+ <dd>提供一个对象，返回它所有的键（或属性名）。这是 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a> 的简写。</dd>
+ <dt><code>pprint()</code> {{Obsolete_Inline(74)}}</dt>
+ <dd>以一种可读的方式格式化指定值。这在转储对象或者数组内容时非常有用。</dd>
+ <dt><code>:screenshot</code></dt>
+ <dd>使用给定的文件名创建当前页面的屏幕快照。如果没有提供文件名，图片文件将用以下格式命名：</dd>
+ <dd><code>Screen Shot yyy-mm-dd at hh.mm.ss.png</code></dd>
+ <dd>这个命令有如下可选参数：</dd>
+ <dd>
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th>命令</th>
+    <th>类型</th>
+    <th>描述</th>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--clipboard</code></td>
+    <td>boolean</td>
+    <td>如果指明，该参数将使屏幕快照复制到剪贴板。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--delay</code></td>
+    <td>number</td>
+    <td>在创建屏幕快照之前延迟等待的秒数。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--dpr</code></td>
+    <td>number</td>
+    <td>创建屏幕快照时使用的设备像素比率。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--file</code></td>
+    <td>boolean</td>
+    <td>如果指明，屏幕快照将保存到文件里，即便其它选项（例如：<code>--clipboard</code>）也存在。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--filename</code></td>
+    <td>string</td>
+    <td>用来保存屏幕快照的文件名。这个文件有一个".png"扩展名。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--fullpage</code></td>
+    <td>boolean</td>
+    <td>如果指明，整个网页将被保存。有了这个参数，即使是超出了当前窗口边界的页面部分也会包含在屏幕快照里。当使用这一参数时，"-fullpage"字样会被追加到文件名中。</td>
+   </tr>
+   <tr>
+    <td><code style="white-space: nowrap;">--selector</code></td>
+    <td>string</td>
+    <td>指定一个单一元素的CSS选择器。当提供这一参数时，只有这个元素才会被包含在屏幕快照中。</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>:unblock</code></dt>
+ <dd>（从Firefox 80版本开始可用）后跟一个未引用的字符串，取消阻止URL中包含该字符串的请求。在 <strong><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Network_Monitor">Network Monitor</a> </strong>中，该字符串会被从 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Network_Monitor/request_list#Blocking_specific_URLs">Request Blocking sidebar</a> 中移除。如果该字符串之前未被阻止，也不会抛出错误信息。</dd>
+ <dt><code>values()</code></dt>
+ <dd>提供一个对象，返回它所有的值。与 <code>keys()</code> 是伙伴函数。</dd>
+</dl>
+
+<p>请参照 <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">Console API</a> 获取更多关于该内容的详细信息。</p>
+
+<h2 id="变量">变量</h2>
+
+<dl>
+ <dt>temp<em>N</em></dt>
+ <dd>查看器中的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use in Console">Use in Console</a> 选项（选中任意一个元素，右键菜单中有该选项）为节点生成了一个变量例如 <code>temp0</code>，<code>temp1</code>，<code>temp2</code> 等等来引用该节点。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="查看DOM节点的内容">查看DOM节点的内容</h3>
+
+<p>假如你有一个DOM节点叫做"title"。事实上，你正在阅读的这个页面恰好有一个，所以你可以打开Web控制台，尝试下面的内容。</p>
+
+<p>让我们先来看看调用 <code>$()</code> 和 <code>inspect()</code> 方法之后返回节点的内容：</p>
+
+<pre class="notranslate"><code>inspect($("#title"))</code></pre>
+
+<p>这会自动生成该对象的富表示形式（rich output），为你显示匹配CSS选择器 <code>"#title"</code> 的节点内容，当然就是拥有 <code>"title"</code> 的ID的元素啦。你可以使用键盘的上下方向键来浏览输出的内容，右方向键用来展开一个项目，而左方向键是折叠一个项目。</p>
+
+<h2 id="另请参阅">另请参阅</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/API/Console">console</a> </li>
+</ul>
diff --git a/files/zh-cn/tools/web_console/index.html b/files/zh-cn/tools/web_console/index.html
new file mode 100644
index 0000000000..a870af701e
--- /dev/null
+++ b/files/zh-cn/tools/web_console/index.html
@@ -0,0 +1,45 @@
+---
+title: Web 控制台
+slug: Tools/Web_Console
+tags:
+  - web控制台
+  - 工具
+  - 指导
+  - 网站开发
+  - 网站开发工具
+translation_of: Tools/Web_Console
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Web 控制台:</p>
+
+<ol>
+ <li>可以查看与当前网页相关的日志信息: 所有的网络请求，JavaScript， CSS，和安全相关的错误与警告信息，还包括页面上 JavaScript 代码运行时产生的错误、警告及相关信息.</li>
+ <li>可以激活你和网页之间的交互, 使你可以在当前网页上下文中执行一些 JavaScript 表达式.</li>
+</ol>
+
+<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">打开控制台</a></dt>
+ <dd>开始使用控制台</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/The_command_line_interpreter">命令行编译器</a></dt>
+ <dd>使用控制台和网页交互。</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Split_console">分离控制台</a></dt>
+ <dd>把控制台分离出来，放在其它工具旁边</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Console_messages">控制台消息</a></dt>
+ <dd>控制台打印出的详细日志</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Rich_output">丰富的输出</a></dt>
+ <dd>查看控制台中输入的对象打印出来的信息</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Keyboard_shortcuts">快捷键</a></dt>
+ <dd>快捷引用</dd>
+</dl>
+</div>
+</div>
diff --git a/files/zh-cn/tools/web_console/invoke_getters_from_autocomplete/index.html b/files/zh-cn/tools/web_console/invoke_getters_from_autocomplete/index.html
new file mode 100644
index 0000000000..a4866d0a0d
--- /dev/null
+++ b/files/zh-cn/tools/web_console/invoke_getters_from_autocomplete/index.html
@@ -0,0 +1,6 @@
+---
+title: 自动调用getters访问器
+slug: Tools/Web_Console/Invoke_getters_from_autocomplete
+translation_of: Tools/Web_Console/Invoke_getters_from_autocomplete
+---
+<p>{{draft}}</p>