JavaScript中console.log() 方法如何使用

本篇文章给大家分享的是有关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(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('Debugmessage');console.info('Usefulinformation');console.warn('Thisisawarning');console.error('Somethingwentwrong!');

console.assert()

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

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的计数器);/*items:1items:2items:3items:4*/console.countReset('items');//重置计数器

console.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','');