Chrome控制台便捷API
... 2025-7-10 大约 5 分钟
这些函数仅在 Chrome DevTools 控制台调用它们时才有效。如果在脚本中调用它们，它们将不起作用。
# $_
$_ 返回最近计算的表达式的值。
# $0 - $4
$0 - $4 用作对在Elements面板中检查的最后五个 DOM 元素的历史引用或在JavaScript Profiles面板中选择的最后五个 JavaScript 堆对象。
$0 返回最近选择的元素或 JavaScript 对象，$1 返回第二个最近选择的元素或 JavaScript 对象，依此类推。
# $(selector [, startNode])
$(selector [, startNode])返回对具有指定 CSS 选择器的第一个 DOM 元素的引用。
当使用一个参数调用时，此函数是 document.querySelector() 函数的别名。
此函数还支持第二个参数 startNode，它指定要从中搜索元素的元素或节点。此参数的默认值为 document。
$('img') // 返回 document 下的第一个 <img>
1
如果您使用的库（例如 jQuery）使用$，则此功能将被覆盖，$并将对应于该库的实现。
# $$(selector [, startNode])
$$(selector) 返回与给定 CSS 选择器匹配的元素数组。此命令等效于调用 document.querySelectorAll()。
此函数还支持第二个参数 startNode，它指定要从中搜索元素的元素或节点。此参数的默认值为 document。
$$('img') // 返回 document 下的所有 <img>
1
# $x(path [, startNode])
$x(path) 返回与给定 XPath 表达式匹配的 DOM 元素数组。
与其他选择器函数类似，$x(path)有一个可选的第二个参数 ，startNode 它指定要从中搜索元素的元素或节点。
// 返回<p>页面上的所有元素
$x('//p')
// 返回所有包含 <a> 元素的 <p> 元素
$x('//p[a]')
1
2
3
4
2
3
4
# clear()
clear() 清除控制台的历史记录。
等效于调用 console.clear()
# copy(object)
copy(object) 将指定对象的字符串复制到剪贴板。
copy($0)
copy(document.querySelector('a'))
1
2
2
# debug(function) 和 undebug(function)
debug(function) 当调用指定的函数时，调试器被调用并在 Sources 面板上的函数内部中断，允许单步执行代码并对其进行调试。
undebug(function) 停止指定函数的调试，以便在调用该函数时不再调用调试器。
debug(getData)
undebug(getData)
1
2
2
# dir(object)
dir(object) 显示所有指定对象属性的对象样式列表。此方法是控制台 API console.dir() 方法的别名。
dir(document.body)
1
# dirxml(object)
dirxml(object) 打印指定对象的 XML 表示，如 Elements 选项卡中所示。此方法等价于 console.dirxml()方法。
// 在控制台中 以下两种方式打印出来的数据一样
document.body
dirxml(document.body)
1
2
3
2
3
# inspect(object/function)
inspect(object/function) 打开并在适当的面板中选择指定的元素或对象：DOM 元素的 Elements 面板或 JavaScript 堆对象的 Profiles 面板。
// 执行后直接跳转到 Elements 标签，并选择 <body> 标签
inspect(document.body)
1
2
2
# getEventListeners(object)
getEventListeners(object) 返回在指定对象上注册的事件侦听器。
返回值是一个对象，它包含每个已注册事件类型的数组（例如，click 或 keydown ）。数组的每个成员都是描述为每种类型注册的侦听器的对象。
// 获取 document 上注册的所有事件
getEventListeners(document)
1
2
2
# keys(object) 和 values(object)
keys(object) 返回一个数组，其中包含属于指定对象的属性名称。要获取相同属性的关联值，请使用 values()。
let player = { name: 'Ted', level: 42 }
keys(player) // ['name','level']
values(palyer) // ['Ted',42]
1
2
3
4
2
3
4
# monitor(function) 和 unmonitor(function)
monitor(function) 当调用指定的函数时，控制台会记录一条消息，指示函数名称以及在调用函数时传递给函数的参数。
unmonitor(function) 停止对指定函数的监视
function sum(x, y) {
return x + y
}
monitor(sum) //监视sum函数
// 当 sum 函数被调用时，在控制台额外打印出：
// function sum called with arguments: 1, 2
sum(1, 2)
unmonitor(sum) // 取消监视 sum 函数
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# monitorEvents(object [, events]) 和 unmonitorEvents(object [, events])
monitorEvents() 当指定对象上发生指定事件之一时，事件对象将记录到控制台。您可以指定要监视的单个事件、事件数组或映射到预定义事件集合的通用事件“类型”之一
unmonitorEvents() 停止监视指定对象和事件的事件。
还可以指定一种可用的事件“类型”，即映射到预定义事件集的字符串。
| 事件类型 | 对应的映射事件 |
|---|---|
| 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" |
// 获取最近的DOM元素上的 key 类型对用的所有事件
// 包括 “keydown”、“keyup”、“keypress”、“textInput” 四个事件
monitorEvents($0, 'key')
// 监视 window 对象上的所有调整大小的事件
monitorEvents(window, 'resize')
// 监视 window 对象上的 resize 和 scroll 事件
monitorEvents(window, ['resize', 'scroll'])
// 停止对 window 对象的所有事件监视
unmonitorEvents(window)
unmonitorEvents($0, 'key')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# profile([name]) 和 profileEnd([name])
profile() 使用可选名称启动 JavaScript CPU 评测会话。profileEnd() 完成配置文件并在 Memory 面板中显示结果。
// 开始分析和停止分析
profile('My profile')
profileEnd('My profile')
// 还可以嵌套
profile('A')
profile('B')
profileEnd('A')
profileEnd('B')
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
多个 CPU 配置文件可以同时运行，无需按创建顺序关闭它们。
# queryObjects(Constructor)
queryObjects(Constructor) 返回使用指定构造函数创建的对象数组。例如：
// 返回 Promise 的所有实例
queryObjects(Promise)
// 返回所有的 HTML 元素
queryObjects(HTMLElement)
// 其中 foo 是个类名，返回所有通过 new foo() 实例化的对象
queryObjects(foo)
1
2
3
4
5
6
2
3
4
5
6
queryObjects() 的作用域是控制台中当前选定的执行上下文。
# table(data [, columns])
table(data [, columns]) 通过传入带有可选列标题的数据对象，输出表格格式记录对象数据。
等效于调用 console.table() 。
let names = [
{ firstName: 'John', lastName: 'Smith' },
{ firstName: 'Jane', lastName: 'Doe' },
]
table(names) // 在控制台以表格形式输出
1
2
3
4
5
2
3
4
5