Console Utilities API 参考文档

Kayce Basques
Kayce Basques
Sofia Emelianova
Sofia Emelianova

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

在寻找 console.log()console.error() 和其余的 console.* 函数?请参阅 Console API 参考文档

$_

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

在以下示例中,系统会对一个简单表达式 (2 + 2) 进行评估。然后,系统会评估 $_ 属性,该属性包含相同的值:

$_ 是最近计算的表达式。

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

当评估新命令时,$_ 会发生变化。

$0 - $4

$0$1$2$3$4 命令可作为历史参考,用于引用在 Elements 面板中检查的最后五个 DOM 元素或在 Profiles 面板中选择的最后五个 JavaScript 堆对象。$0 返回最近选择的元素或 JavaScript 对象,$1 返回第二近选择的元素或 JavaScript 对象,依此类推。

在以下示例中,元素面板中选择了 img 元素。在控制台抽屉式导航栏中,$0 已评估并显示相同的元素:

0 美元的示例。

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

1 美元的示例。

$(selector [, startNode])

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

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

$(&#39;img&#39;) 的示例。

右键点击返回的结果,然后选择在“元素”面板中显示以在 DOM 中找到该结果,或选择滚动到视图中以在网页上显示该结果。

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

$(&#39;img&#39;).src 的示例。

此函数还支持第二个参数 startNode,用于指定要从中搜索元素的“元素”或节点。此参数的默认值为 document

以下示例返回对 devsite-header-background 的第一个后代 img 元素的引用,并显示其 src 属性:

$(&#39;img&#39;, div).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);
}

在所选节点之后出现在当前文档中的 使用<!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> 创建包含所有 <code translate=<img> 元素:

let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}

使用 $() 选择文档中 select div 元素之后显示的所有图片并显示其来源的示例。

$x(path [, startNode])

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

例如,以下代码会返回网页上的所有 <p> 元素:

$x("//p")

使用 XPath 选择器的示例。

以下示例返回包含 <a> 元素的所有 <p> 元素:

$x("//p[a]")

使用更复杂的 XPath 选择器的示例。

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

使用带有 startNode 的 XPath 选择器的示例。

clear()

clear() 会清除控制台的历史记录。

clear();

copy(object)

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

copy($0);

debug(function)

当调用指定函数时,调试器会被调用,并在来源面板中的函数内中断,从而允许逐步执行代码并对其进行调试。

debug(getData);

使用 debug() 在函数内中断。

使用 undebug(fn) 可停止在函数处中断,或使用界面停用所有断点。

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

dir(object)

dir(object) 会以对象样式显示指定对象的所有属性。此方法是控制台 API 的 console.dir() 方法的快捷方式。

以下示例展示了直接在命令行中评估 document.body 与使用 dir() 显示同一元素之间的区别:

document.body;
dir(document.body);

使用和不使用 dir() 函数记录 document.body。

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

dirxml(对象)

dirxml(object) 会打印指定对象的 XML 表示形式,如元素面板中所示。 此方法等同于 console.dirxml() 方法。

inspect(对象/函数)

inspect(object/function) 在相应的面板中打开并选择指定的元素或对象:对于 DOM 元素,为元素面板;对于 JavaScript 堆对象,为“配置文件”面板。

以下示例会在元素面板中打开 document.body

inspect(document.body);

使用 inspect() 检查元素。

传递要检查的函数时,该函数会在来源面板中打开相应文档,供您检查。

getEventListeners(object)

getEventListeners(object) 会返回在指定对象上注册的事件监听器。返回值是一个对象,其中包含每个已注册的事件类型(例如 clickkeydown)对应的数组。每个数组的成员都是描述为每种类型注册的监听器的对象。例如,以下代码会列出在 document 对象上注册的所有事件监听器:

getEventListeners(document);

使用 getEventListeners() 的输出。

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

多个监听器。

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

监听器对象的展开视图。

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

keys(对象)

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

例如,假设您的应用定义了以下对象:

let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

假设 player 是在全局命名空间中定义的(为简单起见),在控制台中输入 keys(player)values(player) 会产生以下结果:

keys() 和 values() 方法的示例。

monitor(函数)

当调用指定的函数时,系统会向控制台记录一条消息,其中包含函数名称以及调用该函数时传递给它的实参。

function sum(x, y) {
  return x + y;
}
monitor(sum);

monitor() 方法的示例。

使用 unmonitor(function) 停止监控。

monitorEvents(object [, events])

当指定对象上发生指定事件时,系统会将 Event 对象记录到控制台。您可以指定要监控的单个事件、事件数组,也可以指定映射到预定义事件集合的某个通用事件“类型”。请参阅下面的示例。

以下代码会监控窗口对象上的所有调整大小事件。

monitorEvents(window, "resize");

监控窗口大小调整事件。

以下代码定义了一个数组,用于监控窗口对象上的“resize”和“scroll”事件:

monitorEvents(window, ["resize", &quot;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”

例如,以下代码使用“key”事件类型来监听当前在元素面板中选定的输入文本字段上的所有相应按键事件。

monitorEvents($0, "key");

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

监控关键事件。

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

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

profile() 启动 JavaScript CPU 分析会话,并可选择指定名称。profileEnd() 完成分析,并在性能 > 轨道中显示结果。

如需开始分析,请执行以下操作:

profile("Profile 1")

如需停止分析并在性能 > 轨道中查看结果,请执行以下操作:

profileEnd("Profile 1")

效果 > 主要轨道中的结果:

Performance 轨道中的 Profile 1。

配置文件也可以嵌套。例如,以下操作可以按任意顺序执行:

profile('A');
profile('B');
profileEnd('A&#39;);
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);

table() 方法示例。

undebug(function)

undebug(function) 会停止对指定函数的调试,以便在调用该函数时不再调用调试器。此属性与 debug(fn) 结合使用。

undebug(getData);

unmonitor(function)

unmonitor(function) 停止监控指定函数。此参数与 monitor(fn) 搭配使用。

unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) 停止监控指定对象和事件的事件。例如,以下代码会停止对 window 对象的所有事件监控:

unmonitorEvents(window);

您还可以选择性地停止监控对象上的特定事件。例如,以下代码开始监控当前所选元素上的所有鼠标事件,然后停止监控“mousemove”事件(可能是为了减少控制台输出中的噪声):

monitorEvents($0, "mouse");
unmonitorEvents($0, &quot;mousemove");

values(对象)

values(object) 返回一个数组,其中包含属于指定对象的所有属性的值。

let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);

值(播放器)的结果。