path: root/files/zh-cn/tools/web_console/helpers/index.html

---
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="/zh-CN/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="/zh-CN/docs/Tools/Network_Monitor">Network Monitor</a> </strong>中，该字符串会显示在 <a href="/zh-CN/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="/zh-CN/docs/Tools/Web_Console#Command_history">remembers the commands you've typed</a>）。使用该函数来清除控制台的键入命令历史记录。</dd>
 <dt> <code>copy()</code></dt>
 <dd>将其中的参数部分复制到剪贴板。如果参数是一个字符串，则复制它的字面内容。如果参数是一个DOM节点，则复制它的 <code><a href="/zh-CN/docs/Web/API/Element/outerHTML">outerHTML</a></code> 。否则，就针对该参数调用 <code><a href="/zh-CN/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="/zh-CN/docs/Tools/Web_Console/Rich_output">rich output</a>。一旦选择了输出区域中的对象，就可以使用键盘上的箭头按键来浏览对象详情。</dd>
 <dt><code>keys()</code></dt>
 <dd>提供一个对象，返回它所有的键（或属性名）。这是 <a href="/zh-CN/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="/zh-CN/docs/Tools/Network_Monitor">Network Monitor</a> </strong>中，该字符串会被从 <a href="/zh-CN/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="/zh-CN/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="/zh-CN/docs/Web/API/Console">console</a> </li>
</ul>