你不知道的chrome控制台指令
- 你不知道的chrome控制台指令 - 知乎专栏
- https://zhuanlan.zhihu.com/p/79703739
- 通常，我们在chrome控制台中用的最多的是$0，$0是显示当前选择的元素，现在来看看还有其他的你不知道的chrome控制台指令。 _ _ 返回的是上一次表达式的值如图，先执行 2+2，返回4这个值，再执行$_显示上次的4这…
- 2024-09-15 20:08:44
通常，我们在chrome控制台中用的最多的是$0，$0是显示当前选择的元素，现在来看看还有其他的你不知道的chrome控制台指令。
$_
$_ 返回的是上一次表达式的值
如图，先执行2+2，返回4这个值，再执行$_显示上次的4这个值
再看一个例子，初始值是一个数组，那么第一次的$_ 返回的值是这个数组，执行以下$_.length 返回数组的长度4，再执行$_ 就变成4了。
$0 - $4
$0 $1 $2 $3 $4 返回的是最近N次的选择的元素。
最常用的就是$0，返回当前选中的元素
如图，先选中一个元素，$0 返回当前这个元素，再选中其他元素，当前$0 返回的是新元素，此时$1 返回的是上一个元素。
$(selector, [startNode])
其中startNode都是起始父元素
$(selector) 返回的是css选择器查询到的元素的引用， document.querySelector 函数的缩写。
如图，返回的是页面中第一个img元素。
右键选中返回的元素还能选择Reveal in Elements Panel ，直接跳到Elemtents的面板中元素的位置。
$$(selector, [startNode])
$(selector) 返回的是css选择器查询到的元素的引用，是 document.querySelector All 函数的缩写。
$x(path, [startNode])
$x(path) 能使用xpath选择器来返回符合选择器的所有元素
clear()
clear() 用于清除历史记录。
copy(object)
copy可以直接复制字符串表达式。
debug(function)
当指定函数被执行时自动触发source panel的debug功能。
同样可以 undebug(fn) 取消debug on
dir(object)
dir(object) 列出指定object的所有属性，相当于console.dir(object)
dirxml(object)
dirxml返回指定对象的xml结构，相当于console.dirxml()
inspect(object/function)
如果是对象，则会跳转到element panel下指定的元素，如果是function则会跳到source 面板对应函数的位置。
下面是参数是document.body的例子
inspect(document.body);
getEventListeners(object)
返回指定元素所有绑定的事件，其中各类事件都会相对应聚合成对应的数组，比如click，keydown之类。
如图，是绑定在document上所有事件
getEventListeners(document);
keys(object)
返回指定对象的所有key的数组，相当于Object.keys
当然还有对应的values，也相当于Object.values
var player1 = { "name": "Ted", "level": 42 }
monitor(function)
当指定一个函数时，会监听这个函数调用，返回当下这个函数调用时的参数。
也可以用unmonitor(function)解除监听
monitorEvents(object[, events])
当在一个指定元素上指定监听事件的时候，事件触发就会打印在控制台上，可以传单个事件、一堆事件数组，或者一系列事件。
如图，监听window的resize事件
monitorEvents(window, "resize");
下面是监听一组事件
monitorEvents(window, ["resize", "scroll"])
如图所示，你可以指定一种事件类型来匹配预先定义好的事件集合。
如下，监听所有key的事件集合，当所有键盘事件触发的时候都会打印出来。
monitorEvents($0, "key");
profile([name]) 和 profileEnd([name])
profile()来启动一个自定名字的cpu统计，profileEnd() 来结束这次统计，并在Profile面板显示结果。
这个面板内容可以参考：https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution
开始一次统计
profile("My profile")
在Profile面板中的结果
table(data[, columns])
打印出格式化的表格，可以定制表头，比如打印出显示名字做成的表格：
var names = {
0: { firstName: "John", lastName: "Smith" },
1: { firstName: "Jane", lastName: "Doe" }
};
table(names);
是console.table的简写。
其他
如果页面中有元素使用了id，那可以直接使用这个id作为控制台里的变量
多彩的输出
console.log('%cred', 'color:red');
参考文档：
