控制台工具实用工具函数和选择器

项目
12/08/2023

控制台实用工具 API 包含用于执行常见任务的便利变量和函数的集合，例如：

选择和检查 DOM 元素。
以可读格式显示数据。
停止和启动探查器。
监视 DOM 事件。

这些变量和函数只能通过直接输入 DevTools 控制台来工作;不能使用变量并从脚本调用函数。

摘要

变量或函数	说明
最近计算的表达式： $_	返回最近计算的表达式的值。
最近选择的元素或 JavaScript 对象：$0-$4	返回最近选择的元素或 JavaScript 对象。
查询选择器：$ (选择器)	查询选择器;返回对具有指定 CSS 选择器的第一个 DOM 元素的引用，例如 `document.querySelector()`。
查询选择器全部：$$ (选择器、[startNode])	查询选择器 all;返回与指定的 CSS 选择器匹配的元素数组，例如 `document.querySelectorAll()`。
XPath：$x (路径、[startNode])	返回与指定的 XPath 表达式匹配的 DOM 元素数组。
clear()	清除其历史记录的控制台。
复制 (对象)	将指定对象的字符串表示形式复制到剪贴板。
调试 (函数)	调用指定的函数时，将调用调试器并在“源”面板上的函数内中断。
dir (对象)	显示指定对象的所有属性的对象样式列表，例如 `console.dir()`。
dirxml (对象)	打印指定对象的 XML 表示形式，如元素工具中所示，如 `console.dirxml()`。
检查 (对象/函数)	打开并选择元素工具中的指定 DOM 元素，或在内存工具中选择指定的 JavaScript 堆对象。
getEventListeners (对象)	返回在指定对象上注册的事件侦听器。
keys (对象)	返回一个数组，其中包含属于指定对象的属性的名称。
监视 (函数)	将一条消息记录到控制台，指示函数名称，以及作为请求的一部分传递给函数的参数。
monitorEvents (object[， events])	当指定对象上发生指定事件之一时，事件对象将记录到控制台中。
profile ([name])	使用可选名称启动 JavaScript CPU 分析会话。
profileEnd ([name])	完成 JavaScript CPU 分析会话，并在性能工具中显示结果。
queryObjects (构造函数)	返回由指定构造函数创建的对象的数组。
表 (data[， columns])	记录指定数据对象的对象数据，格式为具有列标题的表。
undebug (函数)	停止指定函数的调试，以便在请求函数时不再调用调试器。
unmonitor (function)	停止对指定函数的监视。
unmonitorEvents (object[， events])	停止监视指定对象和事件的事件。
值 (对象)	返回一个数组，其中包含属于指定对象的所有属性的值。

最近计算的表达式： $_

$_ 返回最近计算的表达式的值。

语法：

$_

示例 1

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中，键入表达式 2+2，然后按 Enter。

计算表达式，并显示结果。变量 $_ 也设置为表达式的结果。
键入 $_，然后按 Enter：

示例 2

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
将以下代码粘贴到 控制台中，然后按 Enter：
```
["john", "paul", "george", "ringo"]
```
计算的表达式是名称数组。
在 控制台中键入以下代码，然后按 Enter：
```
$_.length
```
该表达式$_.length将计算并在4控制台中显示，因为$_引用以前计算的表达式，该表达式是名称数组。 $_.length 是名称数组的长度。
在 控制台中键入以下代码，然后按 Enter：
```
$_
```
$_ 始终引用以前计算的表达式，该表达式现在是数字 4。

最近选择的元素或 JavaScript 对象：$0-$4

$0、 $1、 $2、 $3和 $4 返回最近选择的元素或 JavaScript 对象。

$0 返回最近选定的元素或 JavaScript 对象， $1 返回最近选择的第二个元素或 JavaScript 对象，依此而论。 $0、$1、、 $2$3和 $4 变量充当对元素工具中检查的最后五个 DOM 元素或内存工具中选择的最后五个 JavaScript 堆对象的历史引用。

语法

$0

示例

若要打开 DevTools，请右键单击网页，然后选择“ 检查”。或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。
在 “元素” 工具中，选择元素，例如元素 <input> 。
在 DevTools 底部的“快速视图”面板中打开控制台工具。
键入$0控制台工具，然后按 Enter。

变量 $0 返回所选 <input> 元素：
在“ 元素” 工具中选择其他元素，例如元素 <div> 。
在 控制台 工具中，键入 $0，然后按 Enter。

$0 指新选择的元素，即元素 <div> 。
键入$1，然后按 Enter 键。

$1 指以前选择的元素，即元素 <input> ：

查询选择器：$ (选择器)

$(selector) 返回对与指定的 CSS 选择器 selector匹配的第一个 DOM 元素的引用。

此函数类似于 document.querySelector () 函数。

如果使用的库（如 jQuery）使用 $，则功能将被覆盖，并且 $ 对应于该库中的实现。

语法

$(selector, [parentElement])

示例 1

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 $('input')。将显示与 CSS 选择器匹配 input 的第一个元素：
右键单击返回的结果，然后选择“ 在元素面板中显示 ”以在 DOM 中找到它，或 滚动到“视图 ”以在页面上显示它。

示例 2

函数 $() 接受第二个参数，该参数 parentElement指定要在其中搜索的父元素。参数的默认值为 document，这意味着默认情况下会搜索整个网页。通过指定父元素，可以在网页的特定部分搜索元素。

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中，键入 $('input', $('ul'))

在第一个元素中找到的第 input 一个与 CSS 选择器匹配的第一个 ul 元素将被重试：

查询选择器全部：$$ (选择器、[startNode])

$$() 返回与指定的 CSS 选择器匹配的元素列表，例如 document.querySelectorAll()。

此函数类似于 document.querySelectorAll () ，但返回 array 元素的 NodeList，而不是。

语法

$$(selector, [parentElement])

示例 1

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 $$('button')。 <button>将显示网页中的所有元素：

示例 2

此 $$() 函数还支持第二个参数，该参数 parentElement指定要在其中搜索的父元素。参数的默认值为 document，这意味着默认情况下会搜索整个网页。通过指定父元素，可以在网页的特定部分搜索元素。

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 $$('button', $('li.task'))。 <button>将显示第一<li class="task">个元素的后代的所有元素：

XPath：$x (路径、[startNode])

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

语法

$x(path, [parentElement])

示例 1

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 $x("//li")。 <li>将显示网页中的所有元素：

示例 2

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 $x("//li[button]")。 <li>将显示包含<button>元素的所有元素：

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

clear()

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

语法

clear()

示例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
若要在 控制台 工具中创建历史记录，请输入多个 JavaScript 表达式。例如：
```
for (let i = 0; i < 10; i++) {
    console.log(i);
}
```
若要清除历史记录，请键入clear()控制台工具，然后按 Enter：

复制 (对象)

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

语法

copy(object)

示例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中输入以下代码，然后按 Enter：
```
copy($$('*').map(element => element.tagName));
```
代码片段使用 $$(selector) 函数选择网页中的所有元素，然后将每个元素的属性映射到 tagName 数组。然后使用函数将数组复制到剪贴板 copy() 。
将剪贴板的内容粘贴到文本编辑器中。剪贴板的内容是网页中所有 HTML 标记的列表，例如：
```
["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]
```

调试 (函数)

debug(function) 调用该函数 function 时，在源工具的指定函数内暂停。

暂停调试器后，可以单步执行代码并对其进行调试。

语法

debug(function)

示例

打开新的选项卡或窗口，然后转到包含要调试的 JavaScript 函数的页面。例如，转到 TODO 应用演示页。
按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，键入 debug(updateList)。
在呈现的网页中，通过在“添加任务文本”字段中键入 test，然后按 Enter，将新的 TODO 项添加到列表中。

调试器在源工具的函数内updateList()暂停：

使用 undebug(function) 在函数上停止中断，或使用 UI 关闭所有断点。

有关断点的详细信息，请参阅使用断点暂停代码。

dir (对象)

dir(object) 显示指定对象的所有属性的对象样式列表，例如 console.dir()。

此函数是 console.dir () 的别名。

语法

dir(object)

示例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，输入 document.head ，然后按 Enter。

将显示元素的 <head> HTML 表示形式。
输入 dir(document.head) ，然后按 Enter。

将显示元素的所有属性 <head> 的对象样式列表：

有关详细信息，请参阅控制台 API 中的 console.dir () 。

dirxml (对象)

dirxml(object) 打印指定对象的 XML 表示形式，如元素工具中所示，如 console.dirxml()。

此函数等效于 console.dirxml () 。

语法

dirxml(object)

检查 (对象/函数)

inspect(element/function) 打开并选择“ 元素” 工具中的指定 DOM 元素，或在 “源” 工具中选择指定的 JavaScript 函数。

对于 DOM 元素，此函数将打开，并在 “元素 ”工具中选择指定的 DOM 元素。
对于 JavaScript 函数，此函数会在源工具中打开指定的 JavaScript 函数。

语法

inspect(element/function)

示例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，输入 inspect(document.body) ，然后按 Enter。

此时会打开 “元素 ”工具， <body> 并选中元素：

传递要检查的函数时，该函数会在源工具中打开网页，供你检查。

getEventListeners (对象)

getEventListeners(object) 返回在指定对象上注册的事件侦听器。

返回值是一个对象，该对象包含每个已注册事件类型 (（如 click 或 keydown) ）的数组。每个数组中的项都是描述为每种类型注册的侦听器的对象。

语法

getEventListeners(object)

示例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台工具中 ，输入 getEventListeners($('form')) ，然后按 Enter。

将显示在第一个 <form> 元素上注册的事件侦听器：

如果在指定的对象上注册了多个侦听器，则该数组包含每个侦听器的成员。在下图中，在事件的元素click上document注册了两个事件侦听器：

在“click”事件的“document”元素上注册的多个事件侦听器

keys (对象)

keys(object) 返回一个数组，其中包含属于指定对象的属性的名称。

若要获取相同属性的关联值，请参阅下面 ) 对象 (值。

语法

keys(object)

示例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中，输入以下代码，然后按 Enter：
```
var player1 = {"name": "Ted", "level": 42}
```
上述代码片段在名为 player1的全局命名空间中定义了一个对象，该命名空间包含两个属性。
若要获取属于player1对象的属性的名称，请在控制台工具中输入keys(player1)，然后按 Enter：
若要获取属于player1对象的属性值，请在控制台工具中输入values(player1)，然后按 Enter：

监视 (函数)

monitor(function) 每次调用指定函数时，都会将消息记录到控制台。该消息指示函数名称和传递给函数的参数。

语法

monitor(function)

示例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中，输入以下代码，然后按 Enter：
```
function sum(x, y) {
  return x + y;
}
```
上述代码片段定义了一个名为 sum的函数，该函数接受两个参数。
若要开始监视sum函数，请在控制台工具中输入 monitor(sum) ，然后按 Enter：
若要调用函数，请输入 sum(1, 2) 并按 Enter。此时会显示一条消息，指示已调用函数 sum ，以及传递给函数的参数：

若要结束监视，请使用 unmonitor(function)。

monitorEvents (object[， events])

monitorEvents(object[, events]) 每次指定对象上发生指定事件时，都会将事件对象记录到控制台。

可以指定要监视的单个事件、事件数组或映射到预定义事件集合的泛型事件类型之一。

语法

monitorEvents(object[, events])

示例 1

监视单个事件：

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中，输入以下代码，然后按 Enter：
```
monitorEvents(window, "resize");
```
前面的代码片段监视窗口对象上的所有调整大小事件。
调整窗口大小，例如，通过放大或缩小 DevTools。调整大小事件显示在 控制台 工具中：

示例 2

监视多个事件：

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中，输入以下代码，然后按 Enter：
```
monitorEvents(window, ["resize", "scroll"]);
```
前面的代码片段定义了一个事件名称数组，用于监视 resize 窗口对象上的和 scroll eevent。
调整窗口的大小，例如缩短窗口，然后在呈现的网页中滚动。调整大小和滚动事件会显示在 控制台 工具中：

示例 3

还可以使用预定义的事件集之一来指定事件的集合。下表显示了可用的事件类型和关联的事件映射：

事件类型	相应的映射事件
`mouse`	“click”、“dblclick”、“mousedown”、“mousemove”、“mouseout”、“mouseover”、“mouseup”、“mousewheel”
`key`	“keydown”、“keypress”、“keyup”、“textInput”
`touch`	“touchcancel”、“touchend”、“touchmove”、“touchstart”
`control`	“blur”、“change”、“focus”、“reset”、“resize”、“scroll”、“select”、“submit”、“zoom”

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台 工具中，输入以下代码，然后按 Enter：
```
monitorEvents(window, "key");
```
前面的代码片段监视窗口对象上的所有键盘事件。
在呈现的网页中，按任意键。键盘事件显示在 控制台 工具中：

profile ([name])

profile([name]) 使用可选名称启动 JavaScript CPU 分析会话。

若要完成配置文件并在性能工具中显示结果，请调用 profileEnd ([name]) 。

语法

profile([name])

示例

在新选项卡或窗口中打开要分析的页面。例如，转到低迷动画演示页。
按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
若要开始分析，请在 控制台 工具中键入 profile("My profile)，然后按 Enter。
若要停止分析，请在经过一段时间后键入 profileEnd("My profile")，然后按 Enter。

配置文件结果显示在性能工具中：

可以同时创建多个配置文件，并且无需按创建顺序结束每个配置文件。例如，以下代码创建两个配置文件，然后以相反的顺序结束它们：

profile('A');
profile('B');
profileEnd('B');
profileEnd('A');

profileEnd ([name])

profileEnd([name]) 完成 JavaScript CPU 分析会话，并在性能工具中显示结果。

若要调用此函数，必须运行配置文件 ([name]) 函数。

语法

profileEnd([name])

有关详细信息，请参阅上面的配置文件 ([name]) 。

queryObjects (构造函数)

queryObjects(constructor) 返回由指定构造函数创建的对象的数组。

的 queryObjects() 作用域是 控制台中当前选定的运行时上下文。

语法

queryObjects(constructor)

示例

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
若要返回 HTML 元素的所有实例，请在控制台工具中输入 queryObjects(HTMLElement) ，然后按 Enter：

其他示例：

如果你的网页使用 Promise 对象，Promise则使用 queryObjects(Promise) 返回对象的所有实例。
如果你的网页使用 JavaScript 类，ClassName则使用 queryObjects(ClassName) 返回类的所有实例。

table (data[， columns])

table(data[, columns]) 记录指定数据对象的对象数据，格式为具有列标题的表。

此函数是 console.table () 的别名。

语法

table(data[, columns])

示例

若要将人员姓名列表显示为表，请在 控制台中：

按 Ctrl+Shift+J (Windows、Linux) 或 Command+Option+J (macOS) 。 控制台工具在 DevTools 中打开，位于网页旁边。
在 控制台中输入以下代码，然后按 Enter：
```
var names = {
  0: {
    firstName: "John",
    lastName: "Smith"
  },
  1:  {
    firstName: "Jane",
    lastName: "Doe"
  }
};
```
上述代码片段在名为 names的全局命名空间中定义了一个对象，该命名空间包含两个属性。
若要将names对象显示为表，请在控制台中输入 table(names) ，然后按 Enter：

undebug (function)

undebug(function) 停止指定函数的调试，以便在函数运行时，调试器不再在函数中暂停。

有关详细信息，请参阅上面的调试 (函数) 。

语法

undebug(function)

unmonitor (函数)

unmonitor(function) 停止对指定函数的监视。

有关详细信息，请参阅上面的监视 (函数) 。

语法

unmonitor(function)

unmonitorEvents (object[， events])

unmonitorEvents(object[, events]) 停止监视指定对象和事件的事件。

有关详细信息，请参阅上面的 monitorEvents (object[， events]) 。

语法

unmonitorEvents(object[, events])

值 (对象)

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

若要获取相同属性的关联键，请参阅上面的键 (对象) 。

语法

values(object)

示例

请参阅上面的键 (对象) 中的示例。

另请参阅

控制台功能参考
控制台对象 API 参考 - console.* 函数，例如 console.log() 和 console.error()。

注意

此页面的部分内容是基于 Google 创建和共享的工作进行的修改，并根据 Creative Commons 署名 4.0 国际许可中所述的条款使用。原始页面在此处找到，由 Kayce Basques (Technical Writer、Chrome DevTools & Lighthouse) 创作。

此作品根据 Creative Commons 署名 4.0 国际许可获得许可。

控制台工具实用工具函数和选择器

摘要

最近计算的表达式： $_

示例 1

示例 2

最近选择的元素或 JavaScript 对象：$0-$4

语法

示例

查询选择器：$ (选择器)

语法

示例 1

示例 2

查询选择器全部：$$ (选择器、[startNode])

语法

示例 1

示例 2

XPath：$x (路径、[startNode])

语法

示例 1

示例 2

clear()

语法

示例

复制 (对象)

语法

示例

调试 (函数)

语法

示例

dir (对象)

语法

示例

dirxml (对象)

语法

检查 (对象/函数)

语法

示例

getEventListeners (对象)

语法

示例

keys (对象)

语法

示例

监视 (函数)

语法

示例

monitorEvents (object[， events])

语法

示例 1

示例 2

示例 3

profile ([name])

语法

示例

profileEnd ([name])

语法

queryObjects (构造函数)

语法

示例

table (data[， columns])

语法

示例

undebug (function)

语法

unmonitor (函数)

语法

unmonitorEvents (object[， events])

语法

值 (对象)

语法

示例

另请参阅

其他资源