控制台工具实用功能和选择器

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

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

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

摘要

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

$(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'))

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

查询选择器 all： $$ (selector， [startNode])

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

此函数类似于 document.querySelectorAll () ，但返回了一个 array of 元素，而不是 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'))。将显示第一个<li class="task">元素的后代的所有<button>元素：

XPath：$x (path， [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]")。将显示包含<button>元素的所有<li>元素：

与其他选择器命令类似， $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 (object)

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

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

语法

dir(object)

示例

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

将显示元素的 <head> HTML 表示形式。
Enter 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) 返回在指定对象上注册的事件侦听器。

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

语法

getEventListeners(object)

示例

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

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

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

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

键 (对象)

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 eevents。
调整窗口的大小，例如缩短窗口，然后在呈现的网页中滚动。调整大小和滚动事件显示在 控制台 工具中：

示例 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对象，则用于queryObjects(Promise)返回对象的所有Promise实例。
如果网页使用 JavaScript 类，则用于 queryObjects(ClassName) 返回类的所有实例 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) 停止指定函数的调试，以便当函数运行时，调试程序不再在函数中暂停。

有关详细信息，请参阅上文的 debug (function) 。

语法

undebug(function)

取消监视 (函数)

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 Attribution 4.0 International License 中描述的条款使用。原始页面可在此处找到，作者为 Kayce Basques。

本作品根据 Creative Commons Attribution 4.0 International License 获得许可。

反馈

此页面是否有帮助？

Last updated on 2026-09-11

控制台工具实用功能和选择器

摘要

最近评估的表达式： $_

示例 1

示例 2

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

语法

示例

查询选择器： $ (selector)

语法

示例 1

示例 2

查询选择器 all： $$ (selector， [startNode])

语法

示例 1

示例 2

XPath：$x (path， [startNode])

语法

示例 1

示例 2

clear()

语法

示例

复制 (对象)

语法

示例

调试 (函数)

语法

示例

dir (object)

语法

示例

DirXML (对象)

语法

检查 (对象/函数)

语法

示例

getEventListeners (对象)

语法

示例

键 (对象)

语法

示例

监视 (函数)

语法

示例

monitorEvents (object[， events])

语法

示例 1

示例 2

示例 3

profile ([name])

语法

示例

profileEnd ([name])

语法

queryObjects (构造函数)

语法

示例

table (data[， columns])

语法

示例

取消调试 (函数)

语法

取消监视 (函数)

语法

unmonitorEvents (object[， events])

语法

对象) (值

语法

示例

另请参阅

反馈

其他资源