Chrome 控制台实用 API 参考
Console Utilities API 包含一组用于执行常见任务且方便的函数：选择和检查 DOM 元素、查询对象、以可读格式显示数据、停止和启动分析器以及监视 DOM 事件。
警告
这些功能只有当你从 Chrome DevTools 控制台调用它们时才能工作。如果您试图在脚本中调用它们，它们将不起作用。
如果你想查看 console.log(), console.error() 以及剩下的 console.* 函数，请看 Console API Reference.
$_
$_ 返回最近求值的表达式的值。
在下面的例子中，计算一个简单的表达式 (2 + 2)。然后计算 $_ 属性，它包含相同的值:
在下一个示例中，求值表达式最初包含一个名称数组。
计算 $_.length 来查找数组的长度，存储在 $_ 中的值会变成最新的求值表达式，为 4：
$0 - $4
$0, $1, $2, $3 和 $4 作为元素面板中检查的最后 5 个 DOM 元素或概要面板中选择的最后 5 个 JavaScript 堆对象的历史引用。
$0 返回最近选择的元素或 JavaScript 对象，$1 返回最近选择的第二个，以此类推。
在下面的例子中，Elements 面板中选择了一个 img 元素。在 Console 抽屉中，$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 属性:
注意
如果你使用的是 jQuery 等使用 $ 的库，该功能将被覆盖，$ 将对应该库的实现。
$$(selector [, startNode])
$$(selector) 返回一个匹配给定 CSS 选择器的元素数组。这个命令等价于调用 Array.from(document.querySelectorAll())。
下面的例子使用 $$() 来创建当前文档中所有 <img> 元素的数组，并展示每个元素的 src 属性的值:
let images = $$("img");
for (let each of images) {
console.log(each.src);
}
这个函数还支持第二个参数 startNode，它指定一个或多个元素，以便从中搜索元素。该参数的默认值是 document。
这个修改后的版本使用了 $$() 来创建一个数组，包含所有 <img> 元素，这些元素出现在当前文档中选定的节点之后:
let images = $$("img", document.querySelector(".devsite-header-background"));
for (let each of images) {
console.log(each.src);
}
提示
在控制台中按下 Shift + Enter 键即可换行，这不会执行脚本。
$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)
当调用指定的函数时，调试程序会被调用，并在 Sources 面板上的函数内部中断，以便于逐行调试代码。
debug(getData);
使用 undebug(fn) 停止在函数上断点，或使用 UI 停用所有断点。
有关断点的更多信息，请参阅 使用断点暂停代码。
dir(object)
dir(object) 以对象的形式显示所有指定对象的属性。这个方法是 Console API 的 console.dir() 方法的别名。
下面的例子展示了在命令行中直接计算 document.body 和使用 dir() 来显示相同元素的区别:
document.body;
dir(document.body);
有关更多信息，请参阅控制台 API 中的 console.dir() 条目。
dirxml(object)
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)。
每个数组的成员都是描述为每种类型注册的侦听器的对象。
例如，下面列出了在 document 对象上注册的所有事件监听器:
getEventListeners(document);
如果在指定的对象上注册了多个监听器，则数组中会包含每个监听器对应的成员。
以下示例中，在 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 对象记录到控制台。可以指定要监视的单个事件、事件数组或映射到预定义事件集合的泛型事件“类型”之一。请参见下面的示例。
以下代码会监控 window 对象上的所有大小调整事件。
monitorEvents(window, "resize");
以下代码定义了一个数组，用于监控 window 对象上的 resize 和 scroll 事件:
monitorEvents(window, ["resize", "scroll"]);您还可以指定一个可用的事件“类型”，即映射到预定义事件集的字符串。下表列出了可用的事件类型及其关联的事件映射:
| Event type & 对应的映射事件 | |
|---|---|
| mouse | "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel" |
| key | "keydown", "keyup", "keypress", "textInput" |
| touch | "touchstart", "touchmove", "touchend", "touchcancel" |
| control | "resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset" |
例如，以下代码使用 key 事件类型捕获当前在 Elements 面板中选中的输入文本字段上的所有相应按键事件。
monitorEvents($0, "key");以下是在文本字段中输入字符后的输出示例：
使用 unmonitorEvents(object[, events]) 停止监控。
profile([name]) 和 profileEnd([name])
profile() 会启动一个带有可选名称的 JavaScript CPU 性能分析会话。profileEnd() 完成配置文件，并在配置文件面板中显示结果。(参见 加速 JavaScript 执行。)
注意
profile() 和 profileEnd() 是 console.profile() 和 console.profileEnd() 的缩写
如需开始性能分析，请执行以下操作：
profile("Profile 1");如需停止分析并在 Profiles 面板中查看结果，请执行以下操作：
profileEnd("Profile 1");Profiles 面板中的结果：
Profiles 还可以嵌套。例如，以下代码无论以何种顺序运行，都能正常运行：
profile("A");
profile("B");
profileEnd("A");
profileEnd("B");提示
多个 CPU 配置文件可以同时运行，你不需要按创建顺序关闭它们。
queryObjects(Constructor)
从控制台中调用 queryObjects(Constructor) 可返回使用指定构造函数创建的对象数组。例如:
queryObjects(Promise). 返回所有的Promise实例。queryObjects(HTMLElement). 返回所有 HTML 元素。queryObjects(foo), 返回所有通过new foo()实例化的对象，其中foo是类名。
queryObjects() 的范围是控制台中当前所选的执行上下文。
table(data [, columns])
通过传入带有可选列标题的数据对象，以表格格式记录对象数据。
这是 console.table() 的快捷方式。
例如，如需在控制台中使用表格显示名称列表，可以执行以下操作：
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
undebug(function)
undebug(function) 会停止对指定函数进行调试，这样当 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, "mousemove");values(object)
values(object) 返回一个数组，其中包含属于指定对象的所有属性的值。
values(object);