console函数

发表于 更新于 分类于 ， 阅读次数：

之前专门研究过给console函数的输出设置样式，但是刚才想用的时候又想不起来具体格式了，干脆给console写个专门的文章。因太过基础，仅做简单记录，不贴图了，部分伪代码可自行在控制台查看效果。

替换占位符

  • %o / %O (作用存疑)
    打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。
  • %d / %i (仅Firefox)
    打印整数。支持数字格式化。例如，console.log(“Foo %.2d”, 1.1) 会输出有先导 0 的两位有效数字：Foo 01。
  • %s
    打印字符串。
  • %f (仅Firefox)
    打印浮点数。支持格式化，比如 console.log(“Foo %.2f”, 1.1) 会输出两位小数：Foo 1.10
  • %c
    为打印内容定义样式，指令前的文本不会受到影响，但指令后的文本将会使用参数中声明的 CSS 样式。
    控制台信息的默认行为与行内元素相似，设置padding/margin等属性前需要先设置display属性。
    不是所有样式都支持，用到的时候自行探索。

静态方法

console.table(data [, columns])

以表格形式展示数据，非常直观。data 可以是数组或对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 对象数组
console.table([
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' },
]);

// 二维数组
console.table([
  ['name', 'age'],
  ['张三', 25],
  ['李四', 30],
]);

// 只展示指定列
console.table([
  { name: '张三', age: 25, city: '北京' },
  { name: '李四', age: 30, city: '上海' },
], ['name', 'city']);

console.assert(condition [, …data])

断言，condition 为 falsy 时输出错误信息，否则什么都不做。适合开发时做条件检查，替代 if(!x) console.error(...)。

1
2
3
Promise.resolve({ok: false, status: 500}).then((response) => {
  console.assert(response.ok, '请求失败:', response.status);
})

console.count([label]) / console.countReset([label])

计数器，输出同一 label 被调用的次数。label 默认为 "default"。

1
2
3
4
5
6
for (const item of [1,2,{type: 'error'},{type: 'error'}]) {
  if (item.type === 'error') {
    console.count('错误数量');
  }
}
console.countReset('错误数量'); // 重置

console.time([label]) / console.timeLog([label]) / console.timeEnd([label])

计时器，计算代码执行耗时。time 启动，timeEnd 结束并输出耗时，timeLog 输出当前已过时间但不停止计时。

1
2
3
4
5
console.time('fetchData');
const data = await fetch('/api').then(r => r.json());
console.timeLog('fetchData', '拿到数据了'); // 输出中间耗时
await processData(data);
console.timeEnd('fetchData'); // 输出总耗时

console.group([label]) / console.groupCollapsed([label]) / console.groupEnd()

分组输出，将后续日志折叠到一个层级下。groupCollapsed 默认折叠。

1
2
3
4
5
6
7
8
const user = {id: 'user.id', name: 'user.name', permissions: ['perm1', 'perm2']};
console.group('用户详情');
console.log('ID:', user.id);
console.log('姓名:', user.name);
console.groupCollapsed('权限列表');  // 嵌套分组，默认折叠
user.permissions.forEach(p => console.log(p));
console.groupEnd();
console.groupEnd();

console.trace([…data])

输出当前调用栈，调试时追踪调用路径非常有用。

1
2
3
4
5
6
7
function b() {
  console.trace('谁调用了 b?');
}
function a() {
  b();
}
a();

console.dir(object)

以 JSON 树的形式打印对象属性列表，比 log 更适合查看 DOM 对象的具体属性。

1
console.dir(document.body); // 展示 body 所有 DOM 属性

console.clear()

清空控制台。按需使用，别留在生产代码里。

参考地址: console - Web API | MDN