JavaScript console.log()技巧与技巧

每个人都会偶尔使用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.trace()与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('外部');           // 创建一个标记为'外部'的分组
console.log('你好');             // 在'外部'中记录日志
console.groupCollapsed('内部');  // 创建一个标记为'内部'的分组，折叠
console.log('你好啊');         // 在'内部'中记录日志
console.groupEnd();               // 结束当前分组，'内部'
console.groupEnd();               // 结束当前分组，'外部'
console.log('嗨');                // 在任何分组之外记录日志

日志级别

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

console.debug('调试信息');
console.info('有用的信息');
console.warn('这是一个警告');
console.error('出错了！');

console.assert()

console.assert() 提供了一种方便的方式，只有在断言失败时（即第一个参数为 false）才将某些内容记录为错误，否则跳过记录。

const value = 10;

console.assert(value === 10, '值不是10！'); // 不会记录任何内容
console.assert(value === 20, '值不是20！'); // 记录"值不是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');  // 重置标记为'items'的计数器

console.time()

console.time()可以快速检查代码的性能，但由于其精度较低，不适用于真正的基准测试。

console.time('slow comp');    // 启动名为'slow comp'的计时器
console.timeLog('slow comp'); // 记录'slow comp'计时器的值
console.timeEnd('slow comp'); // 停止并记录'slow comp'计时器

CSS

最后但并非最不重要的是，你可以在console.log()中使用%c字符串替换表达式来对日志的部分应用CSS样式。

console.log(
  'CSS可以使你的控制台日志%c变得%c很棒%c！',  // 需要格式化的字符串
  // 每个字符串都是要应用于连续%c的CSS样式
  'color: #fff; background: #1e90ff; padding: 4px',   // 应用样式
  '',                                                 // 清除任何样式
  'color: #f00; font-weight: bold',                   // 应用样式
  ''                                                  // 清除任何样式
);