Console Utilities API 包含一系列用于执行常见任务的便捷函数:选择和检查 DOM 元素、查询对象、以可读格式显示数据、停止和启动性能分析器、监控 DOM 事件和函数调用等。
要查找 console.log()
、console.error()
和其他 console.*
函数吗?请参阅 Console API 参考文档。
$_
$_
返回最近评估的表达式的值。
以下示例对一个简单的表达式 (2 + 2
) 进行求值。然后,系统将评估 $_
属性,其中包含相同的值:
在下一个示例中,评估的表达式最初包含一个名称数组。通过求值 $_.length
找出数组的长度,存储在 $_
中的值会变为最新求值表达式 4:
0 - 4 美元
$0
、$1
、$2
、$3
和 $4
命令用作对 Elements 面板中检查的最后五个 DOM 元素的历史引用,或在配置文件面板中选择的最后五个 JavaScript 堆对象的历史引用。$0
返回最近选择的元素或 JavaScript 对象,$1
返回最近选择的元素或 JavaScript 对象,依此类推。
在以下示例中,在 Elements 面板中选择了 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);
}
l10n-placeholder3(),用于创建一个数组,其中包含当前文档显示在所选节点之后的所有 <img>
元素:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$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)
会生成以下内容:
monitor(function)
调用指定的函数时,系统会向控制台记录一条消息,指明函数名称以及在调用该函数时传递给该函数的参数。
function sum(x, y) {
return x + y;
}
monitor(sum);
使用 unmonitor(function)
停止监控。
monitorEvents(object [, events])
当指定对象上发生其中一个指定事件时,该事件对象会记录到控制台。您可以指定要监控的单个事件、事件数组或映射到预定义事件集合的某个通用事件“类型”。请参阅下面的示例。
以下代码会监控 window 对象上的所有调整大小事件。
monitorEvents(window, "resize");
以下代码定义了一个数组,以同时监控 window 对象上的“resize”和“scroll”事件:
monitorEvents(window, ["resize", "scroll"])
您还可以指定一种可用的事件“类型”,即映射到预定义事件集的字符串。下表列出了可用的事件类型及其关联的事件映射:
事件类型及对应的已映射事件 | |
---|---|
鼠标 | “mousedown”“mouseup”“click”“dblclick”“mousemove”“mouseover”“mouseout”“mousewheel” |
key | “keydown”“keyup”“keypress”“textInput” |
触控输入 | “touchstart”“touchmove”“touchend”“touchcancel” |
控制 | “调整大小”“滚动”“缩放”“焦点”“模糊”“选择”“更改”“提交”“重置” |
例如,以下代码对 Elements 面板中当前选择的输入文本字段上的所有对应关键事件使用“key”事件类型。
monitorEvents($0, "key");
下面是在文本字段中输入字符后的输出示例:
使用 unmonitorEvents(object[, events])
停止监控。
profile([name]) 和 profileEnd([name])
profile()
会启动一个具有可选名称的 JavaScript CPU 性能分析会话。profileEnd()
会填写该配置文件,并在 Performance > Main 轨道中显示结果。
如需开始分析,请执行以下操作:
profile("Profile 1")
如需停止分析并在 Performance > Main 轨道中查看结果,请执行以下操作:
profileEnd("Profile 1")
Performance > Main 轨道中的结果:
您还可以嵌套个人资料。例如,这在任意顺序下都有效:
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(数据 [, 列])
通过传入带可选列标题的数据对象,以表格格式记录对象数据。
这是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])
用于停止监控指定对象中的事件和事件。例如,以下命令会停止窗口对象上的所有事件监控:
unmonitorEvents(window);
您还可以有选择地停止监控某个对象上的特定事件。例如,以下代码会开始监控当前所选元素上的所有鼠标事件,然后停止监控“mousemove”事件(可能是为了减少控制台输出中的噪声):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
values(对象)
values(object)
会返回一个数组,其中包含属于指定对象的所有属性的值。
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);