打印调试信息

console.debug()

[{"url":"https://im.gurl.eu.org/file/50117c7a5ac73a8d8ce94.png","alt":""},{"url":"https://im.gurl.eu.org/file/89063d7e524f14fe5586d.png","alt":""}]

浏览器日志级别：

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

打印消息

普通消息

console.log()

[{"url":"https://im.gurl.eu.org/file/2a6a64e856ed609078a59.png","alt":""}]

console.info()

[{"url":"https://im.gurl.eu.org/file/bb9a79aae65efbacf9062.png","alt":"看不见info信息"},{"url":"https://im.gurl.eu.org/file/dd1aba62dc43a04f41ff2.png","alt":"日志级别勾选信息之后可以可见"}]

不同浏览器的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')