打印调试信息

console.debug()

浏览器日志级别:

  • 详细(Verbose)
  • 信息(Info)
  • 警告(Warnings)
  • 错误(Errors)
    通常浏览器控制台日志级别默认为默认级别(未勾选详细信息),把浏览器日志级别勾选上详细(Verbose),即可在控制台看见调试信息

打印消息

普通消息

console.log()

console.info()

不同浏览器的info样式不一样,可自行尝试

console.table()

1
2
3
4
5
6
const list = [
{ name: '张三', age: 20 },
{ name: '李四', age: 21 },
{ name: '王五', age: 22 }
]
console.table(list)

time & timeLog & timeEnd
计算任务执行时间

1
2
3
4
5
6
function doTask() {
// 执行任务
}
console.time('task')
doTask()
console.timeEnd('task')

分布计算

1
2
3
4
5
console.log('task')
step1()
console.timeLog('task')
step2()
console.timeEnd('task')

count & countReset

1
2
3
4
5
6
7
function click() {
console.count('click')
}
click() // click: 1
click() // click: 2
click() // click: 3
console.countReset('click')
1
2
3
4
5
6
function click(target) {
console.count(target)
}
click('login-button') // login-button: 1
click('register-button') // register-button: 1
click('login-button') // login-button: 3

trace

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function request() {
console.trace()
}
function startLogin() {
request()
}
startLogin()
</script>

group * groupEnd

1
2
3
4
5
6
7
8
9
console.log('before login')

console.group('login-log')
console.log('check parameters')
console.log('request')
console.log('handle response')
console.groupEnd()

console.log('after login')