增加CSS样式

我一直很好奇vue的dev-tools在控制台的带样式信息是怎样显示的，后来知道可以用%c占位符，恍然大悟。
而后我就尝试自己写了一下，上效果图。

再上代码（其实就是先写好样式，再传进去）

// 增加CSS样式console.log('%c vue-devtools %c Detected Vue v2.6.11 ',`    width: 100px;    height: 18px;    line-height: 18px;    border-top-left-radius: 4px;    border-bottom-left-radius: 4px;    color: white;    background-color: rgb(53,73,94);`,`    width: 150px;    height: 18px;    line-height: 18px;    border-top-right-radius: 4px;    border-bottom-right-radius: 4px;    color: white;    background-color: rgb(65,184,131);`)

%c 后面应用样式，我写的空格就是懒得写padding了

计时

之前看到一个大佬测试不同方法的数组去重，用的是new Date().getTime()来计算时间间隔。后来我看到
console.time()才发现有这么好用的东西。

// 计算Set方法数组去重的效率const arr = [1,2,3,4,5,4,3,2,1];// 开始计时console.time();// 数组去重const newArr = [...new Set(arr)];console.log(arr,newArr);// 结束计时console.timeEnd();

console.time()开始计时，console.timeLog()打印即刻的计时秒数，console.timeEnd()结束并打印计时。
可以传参数代表计时器的名称，若不传默认名称为default。

以上两个是我认为很有趣的两个console方法，console还有其余少量很好用的方法，warn、error、table等等，我就不赘述了。想理解更多可以查看文档 - Console - MDN 文档