时间： 分类：   字数： 562 字 阅读： 2分钟
标签：

每个前端都会用 JavaScript 控制台打日志或调试。但是 console 对象比 console.log() 有更多的东西。

计算属性名称

ES6 的计算属性名称特别有用，因为它们可以通过在变量周围添加一对大括号来帮你识别的变量。

const x = 1, y = 2, z = 3;

console.log({x, y, z}); // {x: 1, y: 2, z: 3}

console.trace()

console.trac() 与 console.log() 完全相同，但它也会输出整个栈跟踪，能让你确切地知道到底发生了什么。

const outer = () => {
  const inner = () => console.trace('Hello');
  inner();
};

outer();
/*
  Hello
  inner @ VM207:3
  outer @ VM207:5
  (anonymous) @ VM228:1
*/

console.group()

console.group() 可以把日志分组为可折叠的结构，当有多个日志时特别有用。

console.group('Outer');           // 创建一个名为 'Outer' 的组
console.log('Hello');             // 在 'Outer' 组中输出日志
console.groupCollapsed('Inner');  // 创建一个名为 'Inner' 的组，折叠状态
console.log('Hellooooo');         // 在 'Inner' 组中输出日志
console.groupEnd();               // 结束当前组, 'Inner'
console.groupEnd();               // 结束当前组, 'Outer'
console.log('Hi');                // 在组外输出日志

日志级别

除了 console.log() 之外，还有其他一些日志记录级别，例如 console.debug() 、 console.info() 、 console.warn() 和 console.error() 。

console.debug('Debug message');
console.info('Useful information');
console.warn('This is a warning');
console.error('Something went wrong!');

console.assert()

console.assert() 提供了一种简便的方法，仅在断言失败时将某些内容记录为错误（例如当第一个参数为 false 时），否则完全跳过日志。

const value = 10;

console.assert(value === 10, 'Value is not 10!'); // 不输出日志
console.assert(value === 20, 'Value is not 20!'); // 输出日志："Value is not 20!"

console.count()

可以用 console.count() 来统计一段代码执行了多少次。

Array.from({ length: 4 }).forEach(
  () => console.count('items')  // 名为 items 的计数器
);
/*
  items: 1
  items: 2
  items: 3
  items: 4
*/
console.countReset('items');  // 重置计数器

console.time()

console.time() 提供了一种快速检查代码性能的方法，但是由于精度较低，不可用于真正的基准测试。

console.time('slow comp');    
console.timeLog('slow comp'); 
console.timeEnd('slow comp');

CSS

最后一个，还可以在 console.log() 中用 ％c 字符串替换表达式将 CSS 应用于日志的各个部分。

console.log(
  'CSS can make %cyour console logs%c %cawesome%c!',
  'color: #fff; background: #1e90ff; padding: 4px', 
  '', 
  'color: #f00; font-weight: bold',
  ''
);
0%