chrome控制台如何把vw显示成px_你不知道的chrome控制台指令

通常，我们在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');

参考文档：

https://developers.google.com/web/tools/chrome-devtools/console/utilities​developers.google.com