Console Utilities API 包含一系列便捷函数,用于执行常见任务:选择和检查 DOM 元素、查询对象、以可读格式显示数据、停止和启动性能剖析器、监控 DOM 事件和函数调用等。
您是否在寻找 console.log()、console.error() 和其余的 console.* 函数?请参阅
Console API 参考文档。
$_
$_ 会返回最近求值的表达式的值。
在以下示例中,系统会对一个简单表达式 (2 + 2) 求值。然后,系统会对 $_ 属性求值,该属性包含相同的值:

在下一个示例中,求值的表达式最初包含一个名称数组。对
$_.length 求值以查找数组的长度后,存储在$_ 中的值会更改为最新
求值的表达式,即 4:

$0 - $4
$0、$1、$2、$3 和 $4 命令用作对在元素 面板中检查的最后五个 DOM 元素(包括伪元素,例如 ::before 或
::after)或在“性能剖析”面板中选择的最后五个 JavaScript 堆对象的历史记录引用。$0 返回最近选择的元素或
JavaScript 对象,$1 返回倒数第二个最近选择的元素或 JavaScript 对象,依此类推。
在以下示例中,系统在元素 面板中选择了一个 img 元素。在控制台 抽屉式界面中,系统已对 $0 求值并显示了相同的元素:

下图显示了在同一页面中选择的不同元素。$0 现在引用新选择的元素,而 $1 返回之前选择的元素:

$(selector [, startNode])
$(selector) 返回对具有指定 CSS 选择器的第一个 DOM 元素的引用。当
使用一个实参调用时,此函数是 document.querySelector() 函数的快捷方式。
以下示例返回对文档中第一个 <img> 元素的引用:

右键点击返回的结果,然后选择 Reveal in Elements Panel 以在 DOM 中查找该结果,或选择 Scroll in to View 以在页面上显示该结果。
以下示例返回对当前所选元素的引用,并显示其 src 属性:

此函数还支持第二个形参 startNode,用于指定要从中搜索元素的“元素”或节点。此形参的默认值为 document。
以下示例返回对 devsite-header-background 的后代中第一个 img 元素的引用,并显示其 src 属性:

$$(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);
}
<img> 元素
在当前文档中出现在所选节点之后:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}

$x(path [, startNode])
$x(path) 返回与给定 XPath 表达式匹配的 DOM 元素数组。
例如,以下代码会返回页面上的所有 <p> 元素:
$x("//p")

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

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

clear()
clear() 会清除控制台的历史记录。
clear();
copy(object)
copy(object) 会将指定对象的字符串表示复制到剪贴板。
copy($0);
debug(function)
调用指定函数时,调试器会在来源 面板中调用并在函数内中断,以便逐步执行代码并对其进行调试。
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(object)
dirxml(object) 会输出指定对象的 XML 表示形式,如元素 面板中所示。
此方法等同于 console.dirxml() 方法。
inspect(object/function)
inspect(object/function) 会在相应面板中打开并选择指定的元素或对象:对于 DOM 元素,为元素 面板;对于
JavaScript 堆对象,为“性能剖析”面板。
以下示例会在元素 面板中打开 document.body:
inspect(document.body);

将函数传递给 inspect 时,该函数会在来源 面板中打开文档,供您检查。
getEventListeners(object)
getEventListeners(object) 返回在指定对象上注册的事件监听器。返回值是一个对象,其中包含每个已注册事件类型(例如
click 或 keydown)的数组。每个数组的成员都是描述为每种类型注册的监听器的对象。例如,以下代码列出了在文档对象上注册的所有事件监听器:
getEventListeners(document);

如果在指定对象上注册了多个监听器,则该数组包含每个监听器的成员。在以下示例中,针对 click 事件在文档元素上注册了两个事件监听器:

您可以进一步展开每个对象以探索其属性:

如需了解详情,请参阅检查对象属性。
keys(object)
keys(object) 返回一个数组,其中包含属于指定对象的属性的名称。如需获取相同属性的关联值,请使用 values()。
例如,假设您的应用定义了以下对象:
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
假设 player 是在全局命名空间中定义的(为简单起见),在 控制台 中输入 keys(player) 和
values(player) 会得到以下结果:

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

使用 unmonitor(function) 停止监控。
monitorEvents(object [, events])
当指定对象上发生指定事件之一时,系统会将 Event 对象记录到控制台中。您可以指定要监控的单个事件、事件数组或映射到预定义事件集合的通用事件“类型”之一。请参阅下面的示例。
以下代码会监控窗口对象上的所有调整大小事件。
monitorEvents(window, "resize");

以下代码定义了一个数组,用于监控窗口对象上的“调整大小”和“滚动”事件:
monitorEvents(window, ["resize", "scroll"])
您还可以指定可用的事件“类型”之一,这些字符串会映射到预定义的事件集。下表列出了可用的事件类型及其关联的事件映射:
| 事件类型和对应的映射事件 | |
|---|---|
| 鼠标 | “mousedown”“mouseup”“click”“dblclick”“mousemove”“mouseover”“mouseout”“mousewheel” |
| 键 | “keydown”“keyup”“keypress”“textInput” |
| 触控输入 | “touchstart”“touchmove”“touchend”“touchcancel” |
| 控制 | “resize”“scroll”“zoom”“focus”“blur”“select”“change”“submit”“reset” |
例如,以下代码使用“键”事件类型来监控元素 面板中当前所选输入文本字段上的所有相应键事件。
monitorEvents($0, "key");
以下是在文本字段中输入字符后的示例输出:

使用 unmonitorEvents(object[, events]) 停止监控。
profile([name]) 和 profileEnd([name])
profile() 会启动 JavaScript CPU 性能剖析会话,并提供可选名称。profileEnd()
会完成性能剖析,自动打开性能 面板,并在主 轨道中显示结果。
如需开始性能剖析,请执行以下操作:
profile("Profile 1")
如需停止性能剖析并在性能 > 主 轨道中查看结果,请执行以下操作:
profileEnd("Profile 1")
性能 > 主 轨道中的结果:

性能剖析也可以嵌套。例如,以下代码可以按任意顺序执行:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
queryObjects(Constructor)
从控制台调用 queryObjects(Constructor) 以返回使用指定构造函数创建的对象数组。例如:
queryObjects(Promise)。返回Promise的所有实例。queryObjects(HTMLElement)。返回所有 HTML 元素。queryObjects(foo),其中foo是类名称。返回通过new foo()实例化的所有对象。
queryObjects() 的范围是控制台中当前所选的执行上下文。
table(data [, columns])
通过传入带有可选列标题的数据对象,以表格格式记录对象数据。
这是 console.table() 的快捷方式。
例如,如需在控制台中使用表格显示名称列表,您可以执行以下操作:
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);

如需将记录的表格作为格式化的 Markdown 表格或 CSV 数据复制到剪贴板,请右键点击控制台 中的表格,然后从上下文菜单中选择相应的复制选项。
undebug(function)
undebug(function) 会停止调试指定的函数,以便在调用该函数时不再调用调试器。它与 debug(fn) 结合使用。
undebug(getData);
unmonitor(function)
unmonitor(function) 会停止监控指定的函数。它与 monitor(fn) 结合使用。
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events]) 会停止监控指定对象和事件的事件。例如,以下代码会停止监控窗口对象上的所有事件:
unmonitorEvents(window);
您还可以选择性地停止监控对象上的特定事件。例如,以下代码会开始监控当前所选元素上的所有鼠标事件,然后停止监控“mousemove”事件(可能是为了减少控制台输出中的干扰):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
values(object)
values(object) 返回一个数组,其中包含属于指定对象的所有属性的值。
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);
