Chrome控制台和console对象

原创
09/01 16:39
阅读数 20

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": ""
}

获取对象键值

keysvalues函数分别返回对象的键和值,数组的形式。

监听函数调用

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

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

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

trace

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

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

debug

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

table

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

assert

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

相当于:

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

timetimeLogtimeEnd方法用于计时。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

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

groupCollapsedgroup相似,但是默认收起。

clear

清除控制台。

memory

memory属性是一个MemoryInfo对象,里面保存着当前内存的使用情况(以字节计算),包括:

  • jsHeapSizeLimit:可用堆的最大体积
  • totalJSHeapSize:已分配的堆体积
  • usedJSHeapSize:堆活跃段的体积
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部