本文转载自微信公众号《前端先锋》（jingchengyideng）。每个前端都会使用JavaScript控制台来记录或调试。但是控制台对象比console.log()有更多的东西。计算属性名称ES6的计算属性名称特别有用，因为它们可以通过在变量周围添加一对大括号来帮助您识别变量。constx=1,y=2,z=3;console.log({x,y,z});//{x:1,y:2,z:3}console.trace()console.trac()与console.log()完全相同，但它还输出整个堆栈跟踪，让您确切知道发生了什么。constouter=()=>{constinner=()=>console.trace('Hello');inner();};outer();/*Helloinner@VM207:3outer@VM207:5(匿名)@VM228:1*/console.group()console.group()可以将日志分组为可折叠的结构，当有多个日志时特别有用。console.group('Outer');//创建一个名为'Outer'的组console.log('Hello');//在'Outer'组中输出日志console.groupCollapsed('Inner');//创建一个groupnamed'Inner',collapsedstateconsole.log('Hellooooo');//输出'Inner'组的logconsole.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('Debugmessage');console.info('Usefulinformation');console.warn('Thisisawarning');console.error('Somethingwentwrong!');console.assert()console.assert()提供一种仅在断言失败时（例如第一个参数为假时）将某些内容记录为错误的便捷方法，否则完全跳过日志记录。constvalue=10;console.assert(value===10,'Valueisnot10!');//不输出日志console.assert(value===20,'Valueisnot20!');//输出日志："Valueisnot20!“console.count()您可以使用console.count()来统计一段代码被执行了多少次。Array.from({length:4}).forEach(()=>console.count('items')//计数器命名项);/*items:1items:2items:3items:4*/console.countReset('items');//resetcounterconsole.time()console.time()提供了一种快速检查代码性能的方法，但由于精度低，无法用于真正的基准测试。console.time('slowcomp');console.timeLog('slowcomp');console.timeEnd('slowcomp');css是最后一个，也可以在console.log()中使用%c字符串替换表达式来替换CSS应用于日志的各个部分。console.log('CSScanmake%cyourconsolelogs%c%cawesome%c!','color:#fff;background:#1e90ff;padding:4px','','color:#f00;font-weight:bold','');
