Console命令用法参考

本文主要是对Chrome开发文档Console API Reference的整理,原文在这里:https://developers.google.com/web/tools/chrome-devtools/debug/console/console-reference
虽然主要是以Chrome为例,但是主流浏览器基本都是相通的。

log/debug/info/warn/error

console.log基本上是用的最多的,其他的其实也很实用,基本看字面意思就明白啦。

1
2
3
4
5
console.log('log')
console.debug('debug')
console.info('info')
console.warn('warn')
console.error('error')

console.log

占位符

console主要支持的占位符有%s(字符串), %d==%i(整数), %f(浮点数), %o(对象)

1
2
console.log('%d月%i日,%s暴跌了%f个百分点', 8, 25, '股票', 4.5)
console.log('这是一个对象%o', {name: 'lulu', color: 'white'})

console.log

console.group +

意思就是把输出编组,方便查看。可以设置点击显示,并且支持嵌套(代码缩进只是为了方便理解)。

1
2
3
4
5
6
7
8
9
10
11
12
console.group('Group A')
console.log('A.item0')
console.group('Group A.A')
console.log('A.A.item0')
console.log('A.A.item1')
console.groupEnd()
console.groupEnd()
console.groupCollapsed('Group B')
console.log('B.item0')
console.log('B.item1')
console.groupEnd()

console.group

console.dir +

console.dir可以显示Object或者是DOM节点的每一条属性;console.dirxml和console.log一样,可以显示出DOM节点的详细结构。

1
2
3
cat = { name: 'bobo', color: 'black', say: function(){ return 'miao' } }
console.dir(cat)
console.dir(document.body)

console.dir

console.time +

console.time和console.timeEnd是一组计时器,console.timeStamp则会在时间轴(timeline)上增加一个标记。

1
2
3
4
5
6
7
console.time('loop')
var sum = 0
for (var i = 1; i < 123456789; i++){
sum += i
if (i == 98765432) console.timeStamp('i==98765432的标记')
}
console.timeEnd('loop')

console.timeStamp
console.time

console.assert(expression, object)

判断表达式是否为假(false),如果为假(false)则输出后面的对象。

1
console.assert(1 + 1 == 3, '计算错误')

console.assert

console.count(label)

一个计数器,会记录同一个label的调用次数。

1
2
3
4
5
6
7
8
function hello(name){
console.count('hello ' + name)
}
hello('Jack')
hello('Mary')
hello('Jack')
hello('Jack')
hello('Mary')

console.count

console.trace(object)

用来追踪函数的调用轨迹。原文: “Prints a stack trace from the point where the method was called.”

1
2
3
4
5
6
7
8
9
10
function add(num){
if (num > 0) {
// you can pass labels and objects to trace, too
console.trace('recursion is fun:', num)
return num + add(num - 1)
} else {
return 0
}
}
add(3)

console.trace

console.profile([label]) +

性能分析。原文: “Starts a JavaScript CPU profile with an optional label. To complete the profile, call console.profileEnd(). Each profile is added to the Profiles panel.”

1
2
3
4
5
6
7
8
9
function processPixels() {
console.profile('processPixels()')
var sum = 0
for (var i = 1; i < 123456789; i++){
sum += i
if (i == 98765432) console.timeStamp('i==98765432的标记')
}
console.profileEnd()
}

console.table

以表格形式显示对象。

1
2
3
4
5
6
7
8
9
10
11
var students = [{
name: '张三',
age: 20
}, {
name: '李四',
age: 21
}, {
name: '小明',
age: 19
}]
console.table(students)

console.table