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

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

inspect(object/function)

spect(object/function) 打开并在相应的面板中选择指定的元素或对象，比如：DOM 元素的“元素”面板或 JavaScript 堆对象的“配置文件”面板。

以下示例在“元素”面板中打开 document.body：

inspect(document.body);

当传递一个函数进行检查时，该函数会在“Source”面板中打开文档供检查。

getEventListeners(object)

getEventListeners(object) 返回在指定对象上注册的事件侦听器。 返回值是一个对象，其中包含每个注册事件类型（例如单击或按键）的数组。 每个数组的成员都是描述为每种类型注册的侦听器的对象。 例如，以下列出了在文档对象上注册的所有事件侦听器：

getEventListeners(document);

如果在指定对象上注册了多个侦听器，则该数组包含每个侦听器的所有成员。在以下示例中，在document元素上注册了两个用于单击事件的事件侦听器：

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);

monitorEvents(object [, events])

当指定对象上发生指定事件之一时，该事件对象将记录到控制台。 开发者可以指定要监视的单个事件、事件数组或映射到预定义事件集合的通用事件“类型”之一。

下面监视窗口对象上的所有调整大小事件：

monitorEvents(window, "resize");

下面定义了一个数组来监视窗口对象上的“resize”和“scroll”事件：

monitorEvents(window, ["resize", "scroll"])

还可以指定可用的事件“类型”之一，即映射到预定义事件集的字符串。下表列出了可用的事件类型及其关联的事件映射：

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

monitorEvents($0, "key");

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

profile([name]) and profileEnd([name])

profile() 使用可选名称启动 JavaScript CPU 分析会话， profileEnd() 完成配置文件并在 Performance > Main 轨道中显示结果。

注意：profile() 和 profileEnd() 是 console.profile() 和 console.profileEnd() 的简写。

profile("Profile 1")
profileEnd("Profile 1")

Profile 也可以嵌套，比如下面的示例：

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);

undebug(function)

undebug(function) 停止指定函数的调试，以便在调用该函数时不再调用调试器。这与 debug(fn) 配合使用。

undebug(getData);

unmonitor(function)

unmonitor(function) 停止对指定函数的监视。这与监视器（fn）配合使用。

unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) 停止监视指定对象和事件的事件。例如，以下命令停止窗口对象上的所有事件监视：

unmonitorEvents(window);

开发者还可以有选择地停止监视对象上的特定事件。 例如，以下代码开始监视当前选定元素上的所有鼠标事件，然后停止监视“mousemove”事件（可能是为了减少控制台输出中的噪音）：

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

values(object)

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

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

values(player);

参考资料

https://developer.chrome.com/docs/devtools/console/utilities/#dir-function

https://developer.chrome.com/docs/devtools/console/utilities/#dir-function