Chrome控制台的命令和console对象方法总结。

Chrome Devtool Console

控制台中的预置命令有很多有用的功能。

历史变量

控制台中的一些预置变量保存了元素访问的历史和控制台输出历史：

• $0-4：元素访问历史
• $_：上一次控制台输出

控制台在$0、$1、$2、$3、$4中存放了最近访问的5个DOM元素，可以当作变量使用。

选择元素

document.querySelector和documennt.querySelectorAll的简写：$()和?()。

$x()返回满足指定XPath的所有元素：

$x('html/body/div')

复制到剪贴板

copy函数可以复制控制台或window中的变量到系统剪贴板中。

示例：

copy(location)

结果：

{
    "ancestorOrigins": {},
    "href": "http://127.0.0.1:5500/index.html",
    "origin": "http://127.0.0.1:5500",
    "protocol": "http:",
    "host": "127.0.0.1:5500",
    "hostname": "127.0.0.1",
    "port": "5500",
    "pathname": "/index.html",
    "search": "",
    "hash": ""
}

获取对象键值

keys和values函数分别返回对象的键和值，数组的形式。

监听函数调用

monitor函数监听控制台和window中函数的调用。当函数被调用时，它会打印一条消息到控制台。

示例：

function f(){}

monitor(f)

f() // function f called

unmonitor用于取消监听。

监听事件

monitorEvents用于监听DOM元素的事件。当事件被触发时，它会打印一条消息到控制台。

示例：

monitorEvents(window, 'scroll')

第二个参数也可以是一个数组。

unmonitorEvents用于取消监听。

实时表达式

点击控制台的“眼睛”按钮可以创建动态表达式，表达式的值会随着时间不断刷新（周期：250ms）。

清空控制台

clear方法用于清空控制台。

window.console

window.console中的方法和属性。

log

log方法用于输出字符串、对象和DOM元素，接受任意数量的参数。

对应浏览器控制输出等级的“Info”。

可以用格式字符串的方式输出，用%s、%d、%o、$c的方式占位字符串、数字、对象、CSS语句（修饰字符串）。用%%表示百分号%。

示例：

console.log('%%s for %s, %%d for %d, %%o for %o, %%c for %cstyle','string', 0 ,{name:'object'},'color: blue; font-weight: bold')

dir

dir方法和log十分相似，但是输出元素时输出元素对象的成员而不是元素和子元素。

对应浏览器控制输出等级的“Info”。

warn和error

warn和error方法和log也很相似，但是输出的内容分别有黄色背景和空色背景，且可展开查看调用栈。

分别对应浏览器控制输出等级的“Warning”和“Errors”。

trace

trace方法和log也很相似，但是可展开查看调用栈。

对应浏览器控制输出等级的“Info”。

debug

debug方法和log也很相似，但是对应浏览器控制输出等级的“Verbose”。

table

table方法用表格的形式展现对象和数组。

assert

assert与error展现方式相同，但是它只有在第一个参数为假时才输出。

相当于：

function assert(condition?:boolean, ...data:any[]){
    if(!condition){
        console.error(...data)
    }
}

count和countReset

count方法用于计数，从1开始，每调用一次加1。可以传入一个字符串作为计数的名字，进行多组计数。countReset用于重置计数。

示例：

console.count() // default: 1
console.count() // default: 2

console.count('count') // count: 1
console.count('count') // count: 2

console.countReset()
console.countReset('count')

console.count() // default: 1
console.count('count') // count: 1

time、timeLog和timeEnd

time、timeLog和timeEnd方法用于计时。time开始计时，timeLog记录一个时间但不结束计时，timeEnd结束计时并输出时间。3个方法可以传入参数来作为计数的名字。

示例：

console.time()
console.time('time')
console.timeLog() // default: 0.009033203125 ms
console.timeLog('time') // time: 0.06396484375 ms
console.timeEnd() // default: 0.112060546875 ms
console.timeEnd('time') // time: 0.142822265625 ms

timeStamp

timeStamp方法向浏览器的Performance或者Waterfall工具添加一个标记，便于后续的分析。

可以传入参数设置名字。

profile和profileEnd

profile方法用于开启CPU分析，具体的分析在分析器面板中。

可以传入参数设置名字，profileEnd用于结束分析。

group、groupCollapsed和groupEnd

group和groupEnd用于将输出内容分组，在这两个方法之间的console输出被组合在一起，可以展开收起。

groupCollapsed和group相似，但是默认收起。

clear

清除控制台。

memory

memory属性是一个MemoryInfo对象，里面保存着当前内存的使用情况（以字节计算），包括：

• jsHeapSizeLimit：可用堆的最大体积
• totalJSHeapSize：已分配的堆体积
• usedJSHeapSize：堆活跃段的体积