Web 控制台助手

Web 控制台提供的 JavaScript 命令行提供了一些内置的辅助函数，可以简化某些任务。

$(selector, element)

查找 CSS 选择器字符串 selector，返回从 element 中派生的第一个匹配的节点。如果未指定，element 默认为 document。等效于 document.querySelector() 或调用页面中的 $ 函数（如果存在）。

请参阅 QuerySelector 代码片段。

$$(selector, element)

查找 CSS 选择器字符串 selector，返回一个包含从 element 中派生的所有匹配 DOM 节点的数组。如果未指定，element 默认为 document。这类似于 document.querySelectorAll()，但返回的是数组而不是 NodeList。

$0

页面中当前正在检查的元素。

$_

存储控制台命令行中执行的最后一个表达式的结果。例如，如果您键入“2+2 <enter>”，然后“$_ <enter>”，控制台将打印 4。

$x(xpath, element, resultType)

在 element 的上下文中评估 XPath xpath 表达式，并返回一个包含匹配节点的数组。如果未指定，element 默认为 document。resultType 参数指定要返回的结果类型；它可以是 XPathResult 常量，或相应的字符串："number"、"string"、"bool"、"node" 或 "nodes"；如果未提供，则使用 ANY_TYPE。

:block

（从 Firefox 80 开始）后跟一个未加引号的字符串，阻止 URL 包含该字符串的请求。在 网络监视器 中，该字符串现在显示在 请求阻止侧边栏 中并被选中。使用 :unblock 解除阻止。

clear()

清除控制台输出区域。

clearHistory()

就像普通的命令行一样，控制台命令行 记住您键入的命令。使用此函数清除控制台的命令历史记录。

copy()

将参数复制到剪贴板。如果参数是字符串，则按原样复制。如果参数是 DOM 节点，则复制其 outerHTML。否则，将对参数调用 JSON.stringify，并将结果复制到剪贴板。

**help()**（已弃用）

:help

显示帮助文本。实际上，在一个递归的精彩示例中，它会将您带到此页面。

inspect()

给定一个对象，为该对象生成：doc:丰富输出 <../rich_output/index>。在输出区域中选择对象后，可以使用箭头键浏览对象。

keys()

给定一个对象，返回该对象上的键（或属性名称）列表。这是 Object.keys 的快捷方式。

pprint()（已弃用）

以可读的方式格式化指定的值；这对于转储对象和数组的内容很有用。

:screenshot

使用提供的文件名创建当前页面的屏幕截图。如果您不提供文件名，则图像文件将使用以下格式命名

Screen Shot yyy-mm-dd at hh.mm.ss.png

该命令具有以下可选参数

命令	类型	描述
--clipboard	布尔值	出现时，此参数将导致屏幕截图被复制到剪贴板。
--dpr	数字	拍摄屏幕截图时要使用的设备像素比。
--file	布尔值	出现时，即使包含其他选项（例如 --clipboard），屏幕截图也将保存到文件中。
--filename	字符串	保存文件时要使用的名称。文件应具有“.png”扩展名。
--fullpage	布尔值	如果包含，则将保存整个网页。使用此参数，即使网页超出窗口当前边界的那些部分也将包含在屏幕截图中。使用时，-fullpage 将附加到文件名。
--selector	字符串	页面上单个元素的 CSS 查询选择器。提供时，只有此元素将包含在屏幕截图中。

:unblock

（从 Firefox 80 开始）后跟一个未加引号的字符串，删除对包含该字符串的 URL 的阻止。在 网络监视器 中，该字符串将从 请求阻止侧边栏 中删除。如果该字符串以前未被阻止，则不会出现错误。

values()

给定一个对象，返回该对象上的值列表；作为 keys() 的补充。

有关从内容中记录日志的更多信息，请参阅 控制台 API。

变量

temp*N*

检查器中的 在控制台中使用 选项为节点生成一个名为 temp0、temp1、temp2 等的变量，引用该节点。

示例

查看 DOM 节点的内容

假设您有一个具有类“title”的 DOM 节点。事实上，您正在阅读的此页面现在就有一个，因此您可以打开 Web 控制台并立即尝试一下。

让我们使用 $() 和 inspect() 函数查看该节点的内容

inspect($(".title"))

这会自动为对象生成丰富输出，显示与 CSS 选择器 ".title" 匹配的第一个 DOM 节点的内容，当然，它是具有类 "title" 的第一个元素。您可以使用向上和向下箭头键浏览输出，使用向右箭头键展开项目，使用向左箭头键折叠它。

另请参阅

• 控制台