本文转载自微信公众号“前端先锋”(jingchengyideng)。
每个前端都会用 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()](https://developer.mozilla.org/en-US/docs/Web/API/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',
- ''
- );