Web控制台帮助

命令列表

由Web控制台提供的JavaScript命令行工具中包含了一些内置的帮助性函数,它们可以用来简化一些特定任务。

$(selector, element)
使用 selector 值查找一个CSS选择器,返回 element 元素后代中第一个匹配的节点。如果未指定,则 element 默认为 document。相当于 document.querySelector() 或者调用该页面的 $ 函数(在它存在的前提下)。
参考 QuerySelector code snippet
$$(selector, element)
使用 selector 值查找一个CSS选择器,返回 element 元素后代中所有匹配的节点组成的数组。如果未指定,则 element 默认为 document。它类似于 document.querySelectorAll(),但是返回值是数组,而不是 NodeList
$0
当前页面中,正在检查的元素。
$_
存储在控制台命令行中执行的上一个表达式的结果。例如,如果输入"2+2",回车键之后再输入"$_",按下回车键后控制台将输出4。
$x(xpath, element, resultType)
求出 element 上下文中 XPathxpath)表达式的值并返回一个包含所有匹配节点的数组。如果未指定,则 element 默认为 documentresultType 参数指定返回结果的类型,它可能是一个 XPathResult constant 类型或者是一个相应的字符串:"number""string""bool""node""nodes";如果未提供该参数,则使用 ANY_TYPE
:block
(从Firefox 80版本开始可用)后跟一个未引用的字符串,阻止URL中包含该字符串的请求。在 Network Monitor 中,该字符串会显示在 Request Blocking sidebar 中并被选中。如果需要取消阻止,就用 :unblock
cd() 已废弃 Gecko 74
将JavaScript执行上下文切换到该页面上一个不同的iframe框架。该函数接受多种不同方法来确认具体要切换到哪一个框架。
详情请查看 working with iframes
clear()
清除控制台输出区域。
clearHistory()
就像一个普通的命令行一样,控制台命令行记住你曾经输入的命令(remembers the commands you've typed)。使用该函数来清除控制台的键入命令历史记录。
 copy()
将其中的参数部分复制到剪贴板。如果参数是一个字符串,则复制它的字面内容。如果参数是一个DOM节点,则复制它的 outerHTML 。否则,就针对该参数调用 JSON.stringify 方法,然后将结果复制到剪贴板。
help() 已废弃 Gecko 62
:help
显示帮助文本。事实上,在经过一个令人愉快的递归后,会把你带到这个页面。
inspect()
提供一个对象,为它生成一份 rich output。一旦选择了输出区域中的对象,就可以使用键盘上的箭头按键来浏览对象详情。
keys()
提供一个对象,返回它所有的键(或属性名)。这是 Object.keys 的简写。
pprint() 已废弃 Gecko 74
以一种可读的方式格式化指定值。这在转储对象或者数组内容时非常有用。
:screenshot
使用给定的文件名创建当前页面的屏幕快照。如果没有提供文件名,图片文件将用以下格式命名:
Screen Shot yyy-mm-dd at hh.mm.ss.png
这个命令有如下可选参数:
命令 类型 描述
--clipboard boolean 如果指明,该参数将使屏幕快照复制到剪贴板。
--delay number 在创建屏幕快照之前延迟等待的秒数。
--dpr number 创建屏幕快照时使用的设备像素比率。
--file boolean 如果指明,屏幕快照将保存到文件里,即便其它选项(例如:--clipboard)也存在。
--filename string 用来保存屏幕快照的文件名。这个文件有一个".png"扩展名。
--fullpage boolean 如果指明,整个网页将被保存。有了这个参数,即使是超出了当前窗口边界的页面部分也会包含在屏幕快照里。当使用这一参数时,"-fullpage"字样会被追加到文件名中。
--selector string 指定一个单一元素的CSS选择器。当提供这一参数时,只有这个元素才会被包含在屏幕快照中。
:unblock
(从Firefox 80版本开始可用)后跟一个未引用的字符串,取消阻止URL中包含该字符串的请求。在 Network Monitor 中,该字符串会被从 Request Blocking sidebar 中移除。如果该字符串之前未被阻止,也不会抛出错误信息。
values()
提供一个对象,返回它所有的值。与 keys() 是伙伴函数。

请参照 Console API 获取更多关于该内容的详细信息。

变量

tempN
查看器中的 Use in Console 选项(选中任意一个元素,右键菜单中有该选项)为节点生成了一个变量例如 temp0temp1temp2 等等来引用该节点。

示例

查看DOM节点的内容

假如你有一个DOM节点叫做"title"。事实上,你正在阅读的这个页面恰好有一个,所以你可以打开Web控制台,尝试下面的内容。

让我们先来看看调用 $()inspect() 方法之后返回节点的内容:

inspect($("#title"))

这会自动生成该对象的富表示形式(rich output),为你显示匹配CSS选择器 "#title" 的节点内容,当然就是拥有 "title" 的ID的元素啦。你可以使用键盘的上下方向键来浏览输出的内容,右方向键用来展开一个项目,而左方向键是折叠一个项目。

另请参阅