【JavaScript API】 console命令详解前言本文主要列出了console的常用方法，以及添加样式正文

前言

本文主要列出了console的常用方法，以及添加样式

正文

console方法

`console.log`

打印信息

`console.debug`

打印调试信息，默认不显示

`console.info`

打印信息，和console.log差不多

`console.warg`

打印警告信息

`console.error`

打印错误信息

`console.table`

打印表格，表格还可以排序。对于数组比较友好。

console.table([
  {
    name: 'aaa',
    age: 10
  },
  {
    name: 'bbb',
    age: 20
  },
  {
    name: 'ccc',
    age: 30
  }
])

图片.png

`console.group`

分组，console.group开始，console.groupEnd结束。默认是展开的，console.groupCollapsed，设置为折叠。

const lable = '分组1'
console.group(lable)
console.log('a')
console.log('b')
console.log('c')
console.groupEnd(lable)

图片.png

`console.dir`

打印对象结构。比如console.dir(document.body)

`console.time`

计时

const label = '耗时1'
console.time(label)
const start = Date.now()
while (Date.now() - start < 100) {}
console.timeEnd(label)

图片.png

`console.count`

计数

for (let i = 0; i < 20; i++) {
  if (i % 4 === 0) {
    console.count('计数')
  }
}
// 计数清零
console.countReset('计数')

图片.png

`console.trace`

打印堆栈

function fn2() {
  console.trace()
}
function fn1() {
  fn2()
}
fn1()

图片.png

`console.assert`

断言

console.assert(1 == 2)

图片.png

`console.clear`

清空所有打印信息

添加样式

const styles1 = `
  font-size: 20px;
  border: 2px solid #eee;
  color: blue;
  background-color: red;
`
const styles2 = `
  font-size: 20px;
  border: 2px solid #eee;
  color: red;
  background-color: blue;
`
console.log('%c你好啊,%cJavaScript', styles1, styles2)

图片.png