此页面由 Cloud Translation API 翻译。

Console Utilities API 参考文档

Kayce Basques

Sofia Emelianova

Console 实用程序 API 包含一系列便捷函数，用于执行常见的任务：选择和检查 DOM 元素、查询对象、以可读格式显示数据、停止和启动性能分析器、监控 DOM 事件和函数调用等。

要查找 console.log()、console.error() 和其他 console.* 函数吗？请参阅 Console API 参考文档。

$_

$_ 返回最近评估的表达式的值。

以下示例对一个简单的表达式 (2 + 2) 进行求值。然后，$_ 属性评估，其中包含相同的值：

$_ 是最近评估的表达式。

在下一个示例中，评估的表达式最初包含一个名称数组。正在评估 $_.length 用于查找数组的长度，存储在 $_ 中的值会变为最新值求值表达式，4：

$_ 会在评估新命令时更改。

0 - 4 美元

$0、$1、$2、$3 和 $4 命令可用作对最近五个 DOM 的历史引用 Elements 面板中检查的元素，或在 “Profiles”面板中$0 返回最近选择的元素或 JavaScript 对象 $1 返回最近选择的一个条目，依此类推。

在以下示例中，在 Elements 面板中选择了 img 元素。在控制台抽屉式导航栏中， $0 已求值，并显示相同的元素：

示例：0 美元。

下图显示了在同一页面中选择的不同元素。$0 现在是指新的选中的元素，而 $1 会返回之前选择的元素：

例如 $1。

$(selector [, startNode])

$(selector) 返回对具有指定 CSS 选择器的第一个 DOM 元素的引用。时间该函数是 document.querySelector() 函数的快捷方式。

以下示例返回对文档中第一个 <img> 元素的引用：

$('img') 示例。

右键点击返回的结果，然后选择 Reveal in Elements Panel 以在 DOM 中查找它，或者 滚动到“视图”，使其显示在页面上。

以下示例返回对当前所选元素的引用，并显示其 src 属性：

$('img').src 示例。

此函数还支持第二个参数 startNode，该参数用于指定“元素”或节点用于搜索元素的属性。此参数的默认值为 document。

以下示例返回对作为 devsite-header-background 后代的第一个 img 元素的引用，以及会显示其 src 属性：

$('img', div).src 示例。

注意：如果您所使用的库（例如 jQuery）使用 $，此功能将并且 $ 将对应于该库的实现。

$$(selector [, startNode])

$$(selector) 返回与指定 CSS 选择器匹配的元素数组。此命令是相当于调用 Array.from(document.querySelectorAll())。



以下示例使用 $$() to create an array of all <img> elements in the current document
and displays the value of each element's src property:
let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

&lt;img&gt;元素
当前文档中选定节点之后显示的条目：
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



注意：在控制台中按 Shift + Enter 即可开始
另起一行。

$x(路径 [, 起始节点])

$x(path) 用于返回与指定 XPath 表达式匹配的 DOM 元素数组。

例如，以下代码会返回页面上的所有 <p> 元素：
$x("//p")



以下示例返回包含 <a> 元素的所有 <p> 元素：
$x("//p[a]")



与其他选择器函数类似，$x(path) 有一个可选的第二个参数 startNode，
，用于指定要从中搜索元素的元素或节点。



clear()

clear() 会在控制台中清除其历史记录。
clear();

复制（对象）

copy(object) 会将指定对象的字符串表示形式复制到剪贴板。
copy($0);

调试（函数）

调用指定的函数时，系统会调用调试程序，并在
Sources 面板，用于逐步执行代码并进行调试。
debug(getData);



使用 undebug(fn) 停止函数中断，或使用界面停用所有断点。

如需详细了解断点，请参阅使用断点暂停代码。

dir(object)

dir(object) 可显示所有指定对象属性的对象样式列表。此方法
是 Console API 的 console.dir() 方法的快捷方式。

以下示例显示了直接在document.body
命令行，并使用 dir() 显示相同的元素：
document.body;
dir(document.body);



如需了解详情，请参阅 Console API 中的 console.dir() 条目。

dirxml(对象)

dirxml(object) 可输出指定对象的 XML 表示形式，如 Elements 面板中所示。
此方法等效于 console.dirxml() 方法。

inspect(object/function)

inspect(object/function) 在相应窗口中打开并选择指定的元素或对象。
面板：对于 DOM 元素，为 Elements 面板；对于 JavaScript 堆对象，为“Profiles”面板。

以下示例会在 Elements 面板中打开 document.body：
inspect(document.body);



传递要检查的函数时，该函数会在 Sources 面板中打开文档
检查。

getEventListeners(object)

getEventListeners(object) 会返回在指定对象上注册的事件监听器。通过
返回值是一个对象，其中包含每个注册的事件类型（click 或
keydown）。每个数组的成员都是描述所注册监听器的对象
。例如，下面列出了在文档中注册的所有事件监听器
对象：
getEventListeners(document);



如果在指定对象上注册了多个监听器，则数组会包含一个成员
每个监听器。在以下示例中，在
为 click 事件添加文档元素：



您可以进一步展开每个对象以查看其属性：



如需了解详情，请参阅检查对象属性。

keys（对象）

keys(object) 会返回一个数组，其中包含属于指定对象的属性名称
对象。如需获取同一属性的关联值，请使用 values()。

例如，假设您的应用定义了以下对象：
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

假设 player 是在全局命名空间中定义的（为简单起见），输入 keys(player) 并
控制台中的 values(player) 会导致以下情况：



monitoring（函数）

调用指定的函数时，控制台将记录一条消息，指明
函数名称以及调用时传递给该函数的参数。
function sum(x, y) {
  return x + y;
}
monitor(sum);



使用 unmonitor(function) 停止监控。

monitorEvents(object [, events])

当指定对象上发生了指定的某个事件时，系统会将该事件对象记录到
控制台。您可以指定要监控的单个事件、事件数组或某个常规事件
"类型"映射到预定义的事件集合请参阅下面的示例。

以下代码会监控 window 对象上的所有调整大小事件。
monitorEvents(window, "resize");



以下代码定义了一个数组，以同时监控“resize”“滚动”事件：
monitorEvents(window, ["resize", "scroll"])

您还可以指定一个可用的事件“类型”，也就是映射到
事件。下表列出了可用的事件类型及其关联的事件映射：

事件类型和对应的已映射事件
老鼠 “mousedown”“mouseup”“click”“dblclick”“mousemove”“mouseover”“mouseout”“mousewheel”
键 “keydown”“keyup”“keypress”“textInput”
触控输入 “touchstart”“touchmove”“touchend”“touchcancel”
对照组 “调整大小”“滚动”“缩放”“焦点”“模糊”“选择”“更改”“提交”“重置”

例如，以下代码使用“key”事件类型 输入文本上的所有对应关键事件
Elements面板中当前选中的字段。
monitorEvents($0, "key");

下面是在文本字段中输入字符后的输出示例：



使用 unmonitorEvents(object[, events]) 停止监控。

profile([name]) 和 profileEnd([name])

profile() 会启动一个具有可选名称的 JavaScript CPU 性能分析会话。profileEnd()
填写该配置文件，并在性能 > 中显示结果Main 轨道。

注意：profile() 和 profileEnd() 是 console.profile() 和 console.profileEnd() 的简写形式。

如需开始分析，请执行以下操作：
profile("Profile 1")

要停止分析并在性能 > 中查看结果，请执行以下操作：Main 轨道：
profileEnd("Profile 1")

导致性能 >Main 轨道：



您还可以嵌套个人资料。例如，这在任意顺序下都有效：
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');

注意：可同时运行多个 CPU 配置文件，您无需在
创建顺序。

queryObjects(Constructor)

从控制台调用 queryObjects(Constructor) 可返回已创建的对象数组
。例如：


queryObjects(Promise)。返回 Promise 的所有实例。
queryObjects(HTMLElement)。返回所有 HTML 元素。
queryObjects(foo)，其中 foo 是类名称。返回已实例化的所有对象
经由new foo()。


queryObjects() 的范围是控制台中当前选择的执行上下文。

table(数据 [, 列])

通过传入带可选列标题的数据对象，以表格格式记录对象数据。
这是console.table()的快捷方式。

例如，如需使用控制台中的表格显示名称列表，您需要执行以下操作：
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(函数)

undebug(function) 会停止调试指定函数，以便在调用函数
调用，则不再调用调试程序。它可与 debug(fn) 结合使用。
undebug(getData);

unmonitor（函数）

unmonitor(function) 用于停止监控指定函数。它可与
monitor(fn)。
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) 用于停止监控指定对象中的事件和事件。对于
则以下示例会停止 window 对象上的所有事件监控：
unmonitorEvents(window);

您还可以有选择地停止监控某个对象上的特定事件。例如，以下
代码开始监控当前所选元素上的所有鼠标事件，然后停止监控，
“mousemove”事件（可能是为了减少控制台输出中的噪声）：
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values（对象）

values(object) 会返回一个数组，其中包含属于指定值的所有属性的值
对象。
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);

事件类型和对应的已映射事件
老鼠	“mousedown”“mouseup”“click”“dblclick”“mousemove”“mouseover”“mouseout”“mousewheel”
键	“keydown”“keyup”“keypress”“textInput”
触控输入	“touchstart”“touchmove”“touchend”“touchcancel”
对照组	“调整大小”“滚动”“缩放”“焦点”“模糊”“选择”“更改”“提交”“重置”