浏览器控制台打印日志的方法汇总

目录

console.table用法

打印数组 

打印对象

打印数组对象

打印数组对象里的指定字段

console.count用法

不传参打印 

传参打印 

console.warn用法

  打印文本 

打印对象 

console.error用法

 打印文本 

打印对象 

console.assert用法

打印文本 

打印对象 

console.group用法

创建默认展开分组 

创建默认折叠分组 

console.time用法

console.trace用法

console.clear用法

---

console.table用法

console.table(tableData, tableColumns) 可在控制台将数据转化为表格形式输出，该方法接受两个参数：

1. tableData（必填）需要输出的数据，数组或对象。

2. tableColumns（可选）一个数组，元素为需要输出的列表。

打印数组 

const arr = ['第一个', '第二个', '第三个']
console.table(arr)

代码运行如下： 

打印对象

const test = {
  type: 'cat',
  action: 'eating',
  time: 20
}
console.table(test)

代码运行如下：

打印数组对象

const arr = [
  { name: '张三', age: 25, single: true },
  { name: '李四', age: 26, single: true },
  { name: '王二麻', age: 27, single: false }
]
console.table(arr)

代码运行如下：

打印数组对象里的指定字段

const arr = [
  { name: '张三', age: 25, single: true },
  { name: '李四', age: 26, single: true },
  { name: '王二麻', age: 27, single: false }
]
console.table(arr, ['age', 'single'])

代码运行如下：

console.count用法

console.count(label) 在控制台打印出调用次数，它接受一个参数：

1. label（可选）制定标签的调用次数。

不传参打印 

console.count();

效果图如下： 

 

传参打印 

console.count("测试");
console.count("测试");
console.count("测试");

 效果如下：

console.warn用法

console.warn(message) 接受一个参数：

1. message（必填）在控制台输出的警告内容，可文本或对象。

  打印文本 

console.warn('报错了')

代码效果如下：

打印对象 

console.warn({ msg: '报错了' })

 代码效果如下：

console.error用法

console.error(message) 接受一个参数：

1. message（必填）在控制台输出的错误内容，可文本或对象。

 打印文本 

console.error('报错了')

代码效果如下：

打印对象 

console.error({ msg: '报错了' })

 代码效果如下：

console.assert用法

console.assert(expression, message) 该方法接受两个参数，第一个参数非false的情况下，输入第二个参数的错误内容。

1. expression（必填）布尔表达式，返回 true 或 false。

2. message（必填）在控制台输出的错误内容，可文本或对象。

打印文本 

console.assert(false, '报错了')

代码效果如下：

打印对象 

console.assert(false, { msg: '报错了' })

 代码效果如下：

console.group用法

console.group(label) 该方法会创建一个分组，后续打印的内容会折叠在这个分组内，需要配置 

console.groupEnd() 使用，代表着分组结束。console.groupCollapsed(label) 和 console.group(label) 功能一样，只是它创建的分组默认是折叠的。

1. label（可选）分组的标签名称。

创建默认展开分组 

console.group('创建一个默认展开分组')
console.log("分组成员1")
console.log("分组成员2")
console.log("分组成员3")
console.groupEnd()

 代码效果如下：

创建默认折叠分组 

console.groupCollapsed('创建一个默认折叠分组')
console.log("分组成员1")
console.log("分组成员2")
console.log("分组成员3")
console.groupEnd()

 代码效果如下：

console.time用法

console.time(label) 该方法做为计时器使用，一般用来计算一段代码执行的时间，配合 

console.timeEnd(label) 使用，调用后代表计时结束，输出时长。

console.time('代码计时器');
for (i = 0; i < 100000; i++) {

}
console.timeEnd('代码计时器');

代码效果如下：

 

console.trace用法

console.trace(label) 该方法用于显示当前执行的代码在堆栈中的调用路径。

1. label（可选）输出时的标签。

const method1 = () => {
   console.trace('路径') 
}
const method2 = () => {
    method1();
}
method2();

 代码效果如下：

console.clear用法

输出了这么多，该清空了。

console.clear()

效果如下：