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
上下文中 XPath(xpath
)表达式的值并返回一个包含所有匹配节点的数组。如果未指定,则element
默认为document
。resultType
参数指定返回结果的类型,它可能是一个 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 选项(选中任意一个元素,右键菜单中有该选项)为节点生成了一个变量例如
temp0
,temp1
,temp2
等等来引用该节点。
示例
查看DOM节点的内容
假如你有一个DOM节点叫做"title"。事实上,你正在阅读的这个页面恰好有一个,所以你可以打开Web控制台,尝试下面的内容。
让我们先来看看调用 $()
和 inspect()
方法之后返回节点的内容:
inspect($("#title"))
这会自动生成该对象的富表示形式(rich output),为你显示匹配CSS选择器 "#title"
的节点内容,当然就是拥有 "title"
的ID的元素啦。你可以使用键盘的上下方向键来浏览输出的内容,右方向键用来展开一个项目,而左方向键是折叠一个项目。