大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

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

$_

$_ 返回最近计算的表达式的值。 在以下示例中，将计算一个简单表达式 (2 + 2)。然后执行 $_ 属性，它包含相同的值：

在下一个示例中，计算的表达式最初包含一个名称数组。计算 _.length 来查找数组的长度，.length来查找数组的长度，_ 中存储的值更改为最新计算的表达式，4：

$0 - $4

$0、$1、$2、$3 和 $4 命令用作在“元素（Elements）”面板中检查的最后五个 DOM 元素或在“配置文件（Profiles）”面板中选择的最后五个 JavaScript 堆对象的历史引用。 $0 返回最近选择的元素或 JavaScript 对象，$1 返回第二个最近选择的元素或 JavaScript 对象，依此类推。

在以下示例中，在“元素”面板中选择了一个 img 元素。 在控制台抽屉中，$0 已被执行并显示相同的元素：

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

$(selector [, startNode])

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

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

右键单击返回的结果，然后选择“在元素面板中显示”以在 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。

下面示例使用 $() 创建当前document中所选节点之后出现的所有 <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) 停止对函数进行中断，或使用 UI 禁用所有断点。

dir(object)

dir(object) 显示所有指定对象的 object-style的 properties，此方法是控制台 API 的 console.dir() 方法的快捷方式。

以下示例显示了直接在命令行中计算 document.body 与使用 dir() 显示相同元素之间的区别：

document.body;
dir(document.body);

dirxml(object)

dirxml(object) 打印指定对象的 XML 表示形式，如“元素”面板中所示，此方法相当于console.dirxml()方法。

参考资料

https://data-flair.training/blogs/javascript-debugging-and-testing/